feat: adding main screens and barcode scanning

Author: fguitton

android/app/build.gradle

@@ -134,6 +134,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        missingDimensionStrategy 'react-native-camera', 'general'
     }
     splits {
         abi {

index.tsx index.ts

@@ -2,7 +2,6 @@
  * @format
  */
 
-import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';

ios/Podfile

@@ -79,6 +79,8 @@ target 'C3POApp' do
 
   pod 'Permission-BluetoothPeripheral', :path => "../node_modules/react-native-permissions/ios/BluetoothPeripheral.podspec"
 
+  pod 'RNSVG', :path => '../node_modules/react-native-svg'
+
   target 'C3POAppTests' do
     inherit! :complete
     # Pods for testing

ios/Podfile.lock

@@ -370,7 +370,6 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
-  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -451,14 +450,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
-  RNCMaskedView:
-    :path: "../node_modules/@react-native-community/masked-view"
-  RNGestureHandler:
-    :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
-  RNScreens:
-    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -504,10 +497,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
   ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
   RNCAsyncStorage: 453cd7c335ec9ba3b877e27d02238956b76f3268
-  RNCMaskedView: 71fc32d971f03b7f03d6ab6b86b730c4ee64f5b6
-  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: 955cf4068714003d2f1a6e2bae3fb1118f359aff
-  RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

metro.config.js

@@ -9,7 +9,7 @@ const { getDefaultConfig } = require('metro-config');
 
 module.exports = (async () => {
     const {
-        resolver: { sourceExts }
+        resolver: { sourceExts, assetExts }
     } = await getDefaultConfig();
     return {
         transformer: {
@@ -19,10 +19,11 @@ module.exports = (async () => {
                     inlineRequires: false
                 }
             }),
-            babelTransformerPath: require.resolve('react-native-less-transformer')
+            babelTransformerPath: require.resolve('./metro.transform.js')
         },
         resolver: {
-            sourceExts: [...sourceExts, 'less']
+            assetExts: assetExts.filter(ext => ext !== 'svg'),
+            sourceExts: [...sourceExts, 'less', 'svg']
         }
     };
 })();

metro.transform.js

@@ -0,0 +1,13 @@
+const upstreamTransformer = require('metro-react-native-babel-transformer');
+const lessTransformer = require('react-native-less-transformer');
+const svgTransformer = require('react-native-svg-transformer');
+
+module.exports.transform = function ({ src, filename, options }) {
+    if (filename.endsWith('.less')) {
+        return lessTransformer.transform({ src, filename, options });
+    } else if (filename.endsWith('.svg')) {
+        return svgTransformer.transform({ src, filename, options });
+    } else {
+        return upstreamTransformer.transform({ src, filename, options });
+    }
+};

package.json

@@ -36,22 +36,17 @@
     "homepage": "https://github.com/secretarium/c3po-app#readme",
     "dependencies": {
         "@react-native-community/async-storage": "1.9.0",
-        "@react-native-community/masked-view": "0.1.10",
-        "@react-navigation/native": "5.1.7",
-        "@react-navigation/stack": "5.2.14",
         "@secretarium/react-native-ble": "https://github.com/secretarium/c3po-react-native-ble#ce5d145a",
         "lottie-ios": "3.1.8",
         "lottie-react-native": "3.3.2",
         "react": "16.13.1",
         "react-native": "0.62.2",
-        "react-native-app-intro-slider": "4.0.2",
-        "react-native-gesture-handler": "1.6.1",
+        "react-native-camera": "3.23.1",
         "react-native-keep-awake": "4.0.0",
         "react-native-permissions": "2.1.3",
-        "react-native-reanimated": "1.8.0",
-        "react-native-safe-area-context": "0.7.3",
-        "react-native-screens": "2.7.0",
+        "react-native-svg": "12.1.0",
         "react-redux": "7.2.0",
+        "react-router-native": "5.1.2",
         "redux": "4.0.5",
         "redux-logger": "3.0.6",
         "redux-persist": "6.0.0",
@@ -63,8 +58,6 @@
         "@babel/runtime": "7.9.2",
         "@commitlint/config-conventional": "8.3.4",
         "@react-native-community/eslint-config": "1.1.0",
-        "@react-navigation/native": "5.1.7",
-        "@react-navigation/stack": "5.2.14",
         "@storybook/addon-actions": "5.3.18",
         "@storybook/addon-knobs": "5.3.18",
         "@storybook/addon-links": "5.3.18",
@@ -78,10 +71,10 @@
         "@types/enzyme-adapter-react-16": "1.0.6",
         "@types/jest": "25.2.1",
         "@types/react-native": "0.62.4",
-        "@types/react-native-app-intro-slider": "3.0.1",
         "@types/react-native-keep-awake": "2.0.2",
         "@types/react-redux": "7.1.7",
         "@types/react-test-renderer": "16.9.2",
+        "@types/react-router-native": "5.1.0",
         "@types/redux-logger": "3.0.7",
         "@types/redux-promise": "0.5.28",
         "@typescript-eslint/eslint-plugin": "2.29.0",
@@ -109,6 +102,7 @@
         "metro-react-native-babel-preset": "0.59.0",
         "react-dom": "16.13.1",
         "react-native-less-transformer": "1.3.0",
+        "react-native-svg-transformer": "0.14.3",
         "react-test-renderer": "16.13.1",
         "release-it": "13.5.6",
         "typescript": "3.8.3"

src/App.tsx

@@ -4,22 +4,25 @@
 
 import React from 'react';
 import { StatusBar } from 'react-native';
+import { Route, Switch } from 'react-router-native';
 import StorybookUI from '../storybook';
 import { Providers } from './Providers';
-// import TestAnimation from './TestAnimation';
-import { TestBeacon } from './components/TestBeacon';
-import { Navigator, Screen } from './modules/navigation/Navigator';
+import Welcome from './components/Welcome';
+import Bluetooth from './components/Bluetooth';
+import Exposure from './components/Exposure';
+import Scanning from './components/Scanning';
 
 const App: React.FC = () => {
     return (
         <Providers>
-            <StatusBar barStyle="dark-content" animated={true} />
-            <Navigator initialRouteName="Home">
-                <Screen name="Home" options={{
-                    title: 'Beta software'
-                }} component={TestBeacon} />
-                {__DEV__ ? <Screen name="Storybook" component={StorybookUI} /> : undefined}
-            </Navigator>
+            <StatusBar barStyle="dark-content" backgroundColor="white" animated={true} />
+            {__DEV__ ? <Route path="/storybook" component={StorybookUI} /> : undefined}
+            <Switch>
+                <Route path="/bluetooth" component={Bluetooth} />
+                <Route path="/exposure" component={Exposure} />
+                <Route path="/scanning" component={Scanning} />
+                <Route path="/" component={Welcome} />
+            </Switch>
         </Providers>
     );
 };

src/Providers.tsx

@@ -3,7 +3,7 @@ import { ActivityIndicator, View } from 'react-native';
 import KeepAwake from 'react-native-keep-awake';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { NavigationContainer } from '@react-navigation/native';
+import { NativeRouter } from 'react-router-native';
 
 import { store, persistor } from './redux/store';
 
@@ -18,10 +18,10 @@ export const Providers: React.FC = ({ children }) => {
                 )}
                 persistor={persistor}
             >
-                <NavigationContainer>
+                <NativeRouter>
                     {__DEV__ ? <KeepAwake /> : undefined}
                     {children}
-                </NavigationContainer>
+                </NativeRouter>
             </PersistGate>
         </Provider>
     );