demo

.eslintrc.js

@@ -8,7 +8,13 @@ module.exports = {
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:react/recommended",
-        "plugin:jest/recommended"
+        "plugin:react-hooks/recommended",
+        "plugin:jest/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript",
+        "prettier/@typescript-eslint",
+        "plugin:prettier/recommended"
     ],
     "globals": {
         "Atomics": "readonly",
@@ -20,18 +26,39 @@ module.exports = {
         "ecmaFeatures": {
             "jsx": true
         },
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2020,
         "sourceType": "module"
     },
+    settings: {
+        react: {
+            version: "detect"
+        },
+        "import/resolver": {
+            "typescript": {} // this loads <rootdir>/tsconfig.json to eslint
+          },
+    },
     "plugins": [
         "react",
         "@typescript-eslint",
         "jest"
     ],
     "rules": {
-      "@typescript-eslint/explicit-function-return-type": [0],
-      "quotes": [2, "double"],
-      "react/display-name": [0],
-      "react/prop-types": [0]
+        "@typescript-eslint/explicit-function-return-type": [0],
+        "quotes": [2, "double"],
+        "react/display-name": [0],
+        "react/prop-types": [0],
+        "import/namespace": 0,
+        "import/no-named-as-default-member": 0,
+        "import/order": [
+          "error",
+          {
+            groups: [
+              ["external", "builtin"],
+              "internal",
+              ["parent", "sibling", "index"],
+            ],
+            "newlines-between": "always-and-inside-groups",
+          },
+        ],
     }
 };

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: nmf_earth
+open_collective: nmf_earth
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: NMF-earth/nmf-app
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/publish.yml

@@ -0,0 +1,24 @@
+name: Expo Publish
+on:
+  push:
+    tags:
+      - 'v*'
+jobs:
+  publish:
+    name: Install and publish
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - uses: expo/expo-github-action@v5
+        with:
+          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
+          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
+      - run: yarn install
+      - run: node scripts/generate-ci-config.js
+        env: 
+          SENTRY_DSN: ${{ secrets.DSN }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      - run: expo publish

.github/workflows/testv2.yml

@@ -0,0 +1,38 @@
+name: CI
+on: [push]
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    outputs:
+      test-chunks: ${{ steps['set-test-chunks'].outputs['test-chunks'] }}
+      test-chunk-ids: ${{ steps['set-test-chunk-ids'].outputs['test-chunk-ids'] }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: borales/[email protected]
+        with:
+          cmd: install 
+      - id: set-test-chunks
+        name: Set Chunks
+        run: echo "::set-output name=test-chunks::$(npx jest --listTests --json | jq -cM '[_nwise(length / 4 | floor)]')"
+      - id: set-test-chunk-ids
+        name: Set Chunk IDs
+        run: echo "::set-output name=test-chunk-ids::$(echo $CHUNKS | jq -cM 'to_entries | map(.key)')"
+        env:
+          CHUNKS: ${{ steps['set-test-chunks'].outputs['test-chunks'] }}
+  test:
+    runs-on: ubuntu-latest
+    name: test (chunk ${{ matrix.chunk }})
+    needs:
+      - setup
+    strategy:
+      matrix:
+        chunk: ${{ fromJson(needs.setup.outputs['test-chunk-ids']) }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: borales/[email protected]
+        with:
+          cmd: install 
+      - name: jest
+        run: echo $CHUNKS | jq '.[${{ matrix.chunk }}] | .[] | @text' | xargs npx jest
+        env:
+          CHUNKS: ${{ needs.setup.outputs['test-chunks'] }}

.gitignore

@@ -65,6 +65,7 @@ gen-external-apklibs
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
 # User-specific stuff:
+.idea/
 .idea/**/workspace.xml
 .idea/**/tasks.xml
 
@@ -320,4 +321,4 @@ app.json
 
 # Expo
 .expo
-__generated__
+__generated__

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: true,
+  trailingComma: "es5",
+  singleQuote: false,
+  printWidth: 80,
+  tabWidth: 2,
+  endOfLine: "auto"
+};

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

App.tsx

@@ -1,25 +1,22 @@
-import React from "react";
-import { AppLoading } from "expo";
+import React, { useEffect, useState } from "react";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
 import * as Font from "expo-font";
 import { FormattedProvider } from "react-native-globalize";
-import { locale } from "expo-localization";
+import { locale as localeExpo } from "expo-localization";
 import { includes } from "ramda";
-import { Platform, StatusBar, StyleSheet, View } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import Constants from "expo-constants";
 import * as Sentry from "sentry-expo";
 import { Provider } from "react-redux";
-import AppNavigator from "./app/navigation/AppNavigator";
+import AppNavigator from "./app/navigation/Navigator/AppNavigator";
 import store from "./app/redux/store";
+import SplashScreen from "./app/screens/Splash";
+import { enableScreens } from "react-native-screens";
+import { LocalizationContext } from "./app/utils";
 
-const supportedLanguages = ["en", "fr", "de"];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff"
-  }
-});
+const supportedLanguages = ["en", "fr", "de", "sv"];
 
 const secret =
   require("./secret.ts").default || require("./secret.example.ts").default;
@@ -28,7 +25,7 @@ const secret =
 Sentry.init({
   dsn: secret.dsn,
   enableInExpoDevelopment: false,
-  debug: true
+  debug: true,
 });
 
 /* TODO: set Constants.manifest.revisionId with expo */
@@ -38,87 +35,74 @@ interface Props {
   skipLoadingScreen: boolean;
 }
 interface State {
+  locale: string;
+  language: string;
+  setLanguage: (language: string) => void;
+  setLocale: (locale: string) => void;
   isLoadingComplete: boolean;
 }
 
-export default class App extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      isLoadingComplete: false
-    };
-  }
-  componentDidCatch(error: Error) {
-    /* TODO: add more params for better error reporting */
-    Sentry.captureException(error);
-  }
-
-  render() {
-    let localization = locale.length > 2 ? locale.substring(0, 2) : locale;
+const App = () => {
+  enableScreens();
 
-    if (!includes(localization, supportedLanguages)) {
-      localization = "en";
-    }
+  let lang = localeExpo.substring(0, 2);
 
-    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
-      return (
-        <AppLoading
-          startAsync={loadResourcesAsync}
-          onError={handleLoadingError}
-          onFinish={() =>
-            handleFinishLoading(() => {
-              this.setState({ isLoadingComplete: true });
-            })
-          }
-        />
-      );
-    } else {
-      return (
-        <View style={styles.container}>
-          {Platform.OS === "ios" && <StatusBar barStyle="default" />}
-          <Provider store={store}>
-            <FormattedProvider locale={localization}>
-              <AppNavigator />
-            </FormattedProvider>
-          </Provider>
-        </View>
-      );
-    }
+  if (!includes(lang, supportedLanguages)) {
+    lang = "en";
   }
-}
 
-async function loadResourcesAsync() {
-  await Promise.all([
-    Font.loadAsync({
-      ...Ionicons.font,
-      ...MaterialCommunityIcons.font,
-      "Inter-Black": require("./assets/fonts/Inter-Black.ttf"),
-      "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
-      "Inter-BoldItalic": require("./assets/fonts/Inter-BoldItalic.ttf"),
-      "Inter-ExtraBold": require("./assets/fonts/Inter-ExtraBold.ttf"),
-      "Inter-ExtraBoldItalic": require("./assets/fonts/Inter-ExtraBoldItalic.ttf"),
-      "Inter-ExtraLight-BETA": require("./assets/fonts/Inter-ExtraLight-BETA.ttf"),
-      "Inter-ExtraLightItalic-BETA": require("./assets/fonts/Inter-ExtraLightItalic-BETA.ttf"),
-      "Inter-Italic": require("./assets/fonts/Inter-Italic.ttf"),
-      "Inter-Light-BETA": require("./assets/fonts/Inter-Light-BETA.ttf"),
-      "Inter-LightItalic-BETA": require("./assets/fonts/Inter-LightItalic-BETA.ttf"),
-      "Inter-Medium": require("./assets/fonts/Inter-Medium.ttf"),
-      "Inter-MediumItalic": require("./assets/fonts/Inter-MediumItalic.ttf"),
-      "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
-      "Inter-SemiBold": require("./assets/fonts/Inter-SemiBold.ttf"),
-      "Inter-SemiBoldItalic": require("./assets/fonts/Inter-SemiBoldItalic.ttf"),
-      "Inter-Thin-BETA": require("./assets/fonts/Inter-Thin-BETA.ttf"),
-      "Inter-ThinItalic-BETA": require("./assets/fonts/Inter-ThinItalic-BETA.ttf")
-    })
-  ]);
-}
+  const [ready, setReady] = useState(false);
+  const [splashAnimation, setSplashAnimation] = useState(__DEV__); // to track splashScreen animation
+  const [language, setLanguage] = useState(lang);
+  const [locale, setLocale] = useState(localeExpo);
 
-function handleLoadingError(error) {
-  // In this case, you might want to report the error to your error reporting
-  // service, for example Sentry
-  console.warn(error);
-}
+  useEffect(() => {
+    Promise.all([
+      Font.loadAsync({
+        ...Ionicons.font,
+        ...MaterialCommunityIcons.font,
+        "Inter-Black": require("./assets/fonts/Inter-Black.ttf"),
+        "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
+        "Inter-Light-BETA": require("./assets/fonts/Inter-Light-BETA.ttf"),
+        "Inter-Medium": require("./assets/fonts/Inter-Medium.ttf"),
+      }),
+    ])
+      .then(() => {
+        setReady(true);
+      })
+      .catch((error) => Sentry.captureException(error));
+  }, []);
 
-function handleFinishLoading(setLoadingComplete) {
-  setLoadingComplete(true);
-}
+  // callback to get splashScreen animation completion
+  const screenAnimationComplete = (animation) => {
+    setSplashAnimation(animation);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar />
+      {ready && splashAnimation ? (
+        <Provider store={store}>
+          <FormattedProvider locale={language || "en"}>
+            <LocalizationContext.Provider
+              value={{
+                locale: locale || "en-US",
+                setLocale: setLocale,
+                language: language || "en",
+                setLanguage: setLanguage,
+              }}
+            >
+              <AppNavigator />
+            </LocalizationContext.Provider>
+          </FormattedProvider>
+        </Provider>
+      ) : __DEV__ ? (
+        <View />
+      ) : (
+        <SplashScreen screenAnimationComplete={screenAnimationComplete} />
+      )}
+    </SafeAreaProvider>
+  );
+};
+
+export default App;

LICENSE

@@ -632,7 +632,7 @@ state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
     <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
+    Copyright (C) 2019  Pierre Bresson
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
@@ -652,7 +652,7 @@ Also add information on how to contact you by electronic and paper mail.
   If the program does terminal interaction, make it output a short
 notice like this when it starts in an interactive mode:
 
-    <program>  Copyright (C) <year>  <name of author>
+    NMF.Earth  Copyright (C) 2019  Pierre Bresson
     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
     This is free software, and you are welcome to redistribute it
     under certain conditions; type `show c' for details.