From f0762b7a3171f99833eb3c3f5e723c472dbc4879 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 25 Jun 2021 03:23:56 -0700 Subject: Add assets for camera screen --- src/assets/icons/camera/flash-off.svg | 1 + src/assets/icons/camera/flash-on.svg | 1 + src/assets/icons/camera/flip.svg | 1 + src/assets/icons/camera/save.svg | 1 + 4 files changed, 4 insertions(+) create mode 100644 src/assets/icons/camera/flash-off.svg create mode 100644 src/assets/icons/camera/flash-on.svg create mode 100644 src/assets/icons/camera/flip.svg create mode 100644 src/assets/icons/camera/save.svg (limited to 'src') diff --git a/src/assets/icons/camera/flash-off.svg b/src/assets/icons/camera/flash-off.svg new file mode 100644 index 00000000..fb04efd2 --- /dev/null +++ b/src/assets/icons/camera/flash-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/camera/flash-on.svg b/src/assets/icons/camera/flash-on.svg new file mode 100644 index 00000000..b4608b75 --- /dev/null +++ b/src/assets/icons/camera/flash-on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/camera/flip.svg b/src/assets/icons/camera/flip.svg new file mode 100644 index 00000000..e2ef1a0c --- /dev/null +++ b/src/assets/icons/camera/flip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/camera/save.svg b/src/assets/icons/camera/save.svg new file mode 100644 index 00000000..6a28fb55 --- /dev/null +++ b/src/assets/icons/camera/save.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 0646d38547319200f7f725cdd76b1ed9b531a188 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 25 Jun 2021 03:24:54 -0700 Subject: Navigate to camera screen, Move image picker funct --- src/components/moments/Moment.tsx | 38 ++++++++------------------------------ 1 file changed, 8 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 81e23076..2e813142 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -1,9 +1,8 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; import {Text} from 'react-native-animatable'; import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; -import ImagePicker from 'react-native-image-crop-picker'; import LinearGradient from 'react-native-linear-gradient'; import DeleteIcon from '../../assets/icons/delete-logo.svg'; import DownIcon from '../../assets/icons/down_icon.svg'; @@ -11,7 +10,6 @@ import BigPlusIcon from '../../assets/icons/plus-icon-white.svg'; import PlusIcon from '../../assets/icons/plus-icon.svg'; import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {ERROR_UPLOAD} from '../../constants/strings'; import {MomentType, ScreenType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import MomentTile from './MomentTile'; @@ -43,31 +41,11 @@ const Moment: React.FC = ({ }) => { const navigation = useNavigation(); - const navigateToImagePicker = () => { - ImagePicker.openPicker({ - smartAlbums: [ - 'Favorites', - 'RecentlyAdded', - 'SelfPortraits', - 'Screenshots', - 'UserLibrary', - ], - mediaType: 'any', - }) - .then((picture) => { - if ('path' in picture) { - navigation.navigate('ZoomInCropper', { - screenType, - title: title, - image: picture, - }); - } - }) - .catch((err) => { - if (err.code && err.code !== 'E_PICKER_CANCELLED') { - Alert.alert(ERROR_UPLOAD); - } - }); + const handleUploadMoment = () => { + navigation.navigate('CameraScreen', { + title, + screenType, + }); }; return ( @@ -106,7 +84,7 @@ const Moment: React.FC = ({ navigateToImagePicker()} + onPress={() => handleUploadMoment()} color={TAGG_LIGHT_BLUE} style={styles.horizontalMargin} /> @@ -136,7 +114,7 @@ const Moment: React.FC = ({ /> ))} {(images === undefined || images.length === 0) && !userXId && ( - navigateToImagePicker()}> + handleUploadMoment()}> -- cgit v1.2.3-70-g09d2 From f596a0246a9b9453df3a93c8c3fc5c9137bb50fc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 25 Jun 2021 03:26:00 -0700 Subject: Create camera screen, Add to Navigator --- src/routes/main/MainStackNavigator.tsx | 4 + src/routes/main/MainStackScreen.tsx | 8 + src/screens/moments/CameraScreen.tsx | 325 +++++++++++++++++++++++++++++++++ src/screens/moments/index.ts | 1 + 4 files changed, 338 insertions(+) create mode 100644 src/screens/moments/CameraScreen.tsx (limited to 'src') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index b58e03cc..ef3fc7fd 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -115,6 +115,10 @@ export type MainStackParams = { screenType: ScreenType; title: string; }; + CameraScreen: { + title: string; + screenType: ScreenType; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 9e3747f9..f6adeab1 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -34,6 +34,7 @@ import { SuggestedPeopleWelcomeScreen, TagSelectionScreen, TagFriendsScreen, + CameraScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -334,6 +335,13 @@ const MainStackScreen: React.FC = ({route}) => { gestureEnabled: false, }} /> + ); }; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx new file mode 100644 index 00000000..70411a83 --- /dev/null +++ b/src/screens/moments/CameraScreen.tsx @@ -0,0 +1,325 @@ +import CameraRoll from '@react-native-community/cameraroll'; +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; +import {RouteProp, useFocusEffect} from '@react-navigation/core'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React, {createRef, useCallback, useEffect, useState} from 'react'; +import { + Alert, + Image, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; +import ImagePicker from 'react-native-image-crop-picker'; +import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; +import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; +import FlipIcon from '../../assets/icons/camera/flip.svg'; +import SaveIcon from '../../assets/icons/camera/save.svg'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {TaggSquareButton} from '../../components'; +import {ERROR_UPLOAD} from '../../constants/strings'; +import {MainStackParams} from '../../routes'; +import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils'; + +type CameraScreenRouteProps = RouteProp; +type CameraScreenNavigationProps = StackNavigationProp< + MainStackParams, + 'CameraScreen' +>; +interface CameraScreenProps { + route: CameraScreenRouteProps; + navigation: CameraScreenNavigationProps; +} +const CameraScreen: React.FC = ({route, navigation}) => { + const {title, screenType} = route.params; + const cameraRef = createRef(); + const tabBarHeight = useBottomTabBarHeight(); + const [cameraType, setCameraType] = useState('front'); + const [flashMode, setFlashMode] = useState('off'); + const [capturedImage, setCapturedImage] = useState(''); + const [mostRecentPhoto, setMostRecentPhoto] = useState(''); + + // Removes bottom navigation bar on current screen and add it back when navigating away + useFocusEffect( + useCallback(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + return () => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); + }; + }, [navigation]), + ); + + useEffect(() => { + CameraRoll.getPhotos({first: 1}) + .then((lastPhoto) => { + lastPhoto.edges.forEach((edge) => + setMostRecentPhoto(edge.node.image.uri), + ); + }) + .catch((err) => console.log('Unable to fetch preview photo for gallery')); + }, [capturedImage]); + + const takePicture = () => { + if (cameraRef !== null) { + cameraRef.current?.pausePreview(); + const options = {quality: 0.5, base64: true}; + cameraRef.current?.takePictureAsync(options).then((response) => { + setShowSaveButton(true); + setCapturedImage(response.uri); + }); + } + }; + + const handleNext = () => { + navigation.navigate('CaptionScreen', { + screenType, + title, + image: { + filename: capturedImage, + path: capturedImage, + }, + }); + }; + + const downloadImage = () => { + CameraRoll.save(capturedImage, {album: 'Recents', type: 'photo'}) + .then((_res) => Alert.alert('Saved to device!')) + .catch((_err) => Alert.alert('Failed to save to device!')); + }; + + const navigateToImagePicker = () => { + ImagePicker.openPicker({ + smartAlbums: [ + 'Favorites', + 'RecentlyAdded', + 'SelfPortraits', + 'Screenshots', + 'UserLibrary', + ], + mediaType: 'any', + }) + .then((picture) => { + if ('path' in picture) { + navigation.navigate('ZoomInCropper', { + screenType, + title: title, + image: picture, + }); + } + }) + .catch((err) => { + if (err.code && err.code !== 'E_PICKER_CANCELLED') { + Alert.alert(ERROR_UPLOAD); + } + }); + }; + + const GalleryIcon = () => ( + + + Gallery + + ); + + const FlipButton = () => ( + setCameraType(cameraType === 'front' ? 'back' : 'front')} + style={styles.saveButton}> + + Flip + + ); + + const SaveButton = () => ( + { + downloadImage(); + }} + style={[styles.saveButton]}> + + Save + + ); + + const FlashButton = () => ( + setFlashMode(flashMode === 'on' ? 'off' : 'on')} + style={styles.flashButtonContainer}> + {flashMode === 'on' ? ( + + ) : ( + + )} + Flash + + ); + + const handleClose = () => { + if (showSaveButton) { + cameraRef.current?.resumePreview(); + setShowSaveButton(false); + setCapturedImage(''); + } else { + navigation.goBack(); + } + }; + + const [showSaveButton, setShowSaveButton] = useState(false); + + return ( + + + + + + + + {showSaveButton ? : } + + + + + {capturedImage ? ( + + ) : ( + + )} + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + backgroundColor: 'black', + }, + preview: { + flex: 1, + justifyContent: 'flex-end', + alignItems: 'center', + }, + captureButtonContainer: { + alignSelf: 'center', + backgroundColor: 'transparent', + borderRadius: 100, + borderWidth: 4, + borderColor: '#fff', + width: 93, + height: 93, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + captureButton: { + backgroundColor: '#fff', + width: 68, + height: 68, + borderRadius: 74, + }, + closeButton: { + position: 'absolute', + top: 0, + paddingTop: HeaderHeight, + zIndex: 1, + marginLeft: '5%', + }, + bottomContainer: { + position: 'absolute', + width: SCREEN_WIDTH, + flexDirection: 'row', + justifyContent: 'center', + }, + saveButton: { + zIndex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: (SCREEN_WIDTH - 100) / 2, + }, + saveButtonLabel: { + color: 'white', + fontWeight: '700', + fontSize: normalize(12), + lineHeight: normalize(14.32), + marginTop: 5, + zIndex: 999, + }, + nextButton: { + zIndex: 1, + width: normalize(100), + height: normalize(37), + borderRadius: 10, + }, + nextButtonLabel: { + fontWeight: '700', + fontSize: normalize(15), + lineHeight: normalize(17.8), + letterSpacing: normalize(1.3), + textAlign: 'center', + }, + flashButtonContainer: { + position: 'absolute', + backgroundColor: '#808080', + // opacity: 0.25, + zIndex: 1, + top: normalize(50), + right: 0, + marginRight: normalize(18), + height: 86, + width: 49, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 30, + }, +}); + +export default CameraScreen; diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts index aac2ddeb..07d55192 100644 --- a/src/screens/moments/index.ts +++ b/src/screens/moments/index.ts @@ -1,2 +1,3 @@ export {default as TagSelectionScreen} from './TagSelectionScreen'; export {default as TagFriendsScreen} from './TagFriendsScreen'; +export {default as CameraScreen} from './CameraScreen'; -- cgit v1.2.3-70-g09d2 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/components/camera/buttons.tsx | 149 +++++++++++++++++++++++++++ src/components/camera/index.ts | 1 + src/components/index.ts | 9 +- src/screens/moments/CameraScreen.tsx | 194 ++++++++--------------------------- src/utils/camera.ts | 67 ++++++++++++ 5 files changed, 263 insertions(+), 157 deletions(-) create mode 100644 src/components/camera/buttons.tsx create mode 100644 src/components/camera/index.ts create mode 100644 src/utils/camera.ts (limited to 'src') diff --git a/src/components/camera/buttons.tsx b/src/components/camera/buttons.tsx new file mode 100644 index 00000000..321be958 --- /dev/null +++ b/src/components/camera/buttons.tsx @@ -0,0 +1,149 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {Dispatch, SetStateAction} from 'react'; +import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import {CameraType, FlashMode} from 'react-native-camera'; +import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; +import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; +import FlipIcon from '../../assets/icons/camera/flip.svg'; +import SaveIcon from '../../assets/icons/camera/save.svg'; +import {ScreenType} from '../../types'; +import {downloadImage, navigateToImagePicker} from '../../utils/camera'; +import {normalize, SCREEN_WIDTH} from '../../utils/layouts'; + +interface GalleryIconProps { + screenType: ScreenType; + title: string; + mostRecentPhoto: string; +} + +/* + * Displays the most recent photo in the user's gallery + * On click, navigates to the image picker + */ +export const GalleryIcon: React.FC = ({ + screenType, + title, + mostRecentPhoto, +}) => { + return ( + navigateToImagePicker(screenType, title)} + style={styles.saveButton}> + + Gallery + + ); +}; + +interface FlipButtonProps { + setCameraType: Dispatch>; + cameraType: keyof CameraType; +} + +/* + * Toggles between back camera and front camera + * Appears only when user has not taken a picture yet + * Once user takes a picture, this button disappears to reveal the save button + */ +export const FlipButton: React.FC = ({ + setCameraType, + cameraType, +}) => ( + setCameraType(cameraType === 'front' ? 'back' : 'front')} + style={styles.saveButton}> + + Flip + +); + +interface FlashButtonProps { + flashMode: keyof FlashMode; + setFlashMode: Dispatch>; +} + +/* + * Toggles between flash on/off modes + */ +export const FlashButton: React.FC = ({ + flashMode, + setFlashMode, +}) => ( + setFlashMode(flashMode === 'on' ? 'off' : 'on')} + style={styles.flashButtonContainer}> + {flashMode === 'on' ? ( + + ) : ( + + )} + Flash + +); + +interface SaveButtonProps { + capturedImageURI: string; +} + +/* + * Appears when a picture has been taken, + * On click, saves the captured image to "Recents" album on device gallery + */ +export const SaveButton: React.FC = ({capturedImageURI}) => ( + { + downloadImage(capturedImageURI); + }} + style={[styles.saveButton]}> + + Save + +); + +const styles = StyleSheet.create({ + saveButton: { + zIndex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: (SCREEN_WIDTH - 100) / 2, + }, + saveButtonLabel: { + color: 'white', + fontWeight: '700', + fontSize: normalize(12), + lineHeight: normalize(14.32), + marginTop: 5, + zIndex: 999, + }, + flashButtonContainer: { + position: 'absolute', + backgroundColor: '#808080', + opacity: 0.25, + zIndex: 1, + top: normalize(50), + right: 0, + marginRight: normalize(18), + height: 86, + width: 49, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 30, + }, +}); diff --git a/src/components/camera/index.ts b/src/components/camera/index.ts new file mode 100644 index 00000000..428d0fe8 --- /dev/null +++ b/src/components/camera/index.ts @@ -0,0 +1 @@ +export * from './buttons'; diff --git a/src/components/index.ts b/src/components/index.ts index 47dc583b..c2f50118 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,9 +1,10 @@ +export * from './camera'; +export * from './comments'; export * from './common'; +export * from './messages'; +export * from './moments'; export * from './onboarding'; export * from './profile'; export * from './search'; -export * from './taggs'; -export * from './comments'; -export * from './moments'; export * from './suggestedPeople'; -export * from './messages'; +export * from './taggs'; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 70411a83..4c2633a3 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -3,28 +3,22 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp, useFocusEffect} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {createRef, useCallback, useEffect, useState} from 'react'; -import { - Alert, - Image, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; +import {StyleSheet, TouchableOpacity, View} from 'react-native'; import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; -import ImagePicker from 'react-native-image-crop-picker'; -import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; -import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; -import FlipIcon from '../../assets/icons/camera/flip.svg'; -import SaveIcon from '../../assets/icons/camera/save.svg'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; -import {TaggSquareButton} from '../../components'; -import {ERROR_UPLOAD} from '../../constants/strings'; +import { + FlashButton, + FlipButton, + GalleryIcon, + SaveButton, + TaggSquareButton, +} from '../../components'; import {MainStackParams} from '../../routes'; import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils'; +import {takePicture} from '../../utils/camera'; type CameraScreenRouteProps = RouteProp; -type CameraScreenNavigationProps = StackNavigationProp< +export type CameraScreenNavigationProps = StackNavigationProp< MainStackParams, 'CameraScreen' >; @@ -40,8 +34,11 @@ const CameraScreen: React.FC = ({route, navigation}) => { const [flashMode, setFlashMode] = useState('off'); const [capturedImage, setCapturedImage] = useState(''); const [mostRecentPhoto, setMostRecentPhoto] = useState(''); + const [showSaveButton, setShowSaveButton] = useState(false); - // Removes bottom navigation bar on current screen and add it back when navigating away + /* + * Removes bottom navigation bar on current screen and add it back when navigating away + */ useFocusEffect( useCallback(() => { navigation.dangerouslyGetParent()?.setOptions({ @@ -55,6 +52,9 @@ const CameraScreen: React.FC = ({route, navigation}) => { }, [navigation]), ); + /* + * Chooses the last picture from gallery to display as the gallery button icon + */ useEffect(() => { CameraRoll.getPhotos({first: 1}) .then((lastPhoto) => { @@ -62,20 +62,14 @@ const CameraScreen: React.FC = ({route, navigation}) => { setMostRecentPhoto(edge.node.image.uri), ); }) - .catch((err) => console.log('Unable to fetch preview photo for gallery')); + .catch((_err) => + console.log('Unable to fetch preview photo for gallery'), + ); }, [capturedImage]); - const takePicture = () => { - if (cameraRef !== null) { - cameraRef.current?.pausePreview(); - const options = {quality: 0.5, base64: true}; - cameraRef.current?.takePictureAsync(options).then((response) => { - setShowSaveButton(true); - setCapturedImage(response.uri); - }); - } - }; - + /* + * Appears once a picture has been captured to navigate to the caption screen + */ const handleNext = () => { navigation.navigate('CaptionScreen', { screenType, @@ -87,94 +81,10 @@ const CameraScreen: React.FC = ({route, navigation}) => { }); }; - const downloadImage = () => { - CameraRoll.save(capturedImage, {album: 'Recents', type: 'photo'}) - .then((_res) => Alert.alert('Saved to device!')) - .catch((_err) => Alert.alert('Failed to save to device!')); - }; - - const navigateToImagePicker = () => { - ImagePicker.openPicker({ - smartAlbums: [ - 'Favorites', - 'RecentlyAdded', - 'SelfPortraits', - 'Screenshots', - 'UserLibrary', - ], - mediaType: 'any', - }) - .then((picture) => { - if ('path' in picture) { - navigation.navigate('ZoomInCropper', { - screenType, - title: title, - image: picture, - }); - } - }) - .catch((err) => { - if (err.code && err.code !== 'E_PICKER_CANCELLED') { - Alert.alert(ERROR_UPLOAD); - } - }); - }; - - const GalleryIcon = () => ( - - - Gallery - - ); - - const FlipButton = () => ( - setCameraType(cameraType === 'front' ? 'back' : 'front')} - style={styles.saveButton}> - - Flip - - ); - - const SaveButton = () => ( - { - downloadImage(); - }} - style={[styles.saveButton]}> - - Save - - ); - - const FlashButton = () => ( - setFlashMode(flashMode === 'on' ? 'off' : 'on')} - style={styles.flashButtonContainer}> - {flashMode === 'on' ? ( - - ) : ( - - )} - Flash - - ); - + /* + * If picture is not taken yet, exists from camera screen to profile view + * If picture is taken, exists from captured image's preview to camera + * */ const handleClose = () => { if (showSaveButton) { cameraRef.current?.resumePreview(); @@ -185,14 +95,12 @@ const CameraScreen: React.FC = ({route, navigation}) => { } }; - const [showSaveButton, setShowSaveButton] = useState(false); - return ( - + = ({route, navigation}) => { flashMode={flashMode} /> - {showSaveButton ? : } + {showSaveButton ? ( + + ) : ( + + )} + takePicture(cameraRef, setShowSaveButton, setCapturedImage) + } style={styles.captureButtonContainer}> @@ -227,7 +141,11 @@ const CameraScreen: React.FC = ({route, navigation}) => { labelStyle={styles.nextButtonLabel} /> ) : ( - + )} @@ -277,21 +195,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'center', }, - saveButton: { - zIndex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - width: (SCREEN_WIDTH - 100) / 2, - }, - saveButtonLabel: { - color: 'white', - fontWeight: '700', - fontSize: normalize(12), - lineHeight: normalize(14.32), - marginTop: 5, - zIndex: 999, - }, nextButton: { zIndex: 1, width: normalize(100), @@ -305,21 +208,6 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1.3), textAlign: 'center', }, - flashButtonContainer: { - position: 'absolute', - backgroundColor: '#808080', - // opacity: 0.25, - zIndex: 1, - top: normalize(50), - right: 0, - marginRight: normalize(18), - height: 86, - width: 49, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - borderRadius: 30, - }, }); export default CameraScreen; 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') 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') 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 5fcffd40746b2074d523f53dc82c824d147444e5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Jun 2021 16:29:06 -0400 Subject: Refactor buttons --- Makefile | 14 ++++ src/components/camera/FlashButton.tsx | 42 ++++++++++ src/components/camera/FlipButton.tsx | 29 +++++++ src/components/camera/GalleryIcon.tsx | 39 +++++++++ src/components/camera/SaveButton.tsx | 26 ++++++ src/components/camera/buttons.tsx | 152 ---------------------------------- src/components/camera/index.ts | 5 +- src/components/camera/styles.tsx | 37 +++++++++ 8 files changed, 191 insertions(+), 153 deletions(-) create mode 100644 Makefile create mode 100644 src/components/camera/FlashButton.tsx create mode 100644 src/components/camera/FlipButton.tsx create mode 100644 src/components/camera/GalleryIcon.tsx create mode 100644 src/components/camera/SaveButton.tsx delete mode 100644 src/components/camera/buttons.tsx create mode 100644 src/components/camera/styles.tsx (limited to 'src') diff --git a/Makefile b/Makefile new file mode 100644 index 00000000..b0022598 --- /dev/null +++ b/Makefile @@ -0,0 +1,14 @@ +build: + yarn + cd ios && pod install && cd .. + +clean: + -rm *.lock + -rm ios/*.lock + +deep_clean: + -rm *.lock + -rm ios/*.lock + -rm -rf /Users/ivan/Library/Developer/Xcode/DerivedData + -rm -rf node_modules + yarn cache clean diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx new file mode 100644 index 00000000..06a4e44e --- /dev/null +++ b/src/components/camera/FlashButton.tsx @@ -0,0 +1,42 @@ +import React, {Dispatch, SetStateAction} from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import {FlashMode} from 'react-native-camera'; +import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; +import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; +import {styles} from './styles'; + +interface FlashButtonProps { + flashMode: keyof FlashMode; + setFlashMode: Dispatch>; +} + +/* + * Toggles between flash on/off modes + */ +export const FlashButton: React.FC = ({ + flashMode, + setFlashMode, +}) => ( + setFlashMode(flashMode === 'on' ? 'off' : 'on')} + style={styles.flashButtonContainer}> + {flashMode === 'on' ? ( + + ) : ( + + )} + Flash + +); + +export default FlashButton; diff --git a/src/components/camera/FlipButton.tsx b/src/components/camera/FlipButton.tsx new file mode 100644 index 00000000..c6f710a9 --- /dev/null +++ b/src/components/camera/FlipButton.tsx @@ -0,0 +1,29 @@ +import React, {Dispatch, SetStateAction} from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import {CameraType} from 'react-native-camera'; +import FlipIcon from '../../assets/icons/camera/flip.svg'; +import {styles} from './styles'; + +interface FlipButtonProps { + setCameraType: Dispatch>; + cameraType: keyof CameraType; +} + +/* + * Toggles between back camera and front camera + * Appears only when user has not taken a picture yet + * Once user takes a picture, this button disappears to reveal the save button + */ +export const FlipButton: React.FC = ({ + setCameraType, + cameraType, +}) => ( + setCameraType(cameraType === 'front' ? 'back' : 'front')} + style={styles.saveButton}> + + Flip + +); + +export default FlipButton; diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx new file mode 100644 index 00000000..19a63a9a --- /dev/null +++ b/src/components/camera/GalleryIcon.tsx @@ -0,0 +1,39 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {Image, Text, TouchableOpacity} from 'react-native'; +import {ScreenType} from '../../types'; +import {navigateToImagePicker} from '../../utils/camera'; +import {styles} from './styles'; + +interface GalleryIconProps { + screenType: ScreenType; + title: string; + mostRecentPhoto: string; +} + +/* + * Displays the most recent photo in the user's gallery + * On click, navigates to the image picker + */ +export const GalleryIcon: React.FC = ({ + screenType, + title, + mostRecentPhoto, +}) => { + const navigation = useNavigation(); + return ( + navigateToImagePicker(navigation, screenType, title)} + style={styles.saveButton}> + + Gallery + + ); +}; + +export default GalleryIcon; diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx new file mode 100644 index 00000000..840cc804 --- /dev/null +++ b/src/components/camera/SaveButton.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import SaveIcon from '../../assets/icons/camera/save.svg'; +import {downloadImage} from '../../utils/camera'; +import {styles} from './styles'; + +interface SaveButtonProps { + capturedImageURI: string; +} + +/* + * Appears when a picture has been taken, + * On click, saves the captured image to "Recents" album on device gallery + */ +export const SaveButton: React.FC = ({capturedImageURI}) => ( + { + downloadImage(capturedImageURI); + }} + style={styles.saveButton}> + + Save + +); + +export default SaveButton; diff --git a/src/components/camera/buttons.tsx b/src/components/camera/buttons.tsx deleted file mode 100644 index 936a663d..00000000 --- a/src/components/camera/buttons.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import {useNavigation} from '@react-navigation/native'; -import React, {Dispatch, SetStateAction} from 'react'; -import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native'; -import {CameraType, FlashMode} from 'react-native-camera'; -import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; -import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; -import FlipIcon from '../../assets/icons/camera/flip.svg'; -import SaveIcon from '../../assets/icons/camera/save.svg'; -import {ScreenType} from '../../types'; -import {downloadImage, navigateToImagePicker} from '../../utils/camera'; -import {normalize, SCREEN_WIDTH} from '../../utils/layouts'; - -interface GalleryIconProps { - screenType: ScreenType; - title: string; - mostRecentPhoto: string; -} - -/* - * Displays the most recent photo in the user's gallery - * On click, navigates to the image picker - */ -export const GalleryIcon: React.FC = ({ - screenType, - title, - mostRecentPhoto, -}) => { - const navigation = useNavigation(); - return ( - navigateToImagePicker(navigation, screenType, title)} - style={styles.saveButton}> - - Gallery - - ); -}; - -interface FlipButtonProps { - setCameraType: Dispatch>; - cameraType: keyof CameraType; -} - -/* - * Toggles between back camera and front camera - * Appears only when user has not taken a picture yet - * Once user takes a picture, this button disappears to reveal the save button - */ -export const FlipButton: React.FC = ({ - setCameraType, - cameraType, -}) => ( - setCameraType(cameraType === 'front' ? 'back' : 'front')} - style={styles.saveButton}> - - Flip - -); - -interface FlashButtonProps { - flashMode: keyof FlashMode; - setFlashMode: Dispatch>; -} - -/* - * Toggles between flash on/off modes - */ -export const FlashButton: React.FC = ({ - flashMode, - setFlashMode, -}) => ( - setFlashMode(flashMode === 'on' ? 'off' : 'on')} - style={styles.flashButtonContainer}> - {flashMode === 'on' ? ( - - ) : ( - - )} - Flash - -); - -interface SaveButtonProps { - capturedImageURI: string; -} - -/* - * Appears when a picture has been taken, - * On click, saves the captured image to "Recents" album on device gallery - */ -export const SaveButton: React.FC = ({capturedImageURI}) => ( - { - downloadImage(capturedImageURI); - }} - style={[styles.saveButton]}> - - Save - -); - -const styles = StyleSheet.create({ - saveButton: { - zIndex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - width: (SCREEN_WIDTH - 100) / 2, - }, - saveButtonLabel: { - color: 'white', - fontWeight: '700', - fontSize: normalize(12), - lineHeight: normalize(14.32), - marginTop: 5, - zIndex: 999, - }, - flashButtonContainer: { - position: 'absolute', - backgroundColor: '#808080', - opacity: 0.25, - zIndex: 1, - top: normalize(50), - right: 0, - marginRight: normalize(18), - height: 86, - width: 49, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - borderRadius: 30, - }, - galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5}, - flashIcon: {zIndex: 2}, -}); diff --git a/src/components/camera/index.ts b/src/components/camera/index.ts index 428d0fe8..d33d1e4a 100644 --- a/src/components/camera/index.ts +++ b/src/components/camera/index.ts @@ -1 +1,4 @@ -export * from './buttons'; +export {default as GalleryIcon} from './GalleryIcon'; +export {default as FlashButton} from './FlashButton'; +export {default as FlipButton} from './FlipButton'; +export {default as SaveButton} from './SaveButton'; diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx new file mode 100644 index 00000000..e810ffda --- /dev/null +++ b/src/components/camera/styles.tsx @@ -0,0 +1,37 @@ +import {StyleSheet} from 'react-native'; +import {normalize, SCREEN_WIDTH} from '../../utils/layouts'; + +export const styles = StyleSheet.create({ + saveButton: { + zIndex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: (SCREEN_WIDTH - 100) / 2, + }, + saveButtonLabel: { + color: 'white', + fontWeight: '700', + fontSize: normalize(12), + lineHeight: normalize(14.32), + marginTop: 5, + zIndex: 999, + }, + flashButtonContainer: { + position: 'absolute', + backgroundColor: '#808080', + opacity: 0.25, + zIndex: 1, + top: normalize(50), + right: 0, + marginRight: normalize(18), + height: 86, + width: 49, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 30, + }, + galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5}, + flashIcon: {zIndex: 2}, +}); -- cgit v1.2.3-70-g09d2 From f6fdd5d913c29855644f226d09d6cba60faf6e21 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Jun 2021 16:32:19 -0400 Subject: Add error handling --- src/components/camera/GalleryIcon.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx index 19a63a9a..ab226323 100644 --- a/src/components/camera/GalleryIcon.tsx +++ b/src/components/camera/GalleryIcon.tsx @@ -25,12 +25,14 @@ export const GalleryIcon: React.FC = ({ navigateToImagePicker(navigation, screenType, title)} style={styles.saveButton}> - + {mostRecentPhoto !== '' && ( + + )} Gallery ); -- cgit v1.2.3-70-g09d2 From 9d30c0c211e6b0b1b87e5de93a043e6e9f06beb3 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Jun 2021 16:44:41 -0400 Subject: Cleanup code, Fix gallery icon bug --- src/components/camera/GalleryIcon.tsx | 12 +++++++----- src/components/camera/styles.tsx | 20 ++++++++++++++++++-- src/screens/moments/CameraScreen.tsx | 9 +++++---- 3 files changed, 30 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx index ab226323..c49ace7d 100644 --- a/src/components/camera/GalleryIcon.tsx +++ b/src/components/camera/GalleryIcon.tsx @@ -1,6 +1,6 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {Image, Text, TouchableOpacity} from 'react-native'; +import {Image, Text, TouchableOpacity, View} from 'react-native'; import {ScreenType} from '../../types'; import {navigateToImagePicker} from '../../utils/camera'; import {styles} from './styles'; @@ -8,7 +8,7 @@ import {styles} from './styles'; interface GalleryIconProps { screenType: ScreenType; title: string; - mostRecentPhoto: string; + mostRecentPhotoUri: string; } /* @@ -18,20 +18,22 @@ interface GalleryIconProps { export const GalleryIcon: React.FC = ({ screenType, title, - mostRecentPhoto, + mostRecentPhotoUri, }) => { const navigation = useNavigation(); return ( navigateToImagePicker(navigation, screenType, title)} style={styles.saveButton}> - {mostRecentPhoto !== '' && ( + {mostRecentPhotoUri !== '' ? ( + ) : ( + )} Gallery diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx index e810ffda..33b47cc4 100644 --- a/src/components/camera/styles.tsx +++ b/src/components/camera/styles.tsx @@ -32,6 +32,22 @@ export const styles = StyleSheet.create({ alignItems: 'center', borderRadius: 30, }, - galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5}, - flashIcon: {zIndex: 2}, + galleryIcon: { + borderWidth: 2, + borderColor: 'white', + borderRadius: 5, + width: 40, + height: 40, + }, + galleryIconEmpty: { + borderWidth: 2, + borderColor: 'white', + borderRadius: 5, + width: 40, + height: 40, + backgroundColor: 'grey', + }, + flashIcon: { + zIndex: 2, + }, }); diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 8a88d95e..c6ed1116 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -58,9 +58,10 @@ const CameraScreen: React.FC = ({route, navigation}) => { useEffect(() => { CameraRoll.getPhotos({first: 1}) .then((lastPhoto) => { - lastPhoto.edges.forEach((edge) => - setMostRecentPhoto(edge.node.image.uri), - ); + if (lastPhoto.edges.length > 0) { + const image = lastPhoto.edges[0].node.image; + setMostRecentPhoto(image.uri); + } }) .catch((_err) => console.log('Unable to fetch preview photo for gallery'), @@ -133,7 +134,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { /> ) : ( -- 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') 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') 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