How to navigate to another screen in response to native when fetch is done

I am new to React Native and am trying to create my first app. So I have a question:

I have 2 screens (using interactive navigation). The first screen displays the render of the application logo with a counter (from the native database) and output to the server simultaneously. And I only need to go to another screen after fetching and processing the response. All I found in the react-navigation docs is a button solution, but that's not my case. Also I dont want to use ActivityIndicatorIOS (app must be correct for Android).

Please help me figure out what should I do?

Thank you so much!

+3


source to share


1 answer


Just call the navigation function and then the fetch or handle error callback respectively in catch.

Each screen in a responsive-navigation gets a navigation prop. You can use the navigate function to navigate to any screen. Something like that



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

      

+5


source







All Articles