How to create splash screen inside react navigation without using any other library and plugin

user_10666002 0
Viewed 6175

I am building react-native app without using any framework like expo and other. I am trying to create splash screen inside react navigation without using any npm package and other library so my question is: how can i achieve this?

const StackNavigation = (props) => {
   return (
    <Stack.Navigator initialRouteName="Splash"  >
        <Stack.Screen name="Home" component={HomeScreen} options={({ navigation, route }) => 
    ({
            headerLeft: props => (
                <Icon
                    name='rowing'
                    color='#00aced'
                    onPress={() => navigation.openDrawer()}
                />

            )
        })} />
        <Stack.Screen name="Post" component={PostScreen} />
        <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown: false}}/>
    </Stack.Navigator>
);
}
react-redux react-native javascript
1 Answers

One issue with adding a splash screen by making use of only React-native side is that you'll find an ugly white screen every time you start the app, this white screen can last for 5-20 seconds. This is because when your app starts, it needs to load React-native to run your codes, during this period your codes haven't even started to run, hence the white screen.

However, if you don't care about the white screen, here's my solution it doesn't require react-navigation either, just show the splash screen in componentDidMount() or useEffect() with the desired delay time in setTimeout()

import React, {useState, useEffect} from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default function App() {

  const [splash, setSplash] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setSplash(false);
    }, 1000);
  }, []);

  return splash ? 
  (<View style={styles.container}>
  <Image style={styles.logo} source={require('./assets/snack-icon.png')} />
  </View>) : (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Home Screen
      </Text>
    </View>
  );
}

Here's the snack https://snack.expo.io/Y4ZfWkc9g

If you need to avoid the white screen you have to play around in Android Studio, thankfully there are are a few npm libraries that helps you to avoid this

https://github.com/zoontek/react-native-bootsplash

https://github.com/crazycodeboy/react-native-splash-screen

user_88512760
Related