Leave screen callback React Navigation Tab Navigator

Question

I have a React Navigation Tab Component like this:

const RootNavigator=TabNavigator({
Home:{
    screen: Home,
    navigationOptions:{
        tabBarIcon: ({focused}) => (
            <Icon
                name={focused? 'ios-home':'ios-home-outline'}
                style={{color: '#464646'}}
                size={16}
            />
        )
    }
},
Notifications:{
    screen: Notifications,
    navigationOptions:{
        tabBarIcon: ({focused}) => (
            <TabNotifications focused={focused} />
        )
    }
}, {});

Is there a way to make a callback when leaving a screen?

In this case, I would like to perform a function when I leave the Notifications tab. Such as mark the notifications as seen and remove the badge indicator.

As of now, I am pulling the Notification icon from another component in order to show the number badge.

Thanks in advance.

Answer 1

One option is to use onNavigationStateChange to check the current change of the navigation and do the action you need to clear notifications etc.

onNavigationStateChange(prevState, newState, action)

Function that gets called every time navigation state managed by the navigator changes. It receives the previous state, the new state of the navigation and the action that issued state change. By default it prints state changes to the console.

Another option is to use addListener. This way you can subscribe to willFocus/didFocus or willBlur/didBlur events and do the action you need.

addListener - Subscribe to updates to navigation lifecycle

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

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

Example from the docs

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);
// Remove the listener when you are done
didBlurSubscription.remove();

// Payload
{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};

Answer 2

For those who want a third option, you could use the NavigationEvents component as suggested by the docs to listen to navigations hooks and to whatever you intended to do.

Edit: This is documentation for React Navigation 2.x, which is no longer actively maintained. For up-to-date documentation, see the latest version (6.x).

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your view code
    */}
  </View>
);

export default MyScreen;