feat: add RNCode and RNImageCropPicker/RNSVG

Phecda
Commit 9114e0e8d7485d41ee56632b6e583bc01a944a1d 9114e0e8 1 parent 557b3ee6
Showing 10 changed files with 117 additions and 1 deletions
android/app/build.gradle
android/build.gradle
ios/NGPlay.xcodeproj/project.pbxproj
ios/Podfile.lock
package.json
src/screen/AppNavigationContainer.tsx
src/screen/Library.tsx
src/screen/ReadableCode.tsx
src/type/Navigation.ts
yarn.lock
--- a/android/app/build.gradle
View file @9114e0e
+++ b/android/app/build.gradle
View file @9114e0e
@@ -137,6 +137,7 @@ android {
         versionName "1.0"
         missingDimensionStrategy 'react-native-camera', 'general'
         multiDexEnabled true
+        vectorDrawables.useSupportLibrary true
     }
     splits {
         abi {
--- a/android/build.gradle
View file @9114e0e
+++ b/android/build.gradle
View file @9114e0e
@@ -30,7 +30,7 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
-
+        maven { url 'https://maven.google.com' }
         google()
         jcenter()
         maven { url 'https://www.jitpack.io' }
--- a/ios/NGPlay.xcodeproj/project.pbxproj
View file @9114e0e
+++ b/ios/NGPlay.xcodeproj/project.pbxproj
View file @9114e0e
@@ -427,6 +427,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-NGPlay-NGPlayTests/Pods-NGPlay-NGPlayTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -443,9 +444,11 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+				"${PODS_ROOT}/RSKImageCropper/RSKImageCropper/RSKImageCropperStrings.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
@@ -462,6 +465,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RSKImageCropperStrings.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -541,6 +545,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-NGPlay/Pods-NGPlay-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -557,9 +562,11 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+				"${PODS_ROOT}/RSKImageCropper/RSKImageCropper/RSKImageCropperStrings.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
@@ -576,6 +583,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RSKImageCropperStrings.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
--- a/ios/Podfile.lock
View file @9114e0e
+++ b/ios/Podfile.lock
View file @9114e0e
@@ -247,6 +247,8 @@ PODS:
     - React
   - react-native-camera/RN (3.23.1):
     - React
+  - react-native-code (1.0.0-0):
+    - React
   - react-native-netinfo (5.7.1):
     - React
   - react-native-safe-area-context (0.7.3):
@@ -322,6 +324,15 @@ PODS:
     - React
   - RNGestureHandler (1.6.1):
     - React
+  - RNImageCropPicker (0.28.0):
+    - React-Core
+    - React-RCTImage
+    - RNImageCropPicker/QBImagePickerController (= 0.28.0)
+    - RSKImageCropper
+  - RNImageCropPicker/QBImagePickerController (0.28.0):
+    - React-Core
+    - React-RCTImage
+    - RSKImageCropper
   - RNLocalize (1.4.0):
     - React
   - RNPermissions (2.1.2):
@@ -330,8 +341,11 @@ PODS:
     - React
   - RNScreens (2.4.0):
     - React
+  - RNSVG (12.1.0):
+    - React
   - RNVectorIcons (6.6.0):
     - React
+  - RSKImageCropper (2.2.3)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -362,6 +376,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-camera (from `../node_modules/react-native-camera`)
+  - "react-native-code (from `../node_modules/@phecdas/react-native-code`)"
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -381,10 +396,12 @@ DEPENDENCIES:
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -401,6 +418,7 @@ SPEC REPOS:
     - Flipper-RSocket
     - FlipperKit
     - OpenSSL-Universal
+    - RSKImageCropper
     - YogaKit
 EXTERNAL SOURCES:
@@ -440,6 +458,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-camera:
     :path: "../node_modules/react-native-camera"
+  react-native-code:
+    :path: "../node_modules/@phecdas/react-native-code"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
@@ -476,6 +496,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNImageCropPicker:
+    :path: "../node_modules/react-native-image-crop-picker"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
   RNPermissions:
@@ -484,6 +506,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -519,6 +543,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: e9698dee4fd43ceb44832baf15d5745f455b0157
   React-jsinspector: f74a62727e5604119abd4a1eda52c0a12144bcd5
   react-native-camera: 1b52abea404d04e040edb3e74b7c5523c01a3089
+  react-native-code: 8a278a6a05c9f039be48c01957f6902027bd5180
   react-native-netinfo: 4fa023c153d582aeae8435df95c9a975c5986449
   react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392
   react-native-webview: 0633fd7861a9bd7a80bacaee7da763c3afc248fa
@@ -537,11 +562,14 @@ SPEC CHECKSUMS:
   RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
   RNDeviceInfo: 6a3d16fce033f6979c4a6a41e62244d183e8c765
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
+  RNImageCropPicker: cf129d17e042ce3e96fb9ada967c28f21f977c82
   RNLocalize: b6df30cc25ae736d37874f9bce13351db2f56796
   RNPermissions: a96580116f7894146552e92b000ac30bf1661947
   RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
   RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363
+  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
+  RSKImageCropper: a446db0e8444a036b34f3c43db01b2373baa4b2a
   Yoga: 50fb6eb13d2152e7363293ff603385db380815b1
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
--- a/package.json
View file @9114e0e
+++ b/package.json
View file @9114e0e
@@ -14,6 +14,7 @@
     "@huse/boolean": "^1.0.2",
     "@huse/immer": "^1.0.2",
     "@huse/previous-value": "^1.0.1",
+    "@phecdas/react-native-code": "^1.0.0-1",
     "@react-native-community/art": "^1.2.0",
     "@react-native-community/masked-view": "^0.1.7",
     "@react-native-community/netinfo": "^5.7.1",
@@ -30,12 +31,14 @@
     "react-native-device-info": "^5.5.4",
     "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "^1.6.1",
+    "react-native-image-crop-picker": "^0.28.0",
     "react-native-localize": "^1.4.0",
     "react-native-permissions": "^2.1.2",
     "react-native-progress": "^4.1.2",
     "react-native-reanimated": "^1.7.1",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.4.0",
+    "react-native-svg": "^12.1.0",
     "react-native-tab-view": "^2.13.0",
     "react-native-vector-icons": "^6.6.0",
     "react-native-webview": "9.1.1",
--- a/src/screen/AppNavigationContainer.tsx
View file @9114e0e
+++ b/src/screen/AppNavigationContainer.tsx
View file @9114e0e
@@ -22,6 +22,7 @@ import RNLocalize from './RNLocalize';
 import { useI18nStrings } from '../i18n';
 import CameraScreen from './CameraScreen';
 import Library from './Library';
+import ReadableCode from './ReadableCode';
 const MainTab = createBottomTabNavigator<MainTabParamList>();
@@ -123,6 +124,7 @@ const Container = () => {
         />
         <MainStack.Screen name="RNLocalize" component={RNLocalize} />
         <MainStack.Screen name="RNCamera" component={CameraScreen} />
+        <MainStack.Screen name="RNCode" component={ReadableCode} />
       </MainStack.Navigator>
     </NavigationContainer>
   );
--- a/src/screen/Library.tsx
View file @9114e0e
+++ b/src/screen/Library.tsx
View file @9114e0e
@@ -35,6 +35,12 @@ const Library = ({ navigation }: MainTabScreenProps<'Library'>) => {
         onPress={() => navigation.navigate('RNCamera')}
         chevron
       />
+      <Divider />
+      <ListItem
+        title={'Readable Code'}
+        onPress={() => navigation.navigate('RNCode')}
+        chevron
+      />
     </BGScroll>
   );
 };
--- a/src/screen/ReadableCode.tsx 0 → 100644
View file @9114e0e
+++ b/src/screen/ReadableCode.tsx 0 → 100644
View file @9114e0e
+import React, { useState } from 'react';
+import { QRCode, BarCode, readCodeFromUri } from '@phecdas/react-native-code';
+import ImagePicker from 'react-native-image-crop-picker';
+import { BGScroll, Card, ListItem } from '../component/View';
+import { Input } from 'react-native-elements';
+import { View, StyleSheet, Platform } from 'react-native';
+
+const styles = StyleSheet.create({
+  codeWrapper: { alignItems: 'center', padding: 20 },
+});
+
+const ReadableCode = () => {
+  const [qrValue, setQRValue] = useState('A brave new world');
+  const [barValue, setBarValue] = useState('1234567890');
+  const [readResult, setResult] = useState('');
+  return (
+    <BGScroll>
+      <Card round>
+        <Input
+          defaultValue={qrValue}
+          onSubmitEditing={(e) => setQRValue(e.nativeEvent.text)}
+          placeholder="QR Code"
+        />
+        {!!qrValue && (
+          <View style={styles.codeWrapper}>
+            <QRCode value={qrValue} size={200} />
+          </View>
+        )}
+      </Card>
+      <Card round>
+        <Input
+          defaultValue={barValue}
+          onSubmitEditing={(e) => setBarValue(e.nativeEvent.text)}
+          placeholder="Bar Code"
+          keyboardType="number-pad"
+        />
+        {!!barValue && (
+          <View style={styles.codeWrapper}>
+            <BarCode value={barValue} width={200} height={100} />
+          </View>
+        )}
+      </Card>
+      <Card round>
+        <ListItem
+          title="Read from image..."
+          rightTitle={readResult}
+          onPress={async () => {
+            try {
+              const result = await ImagePicker.openPicker({
+                mediaType: 'photo',
+              });
+              const path = Array.isArray(result) ? result[0].path : result.path;
+              const value = await readCodeFromUri(
+                Platform.OS === 'ios' ? 'file://' : '' + path
+              );
+              setResult(value);
+            } catch (err) {
+              setResult('error: ' + err.message);
+            }
+          }}
+        />
+      </Card>
+    </BGScroll>
+  );
+};
+
+export default ReadableCode;
--- a/src/type/Navigation.ts
View file @9114e0e
+++ b/src/type/Navigation.ts
View file @9114e0e
@@ -14,6 +14,7 @@ export type MainStackParamList = {
   WebviewScreen: { uri: string } | undefined;
   RNLocalize: undefined;
   RNCamera: undefined;
+  RNCode: undefined;
 };
 export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
--- a/yarn.lock
View file @9114e0e
+++ b/yarn.lock
View file @9114e0e