CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigationreact-native-maps
HungrySoul
HungrySoul

Reputation: 1231

Reload screen when the tab is changed?

I have 2 tabs in my project- outer Tab and inner Tab. In my inner Tab I have maps and lists which shows markers and details.

Now I want to reload (fetch data) when i change the tab from either maps to lists or vice versa. I could only call them once ie first visit as i have been calling the API from component Will Mount(). How to recognise the tab movements and reload map?

Any lead would be greatly appreciated

Upvotes: 3

Views: 10604

Answers (2)

M Thomas
M Thomas

Reputation: 1192

Try use the useEffect hook to handle the component render change.

useEffect(() => {
//core logic for component rerender
}, [dataChangelistener]);

Upvotes: 1

Théo dvn
Théo dvn

Reputation: 940

I supposed you are using react-navigation. They recently introduced navigation listener in their API (willBlur, willFocus, didBlur and didFocus events).

Then, an idea would be to use those listeners in your screen to refresh the data you need.

Example:

class YourComponent extends Component {
  componentDidMount() {
    this.didFocusListener = this.props.navigation.addListener(
      'didFocus',
      () => { console.log('did focus') },
    );
  }

  componentWillUnmount() {
    this.didFocusListener.remove();
  }

  render() {
    return ( /* your render */ );
  }
}

Documentation: Subscribe to updates to navigation lifecycle

Upvotes: 11

Related Questions