Browse Source

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

keplyx 2 years ago
parent
commit
75ab575322
2 changed files with 31 additions and 25 deletions
  1. 30
    24
      App.js
  2. 1
    1
      app.json

+ 30
- 24
App.js View File

@@ -2,7 +2,6 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Root, StyleProvider} from 'native-base';
5
-import {View} from 'react-native'
6 5
 import AppNavigator from './navigation/AppNavigator';
7 6
 import ThemeManager from './utils/ThemeManager';
8 7
 import LocaleManager from './utils/LocaleManager';
@@ -13,7 +12,7 @@ import * as Font from 'expo-font';
13 12
 import {clearThemeCache} from 'native-base-shoutem-theme';
14 13
 import AsyncStorageManager from "./utils/AsyncStorageManager";
15 14
 import CustomIntroSlider from "./components/CustomIntroSlider";
16
-import {Notifications} from 'expo';
15
+import {AppLoading} from 'expo';
17 16
 import NotificationsManager from "./utils/NotificationsManager";
18 17
 
19 18
 type Props = {};
@@ -38,10 +37,25 @@ export default class App extends React.Component<Props, State> {
38 37
     }
39 38
 
40 39
     /**
41
-     * Loads FetchedData before components are mounted, like fonts and themes
42
-     * @returns {Promise}
40
+     * Updates the theme and clears the cache to force reloading the app colors. Need to edit shoutem theme for ti to work
43 41
      */
44
-    async componentWillMount() {
42
+    updateTheme() {
43
+        this.setState({
44
+            currentTheme: ThemeManager.getCurrentTheme()
45
+        });
46
+        clearThemeCache();
47
+    }
48
+
49
+    /**
50
+     * Callback when user ends the intro. Save in preferences to avaoid showing back the slides
51
+     */
52
+    onIntroDone() {
53
+        this.setState({showIntro: false});
54
+        AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0');
55
+    }
56
+
57
+    async loadAssetsAsync() {
58
+        console.log('Starting loading assets...');
45 59
         // Wait for custom fonts to be loaded before showing the app
46 60
         await Font.loadAsync({
47 61
             'Roboto': require('native-base/Fonts/Roboto.ttf'),
@@ -51,7 +65,11 @@ export default class App extends React.Component<Props, State> {
51 65
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
52 66
         await NotificationsManager.initExpoToken();
53 67
         console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
68
+    }
69
+
70
+    onLoadFinished() {
54 71
         // Only show intro if this is the first time starting the app
72
+        console.log('Finished loading');
55 73
         this.setState({
56 74
             isLoading: false,
57 75
             currentTheme: ThemeManager.getCurrentTheme(),
@@ -61,29 +79,17 @@ export default class App extends React.Component<Props, State> {
61 79
     }
62 80
 
63 81
     /**
64
-     * Updates the theme and clears the cache to force reloading the app colors. Need to edit shoutem theme for ti to work
65
-     */
66
-    updateTheme() {
67
-        this.setState({
68
-            currentTheme: ThemeManager.getCurrentTheme()
69
-        });
70
-        clearThemeCache();
71
-    }
72
-
73
-    /**
74
-     * Callback when user ends the intro. Save in preferences to avaoid showing back the slides
75
-     */
76
-    onIntroDone() {
77
-        this.setState({showIntro: false});
78
-        AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0');
79
-    }
80
-
81
-    /**
82 82
      * Renders the app based on loading state
83 83
      */
84 84
     render() {
85 85
         if (this.state.isLoading) {
86
-            return <View/>;
86
+            return (
87
+                <AppLoading
88
+                    startAsync={this.loadAssetsAsync}
89
+                    onFinish={() => this.onLoadFinished()}
90
+                    onError={console.warn}
91
+                />
92
+            );
87 93
         }
88 94
         if (this.state.showIntro) {
89 95
             return <CustomIntroSlider onDone={() => this.onIntroDone()}/>;

+ 1
- 1
app.json View File

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

Loading…
Cancel
Save