|
|
|
|
1
|
|
1
|
|
2
|
# Usage
|
2
|
# Usage
|
3
|
|
3
|
|
4
|
-- If you don't like reading, just jump into the fully working [playground](https://github.com/wix/react-native-navigation/tree/v2/playground) project. All feature are implemented there and it's the basis for the e2e tests.
|
|
|
|
|
4
|
+- If you don't like reading, just jump into the fully working [playground](https://github.com/wix/react-native-navigation/tree/v2/playground) project. All features are implemented there and it's the basis for the e2e tests.
|
5
|
- We fully support redux, mobx and other state management libraries. See the integration tests [here](https://github.com/wix/react-native-navigation/tree/v2/integration).
|
5
|
- We fully support redux, mobx and other state management libraries. See the integration tests [here](https://github.com/wix/react-native-navigation/tree/v2/integration).
|
6
|
- Navigation is written with `TypeScript` and shipped with the type definitions alongside the transpiled JS code. Use an IDE that supports it like VSCode or Webstorm to enjoy API autocompletion.
|
6
|
- Navigation is written with `TypeScript` and shipped with the type definitions alongside the transpiled JS code. Use an IDE that supports it like VSCode or Webstorm to enjoy API autocompletion.
|
7
|
-- Take a loot at this excellent showcase app [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp). (using v1 of React Native Navigation with redux).
|
|
|
|
|
7
|
+- Take a look at this excellent showcase app [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp). (using v1 of React Native Navigation with redux).
|
8
|
|
8
|
|
9
|
## The Basics
|
9
|
## The Basics
|
10
|
|
10
|
|
|
|
|
|
178
|
|
178
|
|
179
|
The `didAppear` and `didDisappear` functions are lifecycle callbacks that are called by React Native Navigation on the component when it appears and disappears.
|
179
|
The `didAppear` and `didDisappear` functions are lifecycle callbacks that are called by React Native Navigation on the component when it appears and disappears.
|
180
|
|
180
|
|
181
|
-These are similar to react's `componentDidMount` and `componentWillUnmount` but are related to the actual visibility of a component to the user. While the component is `mounted` as soon as it's part of a layout, it is not always `visible` (for example when another screen is `pushed` on top of it), and therefore some performance optimizations measures are taken by React Native Navigation.
|
|
|
|
|
181
|
+These are similar to react's `componentDidMount` and `componentWillUnmount`, but are related to the actual visibility of a component to the user. While the component is `mounted` as soon as it's part of a layout, it is not always `visible` (for example, when another screen is `pushed` on top of it), and therefore React Native Navigation takes some performance optimizations.
|
182
|
|
182
|
|
183
|
-They are also useful for a lot of use cases, for example starting and stopping an animation while the component is shown onscreen.
|
|
|
|
|
183
|
+They are also useful for a lot of use cases, for example starting and stopping an animation while the component is shown on-screen.
|
184
|
|
184
|
|
185
|
> They are implemented by iOS's viewDidAppear/viewDidDisappear and Android's ViewTreeObserver visibility detection
|
185
|
> They are implemented by iOS's viewDidAppear/viewDidDisappear and Android's ViewTreeObserver visibility detection
|
186
|
|
186
|
|
187
|
-To use them simply implement them in your component like any other react lifecycle function:
|
|
|
|
|
187
|
+To use them, simply implement them in your component like any other react lifecycle function:
|
188
|
|
188
|
|
189
|
```js
|
189
|
```js
|
190
|
class LifecycleScreenExample extends Component {
|
190
|
class LifecycleScreenExample extends Component {
|