Browse Source

Modify functional components event listener example (#6256)

Using Navigation.events().bindComponent() to register event listeners in functional components leads to typing errors when using Typescript, as bindComponent method requires a React.Component<any> as first argument.

With registerComponentListener we achieve the exact same effect, but providing more appropiate typings for for its parameters, using NavigationComponentListener for the listener, and making componentId required.
Elizabeth Martín Campos 4 years ago
parent
commit
4ed200e277
No account linked to committer's email address
1 changed files with 3 additions and 3 deletions
  1. 3
    3
      website/docs/docs-functional-components.mdx

+ 3
- 3
website/docs/docs-functional-components.mdx View File

44
       }
44
       }
45
     };
45
     };
46
     // Register the listener to all events related to our component
46
     // Register the listener to all events related to our component
47
-    const unsubscribe = Navigation.events().bindComponent(listener, props.componentId);
47
+    const unsubscribe = Navigation.events().registerComponentListener(listener, props.componentId);
48
     return () => {
48
     return () => {
49
       // Make sure to unregister the listener during cleanup
49
       // Make sure to unregister the listener during cleanup
50
       unsubscribe.remove();
50
       unsubscribe.remove();
59
 }
59
 }
60
 ```
60
 ```
61
 
61
 
62
-Notice that in the example above, we call `Navigation.events().bindComponent()` to register our listener even though we're not binding any component. That's because our listener is registered with the `componentId` passed in the second argument.
62
+In the example above, our listener is registered with the `componentId` passed in the second argument, and will receive only its related events.
63
 
63
 
64
 :::tip
64
 :::tip
65
 [underscopeio/react-native-navigation-hooks](https://github.com/underscopeio/react-native-navigation-hooks) is a wonderful library which greatly simplifies usage with hooks by introducing dedicated hooks for each event. The following example, which is taken from their docs, shows how to listen to all appear events and a particular screen's appear events:
65
 [underscopeio/react-native-navigation-hooks](https://github.com/underscopeio/react-native-navigation-hooks) is a wonderful library which greatly simplifies usage with hooks by introducing dedicated hooks for each event. The following example, which is taken from their docs, shows how to listen to all appear events and a particular screen's appear events:
85
   )
85
   )
86
 }
86
 }
87
 ```
87
 ```
88
-:::
88
+:::