react-navigation: Detect when screen, tabbar is activated / appear / focus / blur

With react-navigation, you can do that in 2 steps:

1. Add listeners in componentDidMountor componentWillMount, to hook events

2. Remove listeners in componentWillUnmount, to avoid unexpected calling

API Reference Documents v3.x, v4.x, v5.x :

React-navigation v3.x, v4.x:

addListener - Subscribe to updates to navigation lifecycle

React Navigation emits events to screen components that subscribe to them:

• willFocus - the screen will focus
• didFocus - the screen focused (if there was a transition, the transition completed)
• willBlur - the screen will be unfocused
• didBlur - the screen unfocused (if there was a transition, the transition completed)

React-navigation 3.x, 4.x example:

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

Ref v4.x https://reactnavigation.org/docs/4.x/navigation-prop/#addlistener---subscribe-to-updates-to-navigation-lifecycle

UPDATED v5.x

The events had been changed in v5.x

Screens can add listeners on the navigation prop like in React Navigation. By default, there are 2 events available:

• focus - This event is emitted when the screen comes into focus
• blur - This event is emitted when the screen goes out of focus
• state (advanced) - This event is emitted when the navigator's state changes

Sample code from reactnavigation.org

class Profile extends React.Component {
  componentDidMount() {
    this._unsubscribe = navigation.addListener('focus', () => {
      // do something
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  render() {
    // Content of the component
  }
}

Ref v5.x: https://reactnavigation.org/docs/navigation-events

FOR V3.x and V4.x This might be late but this is how I solved it. See the code below. Don't forget to import withNavigation and wrap your export default withNavigation.

import { withNavigation } from "react-navigation";
 componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

export default withNavigation(Your Class Name);

FOR V5.x Please use this.

 componentDidMount(){
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("focus", () => {      
    // Call ur function here.. or add logic.     
    });
}

componentDidMount / componentWillUnmount does not work in all cases of navigation (like tabs).

You need to use addListener with events didFocus and didBlur to make such actions. See documentation for details