Skip to content

Commit ccb247d

Browse files
committed
Add <NavigationEvents/> to doc
1 parent 1684476 commit ccb247d

File tree

2 files changed

+43
-0
lines changed

2 files changed

+43
-0
lines changed

docs/navigation-events.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
id: navigation-events
3+
title: NavigationEvents reference
4+
sidebar_label: NavigationEvents
5+
---
6+
7+
`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.
8+
9+
### Component props
10+
11+
* `navigation` - navigation props (optional, defaults to reading from React context)
12+
* `onWillFocus` - event listener
13+
* `onDidFocus` - event listener
14+
* `onWillBlur` - event listener
15+
* `onDidBlur`: event listener
16+
17+
The event listener is the same as the imperative [`navigation.addListener(...)`](navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle) API.
18+
19+
### Example
20+
21+
```jsx harmony
22+
import React from 'react';
23+
import { View } from 'react-native';
24+
import { NavigationEvents } from 'react-navigation';
25+
26+
const MyScreen = () => (
27+
<View>
28+
<NavigationEvents
29+
onWillFocus={payload => console.log('will focus',payload)}
30+
onDidFocus={payload => console.log('did focus',payload)}
31+
onWillBlur={payload => console.log('will blur',payload)}
32+
onDidBlur={payload => console.log('did blur',payload)}
33+
/>
34+
{/*
35+
Your view code
36+
*/}
37+
</View>
38+
);
39+
40+
export default MyScreen;
41+
```

docs/navigation-prop.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,8 @@ The JSON payload:
138138
};
139139
```
140140

141+
You can also subscribe to navigation events declaratively with the [`<NavigationEvents/>`]((navigation-events.html)) component.
142+
141143
### `isFocused` - Query the focused state of the screen
142144

143145
Returns `true` if the screen is focused and `false` otherwise.

0 commit comments

Comments
 (0)