├── .expo-shared
    └── assets.json
├── .gitignore
├── App.tsx
├── README.md
├── app.json
├── assets
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── example.tsx
├── package.json
├── tsconfig.json
└── yarn.lock


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | 
12 | # macOS
13 | .DS_Store
14 | 


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
  1 | import {StatusBar} from 'expo-status-bar'
  2 | import React from 'react'
  3 | import {StyleSheet, Text, View, TouchableOpacity, Alert, ImageBackground, Image} from 'react-native'
  4 | import {Camera} from 'expo-camera'
  5 | let camera: Camera
  6 | export default function App() {
  7 |   const [startCamera, setStartCamera] = React.useState(false)
  8 |   const [previewVisible, setPreviewVisible] = React.useState(false)
  9 |   const [capturedImage, setCapturedImage] = React.useState<any>(null)
 10 |   const [cameraType, setCameraType] = React.useState(Camera.Constants.Type.back)
 11 |   const [flashMode, setFlashMode] = React.useState('off')
 12 | 
 13 |   const __startCamera = async () => {
 14 |     const {status} = await Camera.requestPermissionsAsync()
 15 |     console.log(status)
 16 |     if (status === 'granted') {
 17 |       setStartCamera(true)
 18 |     } else {
 19 |       Alert.alert('Access denied')
 20 |     }
 21 |   }
 22 |   const __takePicture = async () => {
 23 |     const photo: any = await camera.takePictureAsync()
 24 |     console.log(photo)
 25 |     setPreviewVisible(true)
 26 |     //setStartCamera(false)
 27 |     setCapturedImage(photo)
 28 |   }
 29 |   const __savePhoto = () => {}
 30 |   const __retakePicture = () => {
 31 |     setCapturedImage(null)
 32 |     setPreviewVisible(false)
 33 |     __startCamera()
 34 |   }
 35 |   const __handleFlashMode = () => {
 36 |     if (flashMode === 'on') {
 37 |       setFlashMode('off')
 38 |     } else if (flashMode === 'off') {
 39 |       setFlashMode('on')
 40 |     } else {
 41 |       setFlashMode('auto')
 42 |     }
 43 |   }
 44 |   const __switchCamera = () => {
 45 |     if (cameraType === 'back') {
 46 |       setCameraType('front')
 47 |     } else {
 48 |       setCameraType('back')
 49 |     }
 50 |   }
 51 |   return (
 52 |     <View style={styles.container}>
 53 |       {startCamera ? (
 54 |         <View
 55 |           style={{
 56 |             flex: 1,
 57 |             width: '100%'
 58 |           }}
 59 |         >
 60 |           {previewVisible && capturedImage ? (
 61 |             <CameraPreview photo={capturedImage} savePhoto={__savePhoto} retakePicture={__retakePicture} />
 62 |           ) : (
 63 |             <Camera
 64 |               type={cameraType}
 65 |               flashMode={flashMode}
 66 |               style={{flex: 1}}
 67 |               ref={(r) => {
 68 |                 camera = r
 69 |               }}
 70 |             >
 71 |               <View
 72 |                 style={{
 73 |                   flex: 1,
 74 |                   width: '100%',
 75 |                   backgroundColor: 'transparent',
 76 |                   flexDirection: 'row'
 77 |                 }}
 78 |               >
 79 |                 <View
 80 |                   style={{
 81 |                     position: 'absolute',
 82 |                     left: '5%',
 83 |                     top: '10%',
 84 |                     flexDirection: 'column',
 85 |                     justifyContent: 'space-between'
 86 |                   }}
 87 |                 >
 88 |                   <TouchableOpacity
 89 |                     onPress={__handleFlashMode}
 90 |                     style={{
 91 |                       backgroundColor: flashMode === 'off' ? '#000' : '#fff',
 92 |                       borderRadius: '50%',
 93 |                       height: 25,
 94 |                       width: 25
 95 |                     }}
 96 |                   >
 97 |                     <Text
 98 |                       style={{
 99 |                         fontSize: 20
100 |                       }}
101 |                     >
102 |                       ⚡️
103 |                     </Text>
104 |                   </TouchableOpacity>
105 |                   <TouchableOpacity
106 |                     onPress={__switchCamera}
107 |                     style={{
108 |                       marginTop: 20,
109 |                       borderRadius: '50%',
110 |                       height: 25,
111 |                       width: 25
112 |                     }}
113 |                   >
114 |                     <Text
115 |                       style={{
116 |                         fontSize: 20
117 |                       }}
118 |                     >
119 |                       {cameraType === 'front' ? '🤳' : '📷'}
120 |                     </Text>
121 |                   </TouchableOpacity>
122 |                 </View>
123 |                 <View
124 |                   style={{
125 |                     position: 'absolute',
126 |                     bottom: 0,
127 |                     flexDirection: 'row',
128 |                     flex: 1,
129 |                     width: '100%',
130 |                     padding: 20,
131 |                     justifyContent: 'space-between'
132 |                   }}
133 |                 >
134 |                   <View
135 |                     style={{
136 |                       alignSelf: 'center',
137 |                       flex: 1,
138 |                       alignItems: 'center'
139 |                     }}
140 |                   >
141 |                     <TouchableOpacity
142 |                       onPress={__takePicture}
143 |                       style={{
144 |                         width: 70,
145 |                         height: 70,
146 |                         bottom: 0,
147 |                         borderRadius: 50,
148 |                         backgroundColor: '#fff'
149 |                       }}
150 |                     />
151 |                   </View>
152 |                 </View>
153 |               </View>
154 |             </Camera>
155 |           )}
156 |         </View>
157 |       ) : (
158 |         <View
159 |           style={{
160 |             flex: 1,
161 |             backgroundColor: '#fff',
162 |             justifyContent: 'center',
163 |             alignItems: 'center'
164 |           }}
165 |         >
166 |           <TouchableOpacity
167 |             onPress={__startCamera}
168 |             style={{
169 |               width: 130,
170 |               borderRadius: 4,
171 |               backgroundColor: '#14274e',
172 |               flexDirection: 'row',
173 |               justifyContent: 'center',
174 |               alignItems: 'center',
175 |               height: 40
176 |             }}
177 |           >
178 |             <Text
179 |               style={{
180 |                 color: '#fff',
181 |                 fontWeight: 'bold',
182 |                 textAlign: 'center'
183 |               }}
184 |             >
185 |               Take picture
186 |             </Text>
187 |           </TouchableOpacity>
188 |         </View>
189 |       )}
190 | 
191 |       <StatusBar style="auto" />
192 |     </View>
193 |   )
194 | }
195 | 
196 | const styles = StyleSheet.create({
197 |   container: {
198 |     flex: 1,
199 |     backgroundColor: '#fff',
200 |     alignItems: 'center',
201 |     justifyContent: 'center'
202 |   }
203 | })
204 | 
205 | const CameraPreview = ({photo, retakePicture, savePhoto}: any) => {
206 |   console.log('sdsfds', photo)
207 |   return (
208 |     <View
209 |       style={{
210 |         backgroundColor: 'transparent',
211 |         flex: 1,
212 |         width: '100%',
213 |         height: '100%'
214 |       }}
215 |     >
216 |       <ImageBackground
217 |         source={{uri: photo && photo.uri}}
218 |         style={{
219 |           flex: 1
220 |         }}
221 |       >
222 |         <View
223 |           style={{
224 |             flex: 1,
225 |             flexDirection: 'column',
226 |             padding: 15,
227 |             justifyContent: 'flex-end'
228 |           }}
229 |         >
230 |           <View
231 |             style={{
232 |               flexDirection: 'row',
233 |               justifyContent: 'space-between'
234 |             }}
235 |           >
236 |             <TouchableOpacity
237 |               onPress={retakePicture}
238 |               style={{
239 |                 width: 130,
240 |                 height: 40,
241 | 
242 |                 alignItems: 'center',
243 |                 borderRadius: 4
244 |               }}
245 |             >
246 |               <Text
247 |                 style={{
248 |                   color: '#fff',
249 |                   fontSize: 20
250 |                 }}
251 |               >
252 |                 Re-take
253 |               </Text>
254 |             </TouchableOpacity>
255 |             <TouchableOpacity
256 |               onPress={savePhoto}
257 |               style={{
258 |                 width: 130,
259 |                 height: 40,
260 | 
261 |                 alignItems: 'center',
262 |                 borderRadius: 4
263 |               }}
264 |             >
265 |               <Text
266 |                 style={{
267 |                   color: '#fff',
268 |                   fontSize: 20
269 |                 }}
270 |               >
271 |                 save photo
272 |               </Text>
273 |             </TouchableOpacity>
274 |           </View>
275 |         </View>
276 |       </ImageBackground>
277 |     </View>
278 |   )
279 | }
280 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 📷expo-camera-tutorial
2 | 
3 | 📌 This repo contain the source code of all the examples I used in [Build Camera app with expo with React Native](https://www.freecodecamp.org/news/how-to-create-a-camera-app-with-expo-and-react-native/) article.
4 | 
5 | 
6 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "camera-app",
 4 |     "slug": "camera-app",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "web": {
23 |       "favicon": "./assets/favicon.png"
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hayanisaid/expo-camera-tutorial/3fd57c2a927806a598d5b2aa13d56d5d377c0337/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hayanisaid/expo-camera-tutorial/3fd57c2a927806a598d5b2aa13d56d5d377c0337/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hayanisaid/expo-camera-tutorial/3fd57c2a927806a598d5b2aa13d56d5d377c0337/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/example.tsx:
--------------------------------------------------------------------------------
  1 | import {StatusBar} from 'expo-status-bar'
  2 | import React, {useState, useEffect} from 'react'
  3 | import {StyleSheet, Text, View, TouchableOpacity, ImageBackground} from 'react-native'
  4 | import {Camera} from 'expo-camera'
  5 | const tag = '[CAMERA]'
  6 | export default function App() {
  7 |   const [hasPermission, setHasPermission] = useState<any>(null)
  8 |   const [previewVisible, setPreviewVisible] = useState(false)
  9 |   const [capturedImage, setCapturedImage] = useState<any>(null)
 10 |   const [startOver, setStartOver] = useState(true)
 11 |   const [type, setType] = useState(Camera.Constants.Type.back)
 12 |   let camera: Camera
 13 |   useEffect(() => {
 14 |     ;(async () => {
 15 |       const {status} = await Camera.requestPermissionsAsync()
 16 |       setHasPermission(status === 'granted')
 17 |     })()
 18 |   }, [])
 19 |   const __closeCamera = () => {
 20 |     setStartOver(true)
 21 |   }
 22 |   const __takePicture = async () => {
 23 |     if (!camera) return
 24 |     const photo = await camera.takePictureAsync()
 25 |     console.log(photo)
 26 |     setPreviewVisible(true)
 27 |     setCapturedImage(photo)
 28 |   }
 29 |   const __savePhoto = async () => {}
 30 |   return (
 31 |     <View
 32 |       style={{
 33 |         flex: 1
 34 |       }}
 35 |     >
 36 |       {startOver ? (
 37 |         <View
 38 |           style={{
 39 |             flex: 1,
 40 |             backgroundColor: '#fff',
 41 |             justifyContent: 'center',
 42 |             alignItems: 'center'
 43 |           }}
 44 |         >
 45 |           <TouchableOpacity
 46 |             onPress={() => setStartOver(false)}
 47 |             style={{
 48 |               width: 130,
 49 |               borderRadius: 4,
 50 |               backgroundColor: '#14274e',
 51 |               flexDirection: 'row',
 52 |               justifyContent: 'center',
 53 |               alignItems: 'center',
 54 |               height: 40
 55 |             }}
 56 |           >
 57 |             <Text
 58 |               style={{
 59 |                 color: '#fff',
 60 |                 fontWeight: 'bold',
 61 |                 textAlign: 'center'
 62 |               }}
 63 |             >
 64 |               Take picture
 65 |             </Text>
 66 |           </TouchableOpacity>
 67 |         </View>
 68 |       ) : (
 69 |         <View
 70 |           style={{
 71 |             flex: 1
 72 |           }}
 73 |         >
 74 |           {previewVisible ? (
 75 |             <ImageBackground
 76 |               source={{uri: capturedImage && capturedImage.uri}}
 77 |               style={{
 78 |                 flex: 1
 79 |               }}
 80 |             >
 81 |               <View
 82 |                 style={{
 83 |                   flex: 1,
 84 |                   flexDirection: 'column',
 85 |                   padding: 15,
 86 |                   justifyContent: 'flex-end'
 87 |                 }}
 88 |               >
 89 |                 <View
 90 |                   style={{
 91 |                     flexDirection: 'row',
 92 |                     justifyContent: 'space-between'
 93 |                   }}
 94 |                 >
 95 |                   <TouchableOpacity
 96 |                     onPress={() => setPreviewVisible(false)}
 97 |                     style={{
 98 |                       width: 130,
 99 |                       height: 40,
100 | 
101 |                       alignItems: 'center',
102 |                       borderRadius: 4
103 |                     }}
104 |                   >
105 |                     <Text
106 |                       style={{
107 |                         color: '#fff',
108 |                         fontSize: 20
109 |                       }}
110 |                     >
111 |                       Re-take
112 |                     </Text>
113 |                   </TouchableOpacity>
114 |                   <TouchableOpacity
115 |                     onPress={__savePhoto}
116 |                     style={{
117 |                       width: 130,
118 |                       height: 40,
119 | 
120 |                       alignItems: 'center',
121 |                       borderRadius: 4
122 |                     }}
123 |                   >
124 |                     <Text
125 |                       style={{
126 |                         color: '#fff',
127 |                         fontSize: 20
128 |                       }}
129 |                     >
130 |                       save photo
131 |                     </Text>
132 |                   </TouchableOpacity>
133 |                 </View>
134 |               </View>
135 |             </ImageBackground>
136 |           ) : (
137 |             <Camera
138 |               style={{flex: 1}}
139 |               type={type}
140 |               ref={(r) => {
141 |                 camera = r
142 |               }}
143 |             >
144 |               <View
145 |                 style={{
146 |                   flex: 1,
147 |                   backgroundColor: 'transparent',
148 |                   flexDirection: 'row'
149 |                 }}
150 |               >
151 |                 <View
152 |                   style={{
153 |                     position: 'absolute',
154 |                     top: '5%',
155 |                     right: '5%'
156 |                   }}
157 |                 >
158 |                   <TouchableOpacity onPress={__closeCamera}>
159 |                     <Text
160 |                       style={{
161 |                         color: '#fff',
162 |                         fontSize: 20
163 |                       }}
164 |                     >
165 |                       X
166 |                     </Text>
167 |                   </TouchableOpacity>
168 |                 </View>
169 |                 <TouchableOpacity
170 |                   style={{
171 |                     position: 'absolute',
172 |                     top: '5%',
173 |                     left: '5%'
174 |                   }}
175 |                   onPress={() => {
176 |                     setType(type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back)
177 |                   }}
178 |                 >
179 |                   <Text style={{fontSize: 18, marginBottom: 10, color: 'white'}}> Flip </Text>
180 |                 </TouchableOpacity>
181 |                 <View
182 |                   style={{
183 |                     position: 'absolute',
184 |                     bottom: 0,
185 |                     flexDirection: 'row',
186 |                     flex: 1,
187 |                     width: '100%',
188 |                     padding: 20,
189 |                     justifyContent: 'space-between'
190 |                   }}
191 |                 >
192 |                   <View
193 |                     style={{
194 |                       alignSelf: 'center',
195 |                       flex: 1,
196 |                       alignItems: 'center'
197 |                     }}
198 |                   >
199 |                     <TouchableOpacity
200 |                       onPress={__takePicture}
201 |                       style={{
202 |                         width: 70,
203 |                         height: 70,
204 |                         bottom: 0,
205 |                         borderRadius: 50,
206 |                         backgroundColor: '#fff'
207 |                       }}
208 |                     />
209 |                   </View>
210 |                 </View>
211 |               </View>
212 |             </Camera>
213 |           )}
214 |         </View>
215 |       )}
216 |     </View>
217 |   )
218 | }
219 | 
220 | const styles = StyleSheet.create({
221 |   container: {
222 |     flex: 1,
223 |     backgroundColor: '#000',
224 |     alignItems: 'center',
225 |     justifyContent: 'center'
226 |   }
227 | })
228 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "expo": "~39.0.2",
12 |     "expo-camera": "~9.0.0",
13 |     "expo-status-bar": "~1.0.2",
14 |     "react": "16.13.1",
15 |     "react-dom": "16.13.1",
16 |     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
17 |     "react-native-web": "~0.13.12"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "~7.9.0",
21 |     "@types/react": "~16.9.35",
22 |     "@types/react-dom": "~16.9.8",
23 |     "@types/react-native": "~0.63.2",
24 |     "typescript": "~3.9.5"
25 |   },
26 |   "private": true
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "jsx": "react-native",
 5 |     "lib": ["dom", "esnext"],
 6 |     "moduleResolution": "node",
 7 |     "noEmit": true,
 8 |     "skipLibCheck": true,
 9 |     "resolveJsonModule": true,
10 |     "strict": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------