QR Code Importing/Exporting

app/android/app/src/main/AndroidManifest.xml

@@ -22,4 +22,5 @@
         </intent-filter>
       </activity>
     </application>
+    <uses-permission android:name="android.permission.CAMERA" />
 </manifest>

app/android/gradle.properties

@@ -42,3 +42,5 @@ newArchEnabled=false
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
+
+VisionCamera_enableCodeScanner=true

app/ios/EagleScout/Info.plist

@@ -50,6 +50,8 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSCameraUsageDescription</key>
+	<string>$(PRODUCT_NAME) needs access to your Camera.</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>UILaunchStoryboardName</key>

app/package.json

@@ -39,6 +39,7 @@
     "react-native-haptic-feedback": "^2.2.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.1",
+    "react-native-qrcode-styled": "^0.3.1",
     "react-native-reanimated": "^3.7.2",
     "react-native-safe-area-context": "^4.7.2",
     "react-native-screens": "^3.25.0",
@@ -47,6 +48,7 @@
     "react-native-svg": "^13.13.0",
     "react-native-toast-message": "^2.1.6",
     "react-native-url-polyfill": "^2.0.0",
+    "react-native-vision-camera": "^3.9.2",
     "rn-emoji-keyboard": "^1.6.1"
   },
   "devDependencies": {

app/src/App.js

@@ -53,6 +53,7 @@ import ChangePassword from './screens/settings-flow/ChangePassword';
 import ResetPassword from './screens/login-flow/ResetPassword';
 import {MatchBetting} from './screens/match-betting-flow/MatchBetting';
 import {MatchBettingNavigator} from './screens/match-betting-flow/MatchBettingNavigator';
+import {QrViewSplitter} from './screens/qr-export-flow/QrViewSplitter';
 
 const CustomLightTheme = {
   dark: false,
@@ -453,6 +454,18 @@ const MyStack = ({themePreference, setThemePreference, setOled}) => {
             }}
             component={MatchBettingNavigator}
           />
+          <Tab.Screen
+            name="QrView"
+            options={{
+              tabBarButton: () => null,
+              headerShown: false,
+              tabBarShowLabel: false,
+              tabBarStyle: {
+                backgroundColor: colors.background,
+              },
+            }}
+            component={QrViewSplitter}
+          />
         </>
       )}
     </Tab.Navigator>

app/src/FormHelper.js

@@ -37,7 +37,9 @@ class FormHelper {
    */
 
   static async saveFormOffline(dataToSubmit) {
-    dataToSubmit.createdAt = new Date();
+    if (!dataToSubmit.createdAt) {
+      dataToSubmit.createdAt = new Date();
+    }
 
     await AsyncStorage.setItem(
       'form-' + dataToSubmit.createdAt.getUTCMilliseconds(),

app/src/components/camera/QrScannerModal.tsx

@@ -0,0 +1,44 @@
+import {useEffect} from 'react';
+import {Text} from 'react-native-svg';
+import {
+  Camera,
+  Code,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+} from 'react-native-vision-camera';
+import {Modal, StyleSheet} from 'react-native';
+
+export const QrScannerModal = ({
+  onCodeScanned,
+}: {
+  onCodeScanned: (codes: Code[]) => void;
+}) => {
+  const {hasPermission, requestPermission} = useCameraPermission();
+  const device = useCameraDevice('back');
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned,
+  });
+  useEffect(() => {
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+  if (!device || !codeScanner) {
+    return null;
+  }
+  if (!hasPermission) {
+    return <Text>Requesting camera permission...</Text>;
+  }
+  return (
+    <Modal visible={true}>
+      <Camera
+        style={StyleSheet.absoluteFill}
+        codeScanner={codeScanner}
+        device={device}
+        isActive={true}
+      />
+    </Modal>
+  );
+};

app/src/screens/data-flow/DataHome.tsx

@@ -271,6 +271,25 @@ const DataHome = ({navigation}) => {
                   </Svg>
                 )}
               />
+              <ListItem
+                text={'Scan QR Code'}
+                onPress={() => {
+                  navigation.navigate('QrView', {
+                    type: 'import',
+                  });
+                }}
+                caretVisible={false}
+                disabled={internetStatus !== InternetStatus.CONNECTED}
+                icon={() => (
+                  <Svg
+                    width="16"
+                    height="16"
+                    fill={colors.text}
+                    viewBox="0 0 16 16">
+                    <Path d="M8.5 1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5zM9 1.5a.5.5 0 0 1 1 0v2a.5.5 0 0 1-1 0v-2zm-1 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zM8 3a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-1 0v-10A.5.5 0 0 1 8 3z" />
+                  </Svg>
+                )}
+              />
               <ListItem
                 text={'Manage Users'}
                 onPress={() => {