You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/versioned_docs/version-3.x/action-after-focusing-screen.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -5,18 +5,18 @@ sidebar_label: Action After Focusing Screen
5
5
original_id: action-after-focusing-screen
6
6
---
7
7
8
-
In this guide, we will call an action on screen focusing. This is useful for making additional API calls when a user visits a particular screen in a Tab Navigator, or to track user events as they tap around our app.
8
+
In this guide we will call an action on screen focusing. This is useful for making additional API calls when a user revisits a particular screen in a Tab Navigator, or to track user events as they tap around our app.
9
9
10
10
There are two approaches to calling an action on screen focusing:
11
11
12
12
1. Using the `withNavigationFocus` higher order component provided by react-navigation.
13
13
2. Listening to the `'didFocus'` event with an event listener.
14
14
15
-
## Triggering an action with a higher order component
15
+
## Triggering an action with the `withNavigationFocus` higher order component
16
16
17
-
react-navigation provides a [higher order component](https://reactjs.org/docs/higher-order-components.html) that passes a`isFocused` to our component, along with the `navigation` object we'd normally get with `withNavigation`.
17
+
react-navigation provides a [higher order component](https://reactjs.org/docs/higher-order-components.html) that passes an`isFocused` prop to our component, along with the `navigation` object we'd normally get with `withNavigation`.
18
18
19
-
When the prop `isFocused` is passed to our component, it will pass `true` when the screen is focused and `false` when our component is no longer focused. This enables us to call functions on a user entering or leaving a screen.
19
+
When the `isFocused`prop is passed to our component, it will pass `true` when the screen is focused and `false` when our component is no longer focused. This enables us to call actions on a user entering or leaving a screen.
20
20
21
21
### Example
22
22
@@ -43,9 +43,9 @@ class TabScreen extends Component {
43
43
exportdefaultwithNavigationFocus(TabScreen);
44
44
```
45
45
46
-
This example is also documented in the `withNavigationFocus` API documentation.
46
+
This example is also documented in the <ahref="/docs/en/with-navigation-focus.html">`withNavigationFocus` API documentation</a>.
47
47
48
-
## Triggering an action with an event listener
48
+
## Triggering an action with a `'didFocus'` event listener
49
49
50
50
We can also listen to the `'didFocus'` event with an event listener. After setting up an event listener, we must also stop listening to the event when the screen is unmounted.
0 commit comments