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 ponentWillAppear()?

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

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 ponentWillAppear()?

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

• javascript
• react-native
• lifecycle
• react-navigation

• which lifecycle event will be called every time when a screen is presented render. But you can use ponentDidMount – Rajesh Commented Dec 4, 2017 at 6:31
• @Rajesh Are you sure that ponentDidMount will always be called when I goBack to view? – Vishal Commented Dec 4, 2017 at 6:32
• If the ponent is rendered again, yes. If you are using css to show/hide, then not sure. – Rajesh Commented Dec 4, 2017 at 6:33
• @Rajesh I am not using css but I use react-navigation to navigate between the screens – Vishal Commented Dec 4, 2017 at 6:34
• Just check, on back button, if the screenA's render is called ot not. If not, you might have to pass a callback for back button. – Rajesh Commented Dec 4, 2017 at 6:35

3 Answers 3

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

In your Component A:

ponentDidMount = () => {
  this._ponentFocused();

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

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

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

React Navigation docs - Lifecycle

When you navigate from one screen to another, the first screen will not be unmounted, but still on the stack, just hide in the background.

What you need might be ponentDidFocus, but it's currently in design not avaiable yet, see react-native open issue #51.

You can try this alternative way: react-navigation-addons. With this you can have events focus & blur which may suit your needs.

If you use react-native-navigation, you can listen for appearance events: https://wix.github.io/react-native-navigation/#/screen-api?id=listen-to-visibility-events-globally