Which lifecycle event is called when a screen appears?

Question

Suppose I have two screens:

• Screen A
• Screen B

I am initially landed on Screen A. When I click on a Button I navigate to Screen B. When I press Back Button, I am again navigated to Screen A.

I want to call an action creator when I am navigated to Screen A as mentioned in above scenario.

I just want to know that which lifecycle event will be called every time when a screen is presented.

Isn't there some event like componentWillAppear()?

Note: I am using react-native with react-navigation for navigation.

Answer 1

This can now be done with plain react navigation via their listeners:

In your Component A:

componentDidMount = () => {
  this._componentFocused();

  this._sub = this.props.navigation.addListener(
    'didFocus',
    this._componentFocused
  );
}

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

_componentFocused = () => {
  this.setState({dataToShow});
}

React Navigation docs - Lifecycle