From 727c6384a2a07c42cd132d02da8c7dbb5757ea4f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 25 Jun 2021 16:50:00 -0700 Subject: Refactor code, Fix orientation bug --- src/utils/camera.ts | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/utils/camera.ts (limited to 'src/utils') diff --git a/src/utils/camera.ts b/src/utils/camera.ts new file mode 100644 index 00000000..fc2471e5 --- /dev/null +++ b/src/utils/camera.ts @@ -0,0 +1,67 @@ +import CameraRoll from '@react-native-community/cameraroll'; +import {useNavigation} from '@react-navigation/native'; +import {Dispatch, RefObject, SetStateAction} from 'react'; +import {Alert} from 'react-native'; +import {Orientation, RNCamera} from 'react-native-camera'; +import ImagePicker from 'react-native-image-crop-picker'; +import {ScreenType} from 'src/types'; +import {ERROR_UPLOAD} from '../constants/strings'; + +/* + * Captures a photo and pauses to shoe the preview of the picture taken + */ +export const takePicture = ( + cameraRef: RefObject, + setShowSaveButton: Dispatch>, + setCapturedImage: Dispatch>, +) => { + if (cameraRef !== null) { + cameraRef.current?.pausePreview(); + const options = { + forceUpOrientation: true, + quality: 0.5, + base64: true, + }; + cameraRef.current?.takePictureAsync(options).then((response) => { + setShowSaveButton(true); + setCapturedImage(response.uri); + }); + } +}; + +export const downloadImage = (capturedImageURI: string) => { + CameraRoll.save(capturedImageURI, {album: 'Recents', type: 'photo'}) + .then((_res) => Alert.alert('Saved to device!')) + .catch((_err) => Alert.alert('Failed to save to device!')); +}; + +export const navigateToImagePicker = ( + screenType: ScreenType, + title: string, +) => { + const navigation = useNavigation(); + ImagePicker.openPicker({ + smartAlbums: [ + 'Favorites', + 'RecentlyAdded', + 'SelfPortraits', + 'Screenshots', + 'UserLibrary', + ], + mediaType: 'any', + }) + .then((picture) => { + if ('path' in picture) { + navigation.navigate('ZoomInCropper', { + screenType, + title, + image: picture, + }); + } + }) + .catch((err) => { + if (err.code && err.code !== 'E_PICKER_CANCELLED') { + Alert.alert(ERROR_UPLOAD); + } + }); +}; -- cgit v1.2.3-70-g09d2 From 448e91ed0b6c7519c02bbe1ac32a9d51989679db Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 25 Jun 2021 16:58:05 -0700 Subject: Fix lint errors --- src/components/camera/buttons.tsx | 11 +++++++---- src/screens/moments/CameraScreen.tsx | 23 ++++++++++++----------- src/utils/camera.ts | 4 ++-- 3 files changed, 21 insertions(+), 17 deletions(-) (limited to 'src/utils') diff --git a/src/components/camera/buttons.tsx b/src/components/camera/buttons.tsx index 321be958..936a663d 100644 --- a/src/components/camera/buttons.tsx +++ b/src/components/camera/buttons.tsx @@ -25,15 +25,16 @@ export const GalleryIcon: React.FC = ({ title, mostRecentPhoto, }) => { + const navigation = useNavigation(); return ( navigateToImagePicker(screenType, title)} + onPress={() => navigateToImagePicker(navigation, screenType, title)} style={styles.saveButton}> Gallery @@ -82,14 +83,14 @@ export const FlashButton: React.FC = ({ height={30} width={20} color={'white'} - style={{zIndex: 999}} + style={styles.flashIcon} /> ) : ( )} Flash @@ -146,4 +147,6 @@ const styles = StyleSheet.create({ alignItems: 'center', borderRadius: 30, }, + galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5}, + flashIcon: {zIndex: 2}, }); diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 4c2633a3..8a88d95e 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -103,10 +103,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { @@ -123,13 +120,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { style={styles.captureButtonContainer}> - + {capturedImage ? ( = ({route, navigation}) => { }; const styles = StyleSheet.create({ + camera: { + flex: 1, + justifyContent: 'space-between', + }, container: { flex: 1, flexDirection: 'column', @@ -195,6 +190,12 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'center', }, + bottomRightContainer: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: (SCREEN_WIDTH - 100) / 2, + }, nextButton: { zIndex: 1, width: normalize(100), diff --git a/src/utils/camera.ts b/src/utils/camera.ts index fc2471e5..1c57f85d 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -2,7 +2,7 @@ import CameraRoll from '@react-native-community/cameraroll'; import {useNavigation} from '@react-navigation/native'; import {Dispatch, RefObject, SetStateAction} from 'react'; import {Alert} from 'react-native'; -import {Orientation, RNCamera} from 'react-native-camera'; +import {RNCamera} from 'react-native-camera'; import ImagePicker from 'react-native-image-crop-picker'; import {ScreenType} from 'src/types'; import {ERROR_UPLOAD} from '../constants/strings'; @@ -36,10 +36,10 @@ export const downloadImage = (capturedImageURI: string) => { }; export const navigateToImagePicker = ( + navigation: any, screenType: ScreenType, title: string, ) => { - const navigation = useNavigation(); ImagePicker.openPicker({ smartAlbums: [ 'Favorites', -- cgit v1.2.3-70-g09d2 From f273a7aa1c2e27692c2a03ae1e2fc9b81360558d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 25 Jun 2021 17:18:47 -0700 Subject: Fix lint errors --- src/utils/camera.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'src/utils') diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 1c57f85d..afd7d354 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -1,5 +1,4 @@ import CameraRoll from '@react-native-community/cameraroll'; -import {useNavigation} from '@react-navigation/native'; import {Dispatch, RefObject, SetStateAction} from 'react'; import {Alert} from 'react-native'; import {RNCamera} from 'react-native-camera'; -- cgit v1.2.3-70-g09d2 From 3f826ec0741d3f0d0c85a17e5d0a09eef402dbf2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Jun 2021 16:45:45 -0400 Subject: Set to only allow photos --- src/utils/camera.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/utils') diff --git a/src/utils/camera.ts b/src/utils/camera.ts index afd7d354..77f73eea 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -47,7 +47,7 @@ export const navigateToImagePicker = ( 'Screenshots', 'UserLibrary', ], - mediaType: 'any', + mediaType: 'photo', }) .then((picture) => { if ('path' in picture) { -- cgit v1.2.3-70-g09d2 From d4b210518eaffd3bf1320ca7ce7fa4a6d611528f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Jun 2021 17:04:10 -0400 Subject: Cleanup code, Update camera options --- src/components/moments/Moment.tsx | 6 +++--- src/utils/camera.ts | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src/utils') diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 2e813142..9449271b 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -41,7 +41,7 @@ const Moment: React.FC = ({ }) => { const navigation = useNavigation(); - const handleUploadMoment = () => { + const navigateToCameraScreen = () => { navigation.navigate('CameraScreen', { title, screenType, @@ -84,7 +84,7 @@ const Moment: React.FC = ({ handleUploadMoment()} + onPress={() => navigateToCameraScreen()} color={TAGG_LIGHT_BLUE} style={styles.horizontalMargin} /> @@ -114,7 +114,7 @@ const Moment: React.FC = ({ /> ))} {(images === undefined || images.length === 0) && !userXId && ( - handleUploadMoment()}> + navigateToCameraScreen()}> diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 77f73eea..73461ad7 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -18,8 +18,7 @@ export const takePicture = ( cameraRef.current?.pausePreview(); const options = { forceUpOrientation: true, - quality: 0.5, - base64: true, + writeExif: false, }; cameraRef.current?.takePictureAsync(options).then((response) => { setShowSaveButton(true); -- cgit v1.2.3-70-g09d2