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

This commit is contained in:
keplyx 2019-08-20 20:00:34 +02:00
parent f6c1b2ea8f
commit 75ab575322
2 changed files with 33 additions and 27 deletions

58
App.js
View file

@ -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()}/>;

View file

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