Splash screen React-native

Question

Splash screen React-native

Navigation

#1 by (0 votes)

0

I created a component class with my splash screen. And I want that after a few seconds, the navigation goes to the other screen, I already have configured the navigation

const SimpleApp = StackNavigator({   Home: {screen: BrunoDantas},  
  Chat: {screen: ChatScreen},
});

the sprint class, I tried the following to see if it was already redirecting:

render() {

    const { navigate } = this.props.navigation;

    return (

      <View style={styles.container}>

        <View style={styles.logo}>
          <Image source={require('./img/logoimg.png')} style={styles.imglogo} />
          <Image source={require('./img/logonome.png')} style={styles.imgnome}  />
        </View>
      </View>

);

navigate('chat');   }

javascript react-native react

asked by anonymous 28.07.2017 / 03:12

1 answer

Does Linq generate this ID? How to recover? CSS Gradient Radial

score 0 · Accepted Answer

The first comment I make is that in your code of class sprint you called the navigate ('chat') function after a return () call, which will make navigate never called.

A solution modifying your code a little would let your function render this way:

render() {
    return (
      <View style={styles.container}>
        <View style={styles.logo}>
          <Image source={require('./img/logoimg.png')} style={styles.imglogo} />
          <Image source={require('./img/logonome.png')} style={styles.imgnome}  />
        </View>
      </View>

    );
}

And adding to the componentDidMount () function the following:

componentDidMount(){
    setTimeOut(()=>{
        const { navigate } = this.props.navigation;
        navigate('chat');
    },2000)
}

However it is important to point out that it is never good to leave your user waiting if there is nothing being processed in the background, the splash screen is a screen made to leave your user waiting for the initial requests and other uploads that are made the moment your application is started. The best (and easiest to implement) way to ensure that your user will only wait the time required is by using react-native-smart-splash-screen .