React-navigation: detect new screen is fully focused

Question

With current version of react-navigation, there are two ways to check if a screen is focused or not, by either (1) calling function isFocused of screen's prop navigation, or (2) hook the component to withNavigationFocused and retrieve prop isFocused.

However, both methods always return true when navigation starts. In my case, I need something triggering only when screen transition ends, i.e. new screen is fully focused. This is to deal with heavy-rendered children, such as camera or map, which should be rendered after screen transition to avoid slow transition animation.

Any idea how to achieve that?

Answer 1

You can try subscribing to the navigation lifecycle events, as described in the docs:

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

Another example usage in this repo