From 8daa2641dc91be56ee63775d6e93d2352bd91020 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Wed, 29 Apr 2020 11:34:52 +0200 Subject: [PATCH] Use react native camera instead of expo one --- android/app/build.gradle | 3 + .../generated/BasePackageList.java | 2 - package.json | 4 +- src/screens/Home/ScannerScreen.js | 162 +++++------------- 4 files changed, 46 insertions(+), 125 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index a3a13d8..f2abdae 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -137,6 +137,7 @@ android { targetSdkVersion rootProject.ext.targetSdkVersion versionCode 16 versionName "2.0.0" + missingDimensionStrategy 'react-native-camera', 'general' } splits { abi { @@ -194,6 +195,8 @@ dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.facebook.react:react-native:+" // From node_modules addUnimodulesDependencies([exclude: [ + 'expo-camera', + 'expo-barcode-scanner', 'expo-error-recovery', 'expo-image-loader', 'expo-keep-awake', diff --git a/android/app/src/main/java/fr/amicaleinsat/application/generated/BasePackageList.java b/android/app/src/main/java/fr/amicaleinsat/application/generated/BasePackageList.java index 366f99f..e899302 100644 --- a/android/app/src/main/java/fr/amicaleinsat/application/generated/BasePackageList.java +++ b/android/app/src/main/java/fr/amicaleinsat/application/generated/BasePackageList.java @@ -7,8 +7,6 @@ import org.unimodules.core.interfaces.Package; public class BasePackageList { public List getPackageList() { return Arrays.asList( - new expo.modules.barcodescanner.BarCodeScannerPackage(), - new expo.modules.camera.CameraPackage(), new expo.modules.constants.ConstantsPackage(), new expo.modules.filesystem.FileSystemPackage(), new expo.modules.font.FontLoaderPackage(), diff --git a/package.json b/package.json index f4a3134..19b0c1b 100644 --- a/package.json +++ b/package.json @@ -18,14 +18,13 @@ ] }, "dependencies": { + "@nartc/react-native-barcode-mask": "^1.1.9", "@react-native-community/masked-view": "0.1.6", "@react-navigation/bottom-tabs": "^5.1.1", "@react-navigation/drawer": "^5.1.1", "@react-navigation/native": "^5.0.9", "@react-navigation/stack": "^5.1.1", "expo": "^37.0.0", - "expo-barcode-scanner": "~8.1.0", - "expo-camera": "latest", "i18n-js": "^3.3.0", "react": "~16.9.0", "react-dom": "16.9.0", @@ -35,6 +34,7 @@ "react-native-appearance": "~0.3.3", "react-native-autolink": "^3.0.0", "react-native-calendars": "^1.260.0", + "react-native-camera": "^3.23.1", "react-native-collapsible": "^1.5.2", "react-native-gesture-handler": "~1.6.0", "react-native-image-modal": "^1.0.6", diff --git a/src/screens/Home/ScannerScreen.js b/src/screens/Home/ScannerScreen.js index 44881ad..de1e8ae 100644 --- a/src/screens/Home/ScannerScreen.js +++ b/src/screens/Home/ScannerScreen.js @@ -1,15 +1,16 @@ // @flow import * as React from 'react'; -import {Linking, StyleSheet, View} from "react-native"; +import {Linking, Platform, StyleSheet, View} from "react-native"; import {Button, Text, withTheme} from 'react-native-paper'; -import {BarCodeScanner} from "expo-barcode-scanner"; -import {Camera} from 'expo-camera'; +import {RNCamera} from 'react-native-camera'; +import {BarcodeMask} from '@nartc/react-native-barcode-mask'; import URLHandler from "../../utils/URLHandler"; import AlertDialog from "../../components/Dialogs/AlertDialog"; import i18n from 'i18n-js'; import CustomTabBar from "../../components/Tabbar/CustomTabBar"; import LoadingConfirmDialog from "../../components/Dialogs/LoadingConfirmDialog"; +import {PERMISSIONS, request, RESULTS} from 'react-native-permissions'; type Props = {}; type State = { @@ -40,9 +41,14 @@ class ScannerScreen extends React.Component { this.requestPermissions(); } - requestPermissions = () => Camera.requestPermissionsAsync().then(this.updatePermissionStatus); + requestPermissions = () => { + if (Platform.OS === 'android') + request(PERMISSIONS.ANDROID.CAMERA).then(this.updatePermissionStatus) + else + request(PERMISSIONS.IOS.CAMERA).then(this.updatePermissionStatus) + }; - updatePermissionStatus = ({status}) => this.setState({hasPermission: status === "granted"}); + updatePermissionStatus = (result) => this.setState({hasPermission: result === RESULTS.GRANTED}); handleCodeScanned = ({type, data}) => { if (!URLHandler.isUrlValid(data)) @@ -71,36 +77,6 @@ class ScannerScreen extends React.Component { } - getOverlay() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - ); - } - showHelpDialog = () => { this.setState({ dialogVisible: true, @@ -133,19 +109,22 @@ class ScannerScreen extends React.Component { getScanner() { return ( - - - {this.getOverlay()} - - + + + ); } @@ -153,22 +132,20 @@ class ScannerScreen extends React.Component { return ( - {this.state.hasPermission - ? this.getScanner() - : this.getPermissionScreen() - } - - - + {this.state.hasPermission + ? this.getScanner() + : this.getPermissionScreen() + } + { } } -const borderOffset = '10%'; - -const overlayBoxStyle = { - position: 'absolute', - width: 25, - height: 25, -}; - -const overlayLineStyle = { - position: 'absolute', - backgroundColor: "#fff", - borderRadius: 2, -}; - -const overlayHorizontalLineStyle = { - ...overlayLineStyle, - width: '100%', - height: 5, -}; - -const overlayVerticalLineStyle = { - ...overlayLineStyle, - height: '100%', - width: 5, -}; - -const overlayBackground = { - backgroundColor: "rgba(0,0,0,0.47)", - position: "absolute", -}; - const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, - cameraContainer: { - marginTop: 'auto', - marginBottom: 'auto', - aspectRatio: 1, - width: '100%', - }, button: { position: 'absolute', - bottom: 5, + bottom: 20, width: '80%', left: '10%' }, - overlayTopLeft: { - ...overlayBoxStyle, - top: borderOffset, - left: borderOffset, - }, - overlayTopRight: { - ...overlayBoxStyle, - top: borderOffset, - right: borderOffset, - }, - overlayBottomLeft: { - ...overlayBoxStyle, - bottom: borderOffset, - left: borderOffset, - }, - overlayBottomRight: { - ...overlayBoxStyle, - bottom: borderOffset, - right: borderOffset, - }, }); export default withTheme(ScannerScreen);