CODEWITHSUNDEEP
react-native
Jats1596
Jats1596

Reputation: 1215

Update data when returning from background mode in react native

Hi I'm using geolocation coordinates in react-native in order to display the users around me. I've implemented a pull-down to refresh that will let me refresh the list of users after I've changed position. How can I refresh the data when I comeback from the background mode ? 

  displayPosition = () => {
      this.watchId = Geolocation.getCurrentPosition(
        (position) => {
          let obj = {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null
          }
          this.setState(obj);
        },
        (error) => this.setState({ error: error.message }),
        { enableHighAccuracy: true, timeout: 200000, maximumAge: 1000},
      );
      if(this.state.latitude!=null){
        this.getData();
      }else{
        setTimeout(this.displayPosition.bind(this),200)
      }
      //console.log(this.state.latitude);
      //console.log(this.state.longitude);
  }

  handleRefresh = () => {
    this.setState (
      {
        refreshing: true,
      },
      () => {
        this.setState({refreshing: false});
        this.displayPosition();
        //this.getData();
      }
    );
  };


  componentDidMount() {
    this.displayPosition();
    //this.getData();
    this.props.navigation.setParams({ refresh: this._handleRefresh });
  }

  componentWillUnmount() {
    Geolocation.clearWatch(this.watchId);
  }

Thanks !

Upvotes: 1

Views: 930

Answers (1)

abhikumar22
abhikumar22

Reputation: 1814

You can add a listener for the same in react native.

There are total 4 listners for the same.

  1. willFocus - the screen will focus
  2. didFocus - the screen focused (if there was a transition, the transition completed)
  3. willBlur - the screen will be unfocused
  4. didBlur - the screen unfocused (if there was a transition, the transition completed)


Try the below code

componentWillMount(){
    const didFocusSubscription = this.props.navigation.addListener(
      'didFocus',
      payload => {
        console.warn('didFocus ', payload);
        # just write your code/call a method here which you want to execute when the app comes from background
        this.handleRefresh()
      }
    );
}

Dont forget to remove it when it is done.

componentWillUnmount(){
    didFocusSubscription.remove();
}

More you can read here. Thanks :)

Upvotes: 3

Related Questions