[#11] feat: implement camera

dsc-sookmyung · Feb 20, 2022 · bc75380 · bc75380
1 parent 100ee32
commit bc75380
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 6 deletions.
diff --git 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() {
       <NavigationContainer>
         <Stack.Navigator 
           initialRouteName="Login"
-          screenOptions={{
-            contentStyle: { backgroundColor: '#fff' }
-          }}
         >
           <Stack.Screen 
             name="Login" 
@@ -38,8 +36,12 @@ export default function App() {
             component={HomeScreen}
             options={{headerShown: false}}
           />
-        </Stack.Navigator>
-      </NavigationContainer>
+          <Stack.Screen
+            name="Translate"
+            component={TranslateScreen}
+          />
+          </Stack.Navigator>
+        </NavigationContainer>
     </PaperProvider>
   );
 }
diff --git 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
@@ -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<boolean>(false);
+	const [type, setType] = useState(Camera.Constants.Type.back);
+	const [camera, setCamera] = useState<any>(null);
+	const [imageUri, setImageUri] = useState("");
+
+	useEffect(() => {
+		(async () => {
+			const { status } = await Camera.requestCameraPermissionsAsync();
+			setHasPermission(status === 'granted');
+		})();
+	}, []);
+
+	if (hasPermission === null) {
+		return <View />;
+	}
+	else if (hasPermission === false) {
+		return <Text>No access to camera!</Text>
+	}
+
+	const takePicture = async () => {
+		if (camera) {
+			const data = await camera.takePictureAsync(null);
+			console.log(data.uri);
+			setImageUri(data.uri);
+		}
+	};
+
+	const retakePicture = () => {
+		setImageUri("");
+	}
+
+	return (
+		<View style={styles.container}>
+			{imageUri ? (
+				<>
+				<ImageBackground style={styles.camera} resizeMode="cover" source={{ uri: imageUri }} />
+				<View style={styles.buttonContainer}>
+					<TouchableOpacity style={styles.captureButton} onPress={retakePicture}>
+						<Ionicons name="refresh" size={64} color="white" />
+					</TouchableOpacity>
+				</View>
+				</>
+			) : (
+				<>
+				<Camera style={styles.camera} type={type} ref={(ref) => setCamera(ref)}>
+					<View style={styles.cameraContainer}>
+							<TouchableOpacity
+								style={styles.button}
+								onPress={() => {
+								setType(
+									type === Camera.Constants.Type.back
+									? Camera.Constants.Type.front
+									: Camera.Constants.Type.back
+								);
+								}}>
+								<Ionicons name="camera-reverse-outline" size={32} color="white" />
+						</TouchableOpacity>
+					</View>
+				</Camera>
+				<View style={styles.buttonContainer}>
+					<TouchableOpacity style={styles.captureButton} onPress={takePicture}>
+							<Ionicons name="camera-outline" size={64} color="white" />
+					</TouchableOpacity>
+				</View>
+				</>
+			)}
+		</View>
+  );
+}
+
+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
+	}
+}); 
diff --git a/react-native/types.ts 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<RootStackParamList, 'Home'>;
+
+export type TextInput = {
+	errorText: string;
+	description: string;
+}
diff --git 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/[email protected]":
   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: