1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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<GalleryIconProps> = ({
screenType,
title,
mostRecentPhoto,
}) => {
return (
<TouchableOpacity
onPress={() => navigateToImagePicker(screenType, title)}
style={styles.saveButton}>
<Image
source={{uri: mostRecentPhoto}}
width={40}
height={40}
style={{borderWidth: 2, borderColor: 'white', borderRadius: 5}}
/>
<Text style={styles.saveButtonLabel}>Gallery</Text>
</TouchableOpacity>
);
};
interface FlipButtonProps {
setCameraType: Dispatch<SetStateAction<keyof CameraType>>;
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<FlipButtonProps> = ({
setCameraType,
cameraType,
}) => (
<TouchableOpacity
onPress={() => setCameraType(cameraType === 'front' ? 'back' : 'front')}
style={styles.saveButton}>
<FlipIcon width={40} height={40} />
<Text style={styles.saveButtonLabel}>Flip</Text>
</TouchableOpacity>
);
interface FlashButtonProps {
flashMode: keyof FlashMode;
setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
}
/*
* Toggles between flash on/off modes
*/
export const FlashButton: React.FC<FlashButtonProps> = ({
flashMode,
setFlashMode,
}) => (
<TouchableOpacity
onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
style={styles.flashButtonContainer}>
{flashMode === 'on' ? (
<FlashOnIcon
height={30}
width={20}
color={'white'}
style={{zIndex: 999}}
/>
) : (
<FlashOffIcon
height={30}
width={20}
color={'white'}
style={{zIndex: 999}}
/>
)}
<Text style={styles.saveButtonLabel}>Flash</Text>
</TouchableOpacity>
);
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<SaveButtonProps> = ({capturedImageURI}) => (
<TouchableOpacity
onPress={() => {
downloadImage(capturedImageURI);
}}
style={[styles.saveButton]}>
<SaveIcon width={40} height={40} />
<Text style={styles.saveButtonLabel}>Save</Text>
</TouchableOpacity>
);
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,
},
});
|
