how to navigate to another screen in react native when fetch is done

Question

I'm new in React Native and trying create my first app. So I have a question:

I got 2 screens (using react-navigation). At first screen there is a render of app logo with spinner(from native-base) and fetch to the server at the same time. And I need to navigate to another screen only when fetch is over and responce is handled. All I found at react-navigation docs is a solution with button, but it's not my case. Also I don't want to use ActivityIndicatorIOS (app should be correct for Android).

Please help me understand what should I do?

Thanks a lot!

Answer 1

Just call the navigate function in then callback of the fetch or handle error appropriately in catch.

Every screen in react-navigation gets the navigation prop. You can use the navigate function to navigate to any screen. Something like this

class FirstScreen extends React.Component {
  static navigationOptions = {
    title: 'First',
  }
  componentDidMount(){
    const {navigate} = this.props.navigation;
    navigate('Second');
    fetch('http://apiserver').then( (response) => {
      navigate('Second');
    });
  }
  render() {
    return (
      <AppLogo />
    );
  }
}

const AppNavigator = StackNavigator({
  First: {
    screen: FirstScreen,
  },
  Second: {
    screen: SecondScreen,
  },
});