React-Native scren splash screen

Question

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

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

the class of sprint, I tried the following to see if directly already redirected:

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');   }

Answer 1

My first observation is that in your class code sprint you called the navigate('chat') function after a Return() call, which will make navigate never be called.

A solution modifying your code a little would be to let your function perform like this:

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 note that it is never good to keep 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 initial requests and other shipments which are made the moment your application is started. The best (and easiest to implement) way to ensure that your user will wait only as long as needed is using the React-Native-smart-splash-screen.