├── .expo-shared
└── assets.json
├── .gitignore
├── App.js
├── app.json
├── assets
├── adaptive-icon.png
├── favicon.png
├── icon.png
└── splash.png
├── babel.config.js
├── package-lock.json
└── package.json
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .expo/
3 | dist/
4 | npm-debug.*
5 | *.jks
6 | *.p8
7 | *.p12
8 | *.key
9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 |
13 | # macOS
14 | .DS_Store
15 |
--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | import { StatusBar } from 'expo-status-bar';
2 | import { StyleSheet, Text, View, SafeAreaView, Button, Image } from 'react-native';
3 | import { useEffect, useRef, useState } from 'react';
4 | import { Camera } from 'expo-camera';
5 | import { shareAsync } from 'expo-sharing';
6 | import * as MediaLibrary from 'expo-media-library';
7 |
8 | export default function App() {
9 | let cameraRef = useRef();
10 | const [hasCameraPermission, setHasCameraPermission] = useState();
11 | const [hasMediaLibraryPermission, setHasMediaLibraryPermission] = useState();
12 | const [photo, setPhoto] = useState();
13 |
14 | useEffect(() => {
15 | (async () => {
16 | const cameraPermission = await Camera.requestCameraPermissionsAsync();
17 | const mediaLibraryPermission = await MediaLibrary.requestPermissionsAsync();
18 | setHasCameraPermission(cameraPermission.status === "granted");
19 | setHasMediaLibraryPermission(mediaLibraryPermission.status === "granted");
20 | })();
21 | }, []);
22 |
23 | if (hasCameraPermission === undefined) {
24 | return Requesting permissions...
25 | } else if (!hasCameraPermission) {
26 | return Permission for camera not granted. Please change this in settings.
27 | }
28 |
29 | let takePic = async () => {
30 | let options = {
31 | quality: 1,
32 | base64: true,
33 | exif: false
34 | };
35 |
36 | let newPhoto = await cameraRef.current.takePictureAsync(options);
37 | setPhoto(newPhoto);
38 | };
39 |
40 | if (photo) {
41 | let sharePic = () => {
42 | shareAsync(photo.uri).then(() => {
43 | setPhoto(undefined);
44 | });
45 | };
46 |
47 | let savePhoto = () => {
48 | MediaLibrary.saveToLibraryAsync(photo.uri).then(() => {
49 | setPhoto(undefined);
50 | });
51 | };
52 |
53 | return (
54 |
55 |
56 |
57 | {hasMediaLibraryPermission ? : undefined}
58 |
60 | );
61 | }
62 |
63 | return (
64 |
65 |
66 |
67 |
68 |
69 |
70 | );
71 | }
72 |
73 | const styles = StyleSheet.create({
74 | container: {
75 | flex: 1,
76 | alignItems: 'center',
77 | justifyContent: 'center',
78 | },
79 | buttonContainer: {
80 | backgroundColor: '#fff',
81 | alignSelf: 'flex-end'
82 | },
83 | preview: {
84 | alignSelf: 'stretch',
85 | flex: 1
86 | }
87 | });
88 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "CameraAppTutorial",
4 | "slug": "CameraAppTutorial",
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 | "plugins": [
14 | [
15 | "expo-media-library",
16 | {
17 | "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
18 | "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
19 | "isAccessMediaLocationEnabled": "true"
20 | }
21 | ]
22 | ],
23 | "updates": {
24 | "fallbackToCacheTimeout": 0
25 | },
26 | "assetBundlePatterns": [
27 | "**/*"
28 | ],
29 | "ios": {
30 | "supportsTablet": true
31 | },
32 | "android": {
33 | "adaptiveIcon": {
34 | "foregroundImage": "./assets/adaptive-icon.png",
35 | "backgroundColor": "#FFFFFF"
36 | }
37 | },
38 | "web": {
39 | "favicon": "./assets/favicon.png"
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chelseafarley/CameraAppTutorial/4127ee03882151763f63722a5079596889665885/assets/adaptive-icon.png
--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chelseafarley/CameraAppTutorial/4127ee03882151763f63722a5079596889665885/assets/favicon.png
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chelseafarley/CameraAppTutorial/4127ee03882151763f63722a5079596889665885/assets/icon.png
--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chelseafarley/CameraAppTutorial/4127ee03882151763f63722a5079596889665885/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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cameraapptutorial",
3 | "version": "1.0.0",
4 | "main": "node_modules/expo/AppEntry.js",
5 | "scripts": {
6 | "start": "expo start",
7 | "android": "expo start --android",
8 | "ios": "expo start --ios",
9 | "web": "expo start --web",
10 | "eject": "expo eject"
11 | },
12 | "dependencies": {
13 | "expo": "~44.0.0",
14 | "expo-status-bar": "~1.2.0",
15 | "react": "17.0.1",
16 | "react-dom": "17.0.1",
17 | "react-native": "0.64.3",
18 | "react-native-web": "0.17.1",
19 | "expo-camera": "~12.1.2",
20 | "expo-sharing": "~10.1.0",
21 | "expo-media-library": "~14.0.0"
22 | },
23 | "devDependencies": {
24 | "@babel/core": "^7.12.9"
25 | },
26 | "private": true
27 | }
28 |
--------------------------------------------------------------------------------