From bc753809f04687f0422a2fc3e5e96c0250e43a9c Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Mon, 21 Feb 2022 02:08:03 +0900 Subject: [PATCH] [#11] feat: implement camera --- react-native/App.tsx | 12 +-- react-native/package.json | 1 + react-native/screens/TranslateScreen.tsx | 107 +++++++++++++++++++++++ react-native/types.ts | 18 ++++ react-native/yarn.lock | 23 ++++- 5 files changed, 155 insertions(+), 6 deletions(-) create mode 100644 react-native/screens/TranslateScreen.tsx create mode 100644 react-native/types.ts diff --git a/react-native/App.tsx b/react-native/App.tsx index b65a5a5..6c2b273 100644 --- a/react-native/App.tsx +++ b/react-native/App.tsx @@ -7,6 +7,7 @@ import LoginScreen from './screens/LoginScreen'; import JoinScreen from './screens/JoinScreen'; import ForgotPasswordScreen from './screens/ForgotPasswordScreen'; import HomeScreen from './screens/HomeScreen'; +import TranslateScreen from './screens/TranslateScreen'; const Stack = createNativeStackNavigator(); @@ -16,9 +17,6 @@ export default function App() { - - + + + ); } diff --git a/react-native/package.json b/react-native/package.json index 26773a6..c098499 100644 --- a/react-native/package.json +++ b/react-native/package.json @@ -15,6 +15,7 @@ "@react-navigation/native-stack": "^6.5.0", "expo": "~44.0.0", "expo-app-loading": "~1.3.0", + "expo-camera": "^12.1.2", "expo-font": "^10.0.5", "expo-status-bar": "~1.2.0", "react": "17.0.1", diff --git a/react-native/screens/TranslateScreen.tsx b/react-native/screens/TranslateScreen.tsx new file mode 100644 index 0000000..f024ec1 --- /dev/null +++ b/react-native/screens/TranslateScreen.tsx @@ -0,0 +1,107 @@ +import React, { useState, useEffect } from 'react'; +import { StyleSheet, Text, View, TouchableOpacity, ImageBackground } from 'react-native'; +import { Camera } from 'expo-camera'; +import { Ionicons } from '@expo/vector-icons'; +import { theme } from '../core/theme'; + +export default function TranslateScreen() { + const [hasPermission, setHasPermission] = useState(false); + const [type, setType] = useState(Camera.Constants.Type.back); + const [camera, setCamera] = useState(null); + const [imageUri, setImageUri] = useState(""); + + useEffect(() => { + (async () => { + const { status } = await Camera.requestCameraPermissionsAsync(); + setHasPermission(status === 'granted'); + })(); + }, []); + + if (hasPermission === null) { + return ; + } + else if (hasPermission === false) { + return No access to camera! + } + + const takePicture = async () => { + if (camera) { + const data = await camera.takePictureAsync(null); + console.log(data.uri); + setImageUri(data.uri); + } + }; + + const retakePicture = () => { + setImageUri(""); + } + + return ( + + {imageUri ? ( + <> + + + + + + + + ) : ( + <> + setCamera(ref)}> + + { + setType( + type === Camera.Constants.Type.back + ? Camera.Constants.Type.front + : Camera.Constants.Type.back + ); + }}> + + + + + + + + + + + )} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + camera: { + flex: 4, + }, + cameraContainer: { + flex: 1, + backgroundColor: 'transparent', + flexDirection: 'row', + margin: 20, + }, + button: { + flex: 0.1, + alignSelf: 'flex-end', + alignItems: 'center', + }, + buttonContainer: { + flex: 1, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + captureButton: { + backgroundColor: theme.colors.primary, + borderRadius: 48, + padding: 8 + } +}); \ No newline at end of file diff --git a/react-native/types.ts b/react-native/types.ts new file mode 100644 index 0000000..4d3a1b8 --- /dev/null +++ b/react-native/types.ts @@ -0,0 +1,18 @@ +import type { NativeStackScreenProps } from '@react-navigation/native-stack'; + +export type RootStackParamList = { + Login: undefined; + Join: undefined; + ForgotPassword: undefined; + Home: undefined; + Translate: undefined; + Database: undefined; + Calendar: undefined; +}; + +export type Navigation = NativeStackScreenProps; + +export type TextInput = { + errorText: string; + description: string; +} \ No newline at end of file diff --git a/react-native/yarn.lock b/react-native/yarn.lock index 0aa6b6c..e7828dc 100644 --- a/react-native/yarn.lock +++ b/react-native/yarn.lock @@ -1328,6 +1328,13 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" +"@koale/useworker@^4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@koale/useworker/-/useworker-4.0.2.tgz#cb540a2581cd6025307c3ca6685bc60748773e58" + integrity sha512-xPIPADtom8/3/4FLNj7MvNcBM/Z2FleH85Fdx2O869eoKW8+PoEgtSVvoxWjCWMA46Sm9A5/R1TyzNGc+yM0wg== + dependencies: + dequal "^1.0.0" + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz" @@ -2524,6 +2531,11 @@ depd@~1.1.2: resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz" integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak= +dequal@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-1.0.1.tgz#dbbf9795ec626e9da8bd68782f4add1d23700d8b" + integrity sha512-Fx8jxibzkJX2aJgyfSdLhr9tlRoTnHKrRJuu2XHlAgKioN2j19/Bcbe0d4mFXYZ3+wpE2KVobUVTfDutcD17xQ== + destroy@~1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz" @@ -2684,6 +2696,15 @@ expo-asset@~8.4.6: path-browserify "^1.0.0" url-parse "^1.4.4" +expo-camera@^12.1.2: + version "12.1.2" + resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-12.1.2.tgz#b549a8054ce5778fbf37a45b5d41003f36f5bb3c" + integrity sha512-Rr0Evj1V3LGiZE5/YBuuVimuU9uSTwVoqtSBsZ8QoK11+g9vnu2NgBjFMb938yjWD5tqJiXRH8lVTM2mvzSmIQ== + dependencies: + "@expo/config-plugins" "^4.0.2" + "@koale/useworker" "^4.0.2" + invariant "^2.2.4" + expo-constants@~13.0.2: version "13.0.2" resolved "https://registry.npmjs.org/expo-constants/-/expo-constants-13.0.2.tgz" @@ -4704,7 +4725,7 @@ react-native-codegen@^0.0.6: react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1: version "1.3.1" - resolved "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz" + resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010" integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg== react-native-paper@^4.11.2: