Prevent flickering on start

This commit is contained in:
Arnaud Vergnet 2020-04-19 17:33:25 +02:00
parent 8c7ceb84fc
commit b85dab627a

30
App.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Platform, StatusBar, YellowBox} from 'react-native'; import {Platform, StatusBar, View, YellowBox} from 'react-native';
import LocaleManager from './src/managers/LocaleManager'; import LocaleManager from './src/managers/LocaleManager';
import AsyncStorageManager from "./src/managers/AsyncStorageManager"; import AsyncStorageManager from "./src/managers/AsyncStorageManager";
import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider"; import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
@ -17,6 +17,7 @@ import Update from "./src/constants/Update";
import ConnectionManager from "./src/managers/ConnectionManager"; import ConnectionManager from "./src/managers/ConnectionManager";
import URLHandler from "./src/utils/URLHandler"; import URLHandler from "./src/utils/URLHandler";
import {setSafeBounceHeight} from "react-navigation-collapsible"; import {setSafeBounceHeight} from "react-navigation-collapsible";
import * as Animatable from 'react-native-animatable';
YellowBox.ignoreWarnings([ // collapsible headers cause this warning, just ignore as it is not an issue YellowBox.ignoreWarnings([ // collapsible headers cause this warning, just ignore as it is not an issue
'Non-serializable values were found in the navigation state', 'Non-serializable values were found in the navigation state',
@ -173,7 +174,6 @@ export default class App extends React.Component<Props, State> {
showUpdate: this.storageManager.preferences.updateNumber.current !== Update.number.toString(), showUpdate: this.storageManager.preferences.updateNumber.current !== Update.number.toString(),
showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled() && this.storageManager.preferences.showAprilFoolsStart.current === '1', showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled() && this.storageManager.preferences.showAprilFoolsStart.current === '1',
}); });
SplashScreen.hide();
} }
/** /**
@ -191,11 +191,27 @@ export default class App extends React.Component<Props, State> {
} else { } else {
return ( return (
<PaperProvider theme={this.state.currentTheme}> <PaperProvider theme={this.state.currentTheme}>
<NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}> <View style={{
<Stack.Navigator headerMode="none"> flex: 1,
<Stack.Screen name="Root" component={this.createDrawerNavigator}/> backgroundColor: ThemeManager.getCurrentTheme().colors.background
</Stack.Navigator> }}>
</NavigationContainer> <Animatable.View
style={{flex: 1,}}
animation={"fadeIn"}
duration={1000}
useNativeDriver
onAnimationBegin={() => {
// delay the hiding even 1ms is enough to prevent flickering
setTimeout(() => SplashScreen.hide(), 1);
}}
>
<NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Root" component={this.createDrawerNavigator}/>
</Stack.Navigator>
</NavigationContainer>
</Animatable.View>
</View>
</PaperProvider> </PaperProvider>
); );
} }