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, }, });