React Native Splash Screen - react-native

Question

I am trying to create a Splash Screen that loads first when the app starts. I am creating it with redux persist. The initial state is the Splash screen. The Splash has a function to check if its first time running. The setTopLevelNavigator redirects to the persisted screen. After the Splash Screen, it should direct to the persisted screen. I am not sure on how I can implement to load the splash first. Any help would be great!
render() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<AppWithNavigationState
ref={ref => setTopLevelNavigator(ref)}
/>
</PersistGate>
</Provider>
);
}
This is the Splash Screen
class SplashScreen extends Component {
constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(0),
};
}
async componentDidMount() {
const {
settings,
navigation,
} = this.props;
if (settings.firstRun) {
const { fadeAnim } = this.state;
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 2000,
},
).start();
} else {
const { fadeAnim } = this.state;
fadeAnim.setValue(1);
Animated.timing(
fadeAnim,
{
toValue: 0.01,
duration: 1000,
easing: Easing.inOut(Easing.ease),
},
).start();
setTimeout(() => {
navigation.replace('Home');
}, 1000);
}
}
onScroll =() => {
const { navigation } = this.props;
navigation.navigate('Intro');
}
render() {
const { fadeAnim } = this.state;
return (
<TouchableWithoutFeedback
onPress={this.onScroll}
>
<View style={styles.container}>
{ Platform.OS === 'ios'
? <StatusBar barStyle="light-content" />
: <StatusBar hidden />
}
<ScrollView
horizontal
onMomentumScrollBegin={this.onScroll}
>
<AnimateImage
fadeAnim={fadeAnim}
/>
</ScrollView>
</View>
</TouchableWithoutFeedback>
);
}
}

Answer 1

Just set the SplashScreen component to the loading prop.
<PersistGate loading={<SplashScreen />} persistor={persistor}>

Answer 2

My opinion is that you should use a module such as react-native-splash-screen to hide the native splash screen when you need to. This will give you a much smoother result when starting your app, cause the user will only see the launch screen and then your react native app, while in your current way the user sees the default launch screen, then a white screen and then your Splash Screen. I know that this is not how it should work, but the transition between the launch screen and the react native app is unfortunately not smooth at all.
Basically you need to
Create the launch screen assets (see this tutorial for more information)
Add the npm module mentioned above
Pass the SplashScreen you already created in the PersistGate loading attribute like this: loading={SplashScreen}
The SplashScreen component you created doesn't need to render
anything and you can hide the native splash screen on component
unmount
componentWillUnmount() {
SplashScreen.hide();
}