refactor: move take photo and select function to scan page

Author: Allen-Dynamsoft

BarcodeReaderSimpleSample/App.js

@@ -1,75 +1,9 @@
-import React, {useState} from 'react';
-import {
-  Button,
-  Modal,
-  PermissionsAndroid,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import React from 'react';
+import {Button, StyleSheet, View} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import BarcodeScanner from './BarcodeScanner';
-import {
-  BarcodeResult,
-  DCVBarcodeReader,
-  EnumDBRPresetTemplate,
-} from 'henry-capture-vision-react-native';
-import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
-
-const option = {
-  mediaType: 'photo',
-  maxWidth: 2000,
-  maxHeight: 2000,
-  quality: 0.8,
-};
-
-const requestPermissions = async () => {
-  try {
-    if (Platform.OS === 'android') {
-      await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-
-const decodeFile = async filePath => {
-  return this.dbr.decodeFile(filePath);
-};
-
-const mergeResultsText = results => {
-  let str = '';
-  if (results && results.length > 0) {
-    for (let i = 0; i < results.length; i++) {
-      str +=
-        results[i].barcodeFormatString + ': ' + results[i].barcodeText + ' \n';
-    }
-  } else {
-    str = 'No barcode detected.';
-  }
-  return str;
-};
-
-const useImagePicker = (imagePickerLauncher, setModalState) => {
-  imagePickerLauncher(option, res => {
-    if (res.didCancel) {
-      setModalState(modalInitState);
-      return false;
-    }
-    setModalState({isVisible: true, text: 'decoding...'});
-    decodeFile(res.assets[0].uri.split('file://')[1])
-      .then(results => {
-        let str = mergeResultsText(results);
-        setModalState({isVisible: true, text: str});
-      })
-      .catch(err => {
-        setModalState({isVisible: true, text: err.toString()});
-      });
-  });
-};
+import {DCVBarcodeReader} from 'henry-capture-vision-react-native';
 
 (async () => {
   // Initialize the license so that you can use full feature of the Barcode Reader module.
@@ -78,65 +12,11 @@ const useImagePicker = (imagePickerLauncher, setModalState) => {
   ).catch(e => {
     console.log(e);
   });
-  try {
-    this.dbr = await DCVBarcodeReader.createInstance();
-    await this.dbr.updateRuntimeSettings(
-      EnumDBRPresetTemplate.IMAGE_READ_RATE_FIRST,
-    );
-  } catch (e) {
-    console.log(e);
-  }
 })();
 
-const modalInitState = {
-  isVisible: false,
-  text: '',
-};
-
 function HomeScreen({navigation}) {
-  // const [modalVisible, setModalVisible] = useState(false);
-  // const [modalText, setModalText] = useState('');
-  const [modalState, setModalState] = useState(modalInitState);
-
   return (
     <View style={styles.contentView}>
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalState.isVisible}
-        onRequestClose={() => {
-          setModalState(modalInitState);
-        }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={() => {
-            setModalState(modalInitState);
-          }}
-          style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <Text style={styles.modalText}>{modalState.text}</Text>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-
-      <Button
-        title="Take Photo"
-        onPress={() => {
-          requestPermissions().then(() => {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            useImagePicker(launchCamera, setModalState);
-          });
-        }}
-      />
-      <View style={styles.splitView} />
-      <Button
-        title="Select Photo"
-        onPress={() => {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          useImagePicker(launchImageLibrary, setModalState);
-        }}
-      />
-      <View style={styles.splitView} />
       <Button
         title="Start Scanning"
         onPress={() => navigation.navigate('Barcode')}
@@ -165,34 +45,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'column',
   },
-  centeredView: {
-    flex: 1,
-    backgroundColor: '#00000000',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 20,
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  modalText: {
-    textAlign: 'center',
-  },
-  splitView: {
-    height: 100,
-  },
 });
 
 export default App;

BarcodeReaderSimpleSample/BarcodeScanner.js

@@ -1,20 +1,77 @@
 import React from 'react';
-import {Text} from 'react-native';
+import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {
-  DynamsoftBarcodeReader,
-  DynamsoftCameraView,
+  DCVBarcodeReader,
+  DCVCameraView,
   EnumBarcodeFormat,
   EnumTorchState,
 } from 'henry-capture-vision-react-native';
+import Entypo from 'react-native-vector-icons/Entypo';
+import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
+
+const option = {
+  mediaType: 'photo',
+  maxWidth: 2000,
+  maxHeight: 2000,
+  quality: 0.7,
+};
+
+const mergeResultsText = results => {
+  let str = '';
+  if (results && results.length > 0) {
+    for (let i = 0; i < results.length; i++) {
+      str +=
+        results[i].barcodeFormatString + ': ' + results[i].barcodeText + ' \n';
+    }
+  } else {
+    str = 'No barcode detected.';
+  }
+  return str;
+};
+
+const modalInitState = {
+  isVisible: false,
+  modalText: '',
+};
 
 class BarcodeScanner extends React.Component {
   state = {
     results: null,
+    isVisible: false,
+    modalText: '',
+  };
+
+  decodeFile = async filePath => {
+    return this.reader.decodeFile(filePath);
+  };
+
+  useImagePicker = imagePickerLauncher => {
+    console.log(this.reader);
+    imagePickerLauncher(option, res => {
+      if (res.didCancel) {
+        // this.setState(modalInitState);
+        return false;
+      }
+
+      // setModalState({isVisible: true, modalText: 'decoding...'});
+      console.log(res.assets[0].uri.split('file://')[1]);
+      this.decodeFile(res.assets[0].uri.split('file://')[1])
+        .then(results => {
+          let str = mergeResultsText(results);
+          console.log(str);
+          this.setState({isVisible: true, modalText: str});
+        })
+        .catch(err => {
+          console.log(err);
+          this.setState({isVisible: true, modalText: err.toString()});
+        });
+    });
   };
 
   async componentDidMount() {
+    console.log('start');
     // Create a barcode reader instance.
-    this.reader = await DynamsoftBarcodeReader.createInstance();
+    this.reader = await DCVBarcodeReader.createInstance();
 
     await this.reader.resetRuntimeSettings();
 
@@ -45,6 +102,29 @@ class BarcodeScanner extends React.Component {
     // If the camera is opened, the barcode reader will start the barcode decoding thread when you triggered the startScanning.
     // The barcode reader will scan the barcodes continuously before you trigger stopScanning.
     this.reader.startScanning();
+
+    this.props.navigation.setOptions({
+      headerRight: () => (
+        <View style={styles.headerRight}>
+          <Entypo
+            style={{paddingRight: 15}}
+            name={'camera'}
+            size={35}
+            onPress={() => {
+              this.useImagePicker(launchCamera);
+            }}
+          />
+          <Entypo
+            style={{paddingLeft: 15}}
+            name={'folder-images'}
+            size={35}
+            onPress={() => {
+              this.useImagePicker(launchImageLibrary);
+            }}
+          />
+        </View>
+      ),
+    });
   }
 
   async componentWillUnmount() {
@@ -72,7 +152,7 @@ class BarcodeScanner extends React.Component {
     }
 
     return (
-      <DynamsoftCameraView
+      <DCVCameraView
         style={{
           flex: 1,
         }}
@@ -97,9 +177,59 @@ class BarcodeScanner extends React.Component {
           }}>
           {results && results.length > 0 ? barcode_text : ''}
         </Text>
-      </DynamsoftCameraView>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={this.state.isVisible}
+          onRequestClose={() => {
+            this.setState(modalInitState);
+          }}>
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={() => {
+              this.setState(modalInitState);
+            }}
+            style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>{this.state.modalText}</Text>
+            </View>
+          </TouchableOpacity>
+        </Modal>
+      </DCVCameraView>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    backgroundColor: '#00000000',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 20,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    textAlign: 'center',
+  },
+  headerRight: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
 export default BarcodeScanner;

BarcodeReaderSimpleSample/android/app/build.gradle

@@ -214,4 +214,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
     into 'libs'
 }
 
+project.ext.vectoricons = [
+    iconFontNames: [ 'Entypo.ttf']
+]
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

BarcodeReaderSimpleSample/package.json

@@ -17,7 +17,8 @@
     "react-native": "0.67.2",
     "react-native-image-picker": "^4.10.0",
     "react-native-safe-area-context": "^4.2.5",
-    "react-native-screens": "^3.13.1"
+    "react-native-screens": "^3.13.1",
+    "react-native-vector-icons": "^9.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",