CODEWITHSUNDEEP
react-native
Jagadish Upadhyay
Jagadish Upadhyay

Reputation: 1264

Show loading when navigate from one view to another in react native

I am on React native 0.29 for android. I used navigator in my app so that user can navigate from one view to another. I want to know is there any way I can show a loading symbol when navigator is navigating from one view to another.

Upvotes: 2

Views: 3231

Answers (1)

Chris Geirman
Chris Geirman

Reputation: 9684

I assume that the reason you're navigation is delayed is because you're fetching data asynchronously to prepare the next view. This answer isn't going to be very helpful if you've just got a performance concern.

Anyway, I've followed this basic pattern, basically I set the loader to true, then after I have the data, I set the loader to false and pass the data along to the view as a prop. 

_handleLogin() {
    this.setState({
      isLoading: true,
    },
    () => 
      Api.getUser( username, password )
        .then( user => this._handleResponse( user ))
    );
  }

  _handleResponse( user ){
    this.setState({
      isLoading: false,
    })

    this.props.navigator.push({
      title: 'Home',
      component: Home,
      passProps: {
        user: user,
      }
    });
  }

Upvotes: 2

Related Questions