Skip to main content
Version: 3.x

NavigationEvents reference

NavigationEvents is a React component providing a declarative API to subscribe to navigation events. It will subscribe to navigation events on mount, and unsubscribe on unmount.

Component props

  • navigation - navigation props (optional, defaults to reading from React context)
  • onWillFocus - event listener
  • onDidFocus - event listener
  • onWillBlur - event listener
  • onDidBlur - event listener

The event listener is the same as the imperative navigation.addListener(...) API.

Example

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;