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/screens/moments/CameraScreen.tsx | 325 +++++++++++++++++++++++++++++++++++ src/screens/moments/index.ts | 1 + 2 files changed, 326 insertions(+) create mode 100644 src/screens/moments/CameraScreen.tsx (limited to 'src/screens') 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/screens') 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/screens') 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 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/screens') 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