fix(front): lazy load constants json

Workaround for: facebook/hermes#135

src/front/metro.config.js

@@ -13,5 +13,6 @@ defaultConfig.transformer.getTransformOptions = async () => ({
 });
 defaultConfig.resolver.extraNodeModules.common = commonDir;
 defaultConfig.watchFolders.push(commonDir);
+defaultConfig.resolver.assetExts.push('lazy');
 
 module.exports = defaultConfig;

src/front/scripts/eas-build-pre-install.sh

@@ -37,3 +37,7 @@ echo "CLIENT_ID=$CLIENT_ID" >> .env
 echo "FACEBOOK_OAUTH_CLIENT_ID=$FACEBOOK_OAUTH_CLIENT_ID" >> .env
 echo "GOOGLE_OAUTH_CLIENT_ID_IOS=$GOOGLE_OAUTH_CLIENT_ID_IOS" >> .env
 echo "GOOGLE_OAUTH_CLIENT_ID_ANDROID=$GOOGLE_OAUTH_CLIENT_ID_ANDROID" >> .env
+
+echo "installing npm deps for the common package"
+cd ../common
+npm i

src/front/scripts/updateConstants.mjs

@@ -20,7 +20,7 @@ const db = knex({
 
 const constants = await getConstants(db);
 
-const jsonFilePath = resolve(`${__dirname}/../services/constants.json`);
+const jsonFilePath = resolve(`${__dirname}/../services/constants.json.lazy`);
 
 fs.writeFileSync(jsonFilePath, JSON.stringify(constants, null, 2));
 

src/front/services/constants.js

@@ -1,6 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Asset } from 'expo-asset';
+import * as FileSystem from 'expo-file-system';
 import * as Sentry from 'sentry-expo';
-import bundledConstants from './constants.json';
 
 const KEY = '@roadkill_constants';
 export async function updateConstants(constants) {
@@ -21,7 +22,13 @@ export async function getConstants() {
       return JSON.parse(constants);
     } else {
       // fallback to bundled data
-      return bundledConstants;
+      const asset = Asset.fromModule(require('./constants.json.lazy'));
+
+      await asset.downloadAsync();
+
+      const json = await FileSystem.readAsStringAsync(asset.localUri);
+
+      return JSON.parse(json);
     }
   } catch (error) {
     Sentry.Native.captureException(error);

src/front/storybook/stories/SearchList.stories.js

@@ -1,10 +1,10 @@
 import { storiesOf } from '@storybook/react-native';
 import { Text } from '@ui-kitten/components';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ScrollView } from 'react-native-gesture-handler';
 import SearchList from '../../components/reports/SearchList';
 import RootView from '../../components/RootView';
-import constants from '../../services/constants.json';
+import { getConstants } from '../../services/constants.js';
 
 const emptyObject = {
   species_id: null,
@@ -16,17 +16,37 @@ const emptyObject = {
   family: null,
 };
 
+const useConstants = () => {
+  const [constants, setConstants] = useState(null);
+  useEffect(() => {
+    const init = async () => {
+      const constants = await getConstants();
+      setConstants(constants);
+    };
+
+    init();
+  }, []);
+
+  return constants;
+};
+
 const ItemsAsObjects = () => {
   return React.createElement(() => {
     const [value, setValue] = React.useState(emptyObject);
+    const constants = useConstants();
+    const [items, setItems] = React.useState(null);
 
-    const items = constants.species.slice(0, 18);
+    React.useEffect(() => {
+      if (constants) {
+        setItems(constants.species.slice(0, 18));
+      }
+    }, [constants]);
 
     return (
       <RootView>
         <ScrollView style={{ paddingHorizontal: 25 }}>
           <Text category="c1">{`value: ${JSON.stringify(value, null, '  ')}`}</Text>
-          <SearchList value={value} onChange={setValue} items={items} placeholder="items as objects" />
+          {items ? <SearchList value={value} onChange={setValue} items={items} placeholder="items as objects" /> : null}
         </ScrollView>
       </RootView>
     );
@@ -37,13 +57,20 @@ const ManyObjectItems = () => {
   return React.createElement(() => {
     const [value, setValue] = React.useState(emptyObject);
 
-    const items = constants.species;
+    const constants = useConstants();
+    const [items, setItems] = React.useState(null);
+
+    React.useEffect(() => {
+      if (constants) {
+        setItems(constants.species);
+      }
+    }, [constants]);
 
     return (
       <RootView>
         <ScrollView style={{ paddingHorizontal: 25 }}>
           <Text category="c1">{`value: ${JSON.stringify(value, null, '  ')}`}</Text>
-          <SearchList value={value} onChange={setValue} items={items} placeholder="many objects" />
+          {items ? <SearchList value={value} onChange={setValue} items={items} placeholder="many objects" /> : null}
         </ScrollView>
       </RootView>
     );
@@ -54,13 +81,21 @@ const ManyStringItems = () => {
   return React.createElement(() => {
     const [value, setValue] = React.useState(null);
 
-    const items = [...new Set(constants.species.map((item) => item.family))].sort();
+    const constants = useConstants();
+    const [items, setItems] = React.useState(null);
+
+    React.useEffect(() => {
+      if (constants) {
+        setItems([...new Set(constants.species.map((item) => item.family))].sort());
+        setItems(constants.species);
+      }
+    }, [constants]);
 
     return (
       <RootView>
         <ScrollView style={{ paddingHorizontal: 25 }}>
           <Text category="c1">{`value: ${JSON.stringify(value, null, '  ')}`}</Text>
-          <SearchList value={value} onChange={setValue} items={items} placeholder="many strings" />
+          {items ? <SearchList value={value} onChange={setValue} items={items} placeholder="many strings" /> : null}
         </ScrollView>
       </RootView>
     );