Updates

.gitignore

@@ -2,3 +2,4 @@ db
 .expo
 node_modules
 screenshot/index.js
+coverage

App.tsx

@@ -1,17 +1,18 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import 'react-native-gesture-handler' // Imported to fix gesture error in tab navigation
-import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { Text } from 'react-native'
-import { Loading } from './src/screens/Loading'
-import { loadFonts } from './src/styles/Font'
-import { exists } from './src/util/exists'
-import { setGlobalConfig } from 'mobx-keystone'
-import { generateId } from './src/util/generateId'
-import { createScreenshots, ScreenshotContext } from './src/util/screenshots'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Text, View, StyleSheet } from 'react-native'
+import { AppLoading } from 'expo'
+import { loadFonts } from './src/styles/design/Font'
+import { NavigationContainer, navigationRef } from './src/util/navigate'
+import * as ScreenOrientation from 'expo-screen-orientation'
 
-setGlobalConfig({
-  modelIdGenerator: generateId
-})
+import { createScreenshots, ScreenshotContext } from './src/util/screenshots'
+import useConsento from './src/useConsento'
+import { Screens } from './src/screens/Screens'
+import { ConsentoContext } from './src/model/Consento'
+import { exists } from './src/styles/util/lang'
+import { DarkBar } from './src/screens/components/DarkBar'
 
 export const Screenshot = (address: string): (() => JSX.Element) => {
   const screenshots = createScreenshots(address)
@@ -21,32 +22,60 @@ export const Screenshot = (address: string): (() => JSX.Element) => {
     </ScreenshotContext.Provider>
 }
 
+async function loadApp (): Promise<void> {
+  await Promise.all([
+    ScreenOrientation.unlockAsync(),
+    loadFonts()
+  ])
+}
+
+function ErrorScreen ({ error }: { error: Error }): JSX.Element {
+  const insets = useSafeAreaInsets()
+  return <View>
+    <DarkBar height={insets.top} />
+    <Text>{`Error while loading App:\n${String(error)}`}</Text>
+    {/* TODO: improve screen to send error & info to github repo */}
+  </View>
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: '100%',
+    height: '100%'
+  }
+})
+
+/**
+ * This definition runs before the app. It load the actual App and fonts.
+ * In case the app has an error on import, the error will be displayed.
+ */
 export default function App (): JSX.Element {
-  const [error, setError] = useState<Error>()
-  const [loaded, setLoaded] = useState<{ ConsentoApp(): JSX.Element }>()
-  useEffect(() => {
-    Promise.all([
-      import('./src/ConsentoApp'),
-      loadFonts()
-    ])
-      .then(([{ ConsentoApp }]) => {
-        if (!exists(ConsentoApp)) {
-          setLoaded({ ConsentoApp: (): JSX.Element => <Text>'No Screen returned by ./src/ConsentoApp.tsx'</Text> })
-        }
-        setLoaded({ ConsentoApp })
-      })
-      .catch(setError)
-  }, [])
-  if (error !== undefined) {
-    return <Text>{`Error while initing:\n${String(this.state.error)}`}</Text>
+  const [loaded, setLoaded] = useState<boolean>(false)
+  const [loadError, setLoadError] = useState<Error>()
+  const { consento, error: consentoError, ready } = useConsento()
+  if (loadError === undefined && !loaded) {
+    console.log('loading fonts etc.')
+    return <AppLoading
+      startAsync={loadApp}
+      onFinish={() => setLoaded(true)}
+      onError={setLoadError}
+    />
   }
-  if (loaded !== undefined) {
-    try {
-      return <SafeAreaProvider><loaded.ConsentoApp /></SafeAreaProvider>
-    // eslint-disable-next-line no-unreachable
-    } catch (err) {
-      return <Text>{`Error: ${String(err)}`}</Text>
-    }
+  const error = loadError ?? consentoError ?? consento.loadConfigError
+  if (!ready && !exists(error)) {
+    return <AppLoading />
   }
-  return <SafeAreaProvider><Loading /></SafeAreaProvider>
+  return <SafeAreaProvider>
+    <ConsentoContext.Provider value={consento}>
+      <NavigationContainer ref={navigationRef}>
+        <View style={styles.root}>
+          {
+            exists(error)
+              ? <ErrorScreen error={error} />
+              : <Screens />
+          }
+        </View>
+      </NavigationContainer>
+    </ConsentoContext.Provider>
+  </SafeAreaProvider>
 }

app.json

@@ -6,7 +6,6 @@
     "slug": "consento",
     "owner": "consento",
     "privacy": "public",
-    "sdkVersion": "36.0.0",
     "version": "1.0.2",
     "scheme": "consento",
     "entryPoint": "./index.js",
@@ -20,7 +19,8 @@
     "githubUrl": "https://github.com/consento-org/mobile",
     "androidStatusBar": {
       "barStyle": "light-content",
-      "backgroundColor": "#484848"
+      "backgroundColor": "#484848",
+      "translucent": true
     },
     "splash": {
       "backgroundColor": "#FCFCFC",
@@ -30,7 +30,8 @@
       "package": "org.consento.mobile",
       "permissions": [
         "CAMERA"
-      ]
+      ],
+      "useNextNotificationsApi": true
     },
     "ios": {
       "bundleIdentifier": "org.consento.mobile",

index.js

@@ -1,12 +1,4 @@
-import 'expo/build/Expo.fx'
-import registerRootComponent from 'expo/build/launch/registerRootComponent'
-import { activateKeepAwake } from 'expo-keep-awake'
+const getRandomValues = require('get-random-values-polypony')
+getRandomValues.polyfill()
 
-import App from './App'
-
-// eslint-disable-next-line no-undef
-if (__DEV__) {
-  activateKeepAwake()
-}
-
-registerRootComponent(App)
+require('./polyfilled')

metro.config.js

@@ -1,5 +1,9 @@
+
 module.exports = {
   resolver: {
-    blacklistRE: /screenshot\/recorded\//
+    blacklistRE: /screenshot\/recorded\//,
+    extraNodeModules: {
+      'sodium-universal': 'sodium-javascript'
+    }
   }
 }