Show splash screen when app not finished loading instead of basic view

App.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import {Root, StyleProvider} from 'native-base';
-import {View} from 'react-native'
 import AppNavigator from './navigation/AppNavigator';
 import ThemeManager from './utils/ThemeManager';
 import LocaleManager from './utils/LocaleManager';
@@ -13,7 +12,7 @@ import * as Font from 'expo-font';
 import {clearThemeCache} from 'native-base-shoutem-theme';
 import AsyncStorageManager from "./utils/AsyncStorageManager";
 import CustomIntroSlider from "./components/CustomIntroSlider";
-import {Notifications} from 'expo';
+import {AppLoading} from 'expo';
 import NotificationsManager from "./utils/NotificationsManager";
 
 type Props = {};
@@ -37,29 +36,6 @@ export default class App extends React.Component<Props, State> {
         LocaleManager.initTranslations();
     }
 
-    /**
-     * Loads FetchedData before components are mounted, like fonts and themes
-     * @returns {Promise}
-     */
-    async componentWillMount() {
-        // Wait for custom fonts to be loaded before showing the app
-        await Font.loadAsync({
-            'Roboto': require('native-base/Fonts/Roboto.ttf'),
-            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
-        });
-        await AsyncStorageManager.getInstance().loadPreferences();
-        ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
-        await NotificationsManager.initExpoToken();
-        console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
-        // Only show intro if this is the first time starting the app
-        this.setState({
-            isLoading: false,
-            currentTheme: ThemeManager.getCurrentTheme(),
-            showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1'
-            // showIntro: true
-        });
-    }
-
     /**
      * Updates the theme and clears the cache to force reloading the app colors. Need to edit shoutem theme for ti to work
      */
@@ -78,12 +54,42 @@ export default class App extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0');
     }
 
+    async loadAssetsAsync() {
+        console.log('Starting loading assets...');
+        // Wait for custom fonts to be loaded before showing the app
+        await Font.loadAsync({
+            'Roboto': require('native-base/Fonts/Roboto.ttf'),
+            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
+        });
+        await AsyncStorageManager.getInstance().loadPreferences();
+        ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
+        await NotificationsManager.initExpoToken();
+        console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
+    }
+
+    onLoadFinished() {
+        // Only show intro if this is the first time starting the app
+        console.log('Finished loading');
+        this.setState({
+            isLoading: false,
+            currentTheme: ThemeManager.getCurrentTheme(),
+            showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1'
+            // showIntro: true
+        });
+    }
+
     /**
      * Renders the app based on loading state
      */
     render() {
         if (this.state.isLoading) {
-            return <View/>;
+            return (
+                <AppLoading
+                    startAsync={this.loadAssetsAsync}
+                    onFinish={() => this.onLoadFinished()}
+                    onError={console.warn}
+                />
+            );
         }
         if (this.state.showIntro) {
             return <CustomIntroSlider onDone={() => this.onIntroDone()}/>;

app.json

@@ -10,7 +10,7 @@
       "android",
       "web"
     ],
-    "version": "0.0.9",
+    "version": "0.0.10",
     "orientation": "portrait",
     "primaryColor": "#be1522",
     "icon": "./assets/android.icon.png",