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 + 2 files changed, 150 insertions(+) create mode 100644 src/components/camera/buttons.tsx create mode 100644 src/components/camera/index.ts (limited to 'src/components/camera') 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'; -- 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/components/camera') 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 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/components/camera') 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/components/camera') 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/components/camera') 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