React-native splash scren fabric

Question

React-native splash scren fabric

I created a component class with my screen of splash. And I want that after a few seconds, the navigation goes to the other screen, I have already set 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');   }

0

javascript react-native react

Author: novic, 2017-07-28

Source

1 answers

score 0 · Accepted Answer

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

A solution modifying your code a little would be to let your function render 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 point out that it is never good to leave your user waiting if there is nothing being rendered in the background, splash screen is a screen made to leave your user waiting for initial requests and other uploads that are made the moment your application starts. The best (and easiest to implement) way to ensure that your user will wait only as long as necessary is by using do react-Native-smart-splash-screen.