Browse Source

Copyediting for Usage.md (#3017)

I made the text a little more punchy and easy to read.
John Gorenfeld 6 years ago
parent
commit
deceeecb0e
1 changed files with 15 additions and 14 deletions
  1. 15
    14
      docs/docs/Usage.md

+ 15
- 14
docs/docs/Usage.md View File

@@ -1,9 +1,9 @@
1 1
 
2 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 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).
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.
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).
6
+- Navigation is written with `TypeScript` and shipped with the type definitions alongside the transpiled JS code. To enjoy API autocompletion, use an IDE that supports it, like VSCode or Webstorm.
7 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 9
 ## The Basics
@@ -14,7 +14,7 @@ import { Navigation } from 'react-native-navigation';
14 14
 ```
15 15
 
16 16
 ### registerComponent(screenID, generator)
17
-Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component` or `React.PureComponent`. It can also be a HOC to provide context (or provide a redux store). Similar to ReactNative's `AppRegistry.registerComponent`.
17
+Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component` or `React.PureComponent`. It can also be a HOC to provide context (or a Redux store). Analgous to ReactNative's `AppRegistry.registerComponent`.
18 18
 
19 19
 ```js
20 20
 Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
@@ -22,7 +22,9 @@ Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => Welcom
22 22
 
23 23
 
24 24
 ### onAppLaunched(callback)
25
-This event is called once the app is launched. Initialise the app with the layout you want. This creates the native layout hierarchy, loads the react components into the `component` by name, after which the app is ready for user interaction.
25
+This event is called once the app is launched. It's where you will initialize the app with the layout you want, via the SetRoot command. This creates the native layout hierarchy, loading React components into the `component` by name. 
26
+
27
+Afterwards, the app is ready for user interaction. (Common gotcha: Be sure not to run setRoot before onAppLaunched() has fired!)
26 28
 
27 29
 ```js
28 30
 Navigation.events().onAppLaunched(() => {
@@ -36,12 +38,11 @@ Navigation.events().onAppLaunched(() => {
36 38
 
37 39
 ## Layout Examples
38 40
 
39
-The layout api is completely open in terms of what you can construct with it.
40
-
41
-You can compose arbitrary native layout hierarchies, although some weird edge cases may not be possible or produce errors. In such cases, open an issue so that we either fix it or warn in dev time.
41
+The possibilities of the RNN layout API are wide open in terms of what you can construct with it: stacks, tabs and drawers in many combinations.
42 42
 
43
+You can compose arbitrary native layout hierarchies (although some weird edge cases may not be possible or produce errors). In such cases, open an issue so that we either fix it or warn in dev time.
43 44
 
44
-For all layout types see [API](/api/README).
45
+For all possible layout types see [API](/api/README).
45 46
 
46 47
 
47 48
 ### Single page app with two side menus:
@@ -158,7 +159,7 @@ Navigation.pop(this.props.componentId);
158 159
 ```
159 160
 
160 161
 ### showModal
161
-Show a screen as a modal. (not part of the stack)
162
+Show a screen as a modal. (Note: not part of the stack)
162 163
 
163 164
 ```js
164 165
 Navigation.showModal({
@@ -176,15 +177,15 @@ Navigation.dismissModal(this.props.componentId);
176 177
 
177 178
 ## Screen Lifecycle
178 179
 
179
-The `componentDidAppear` and `componentDidDisappear` functions are lifecycle callbacks that are called by React Native Navigation on the component when it appears and disappears. 
180
+The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears. 
180 181
 
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
+Similar to React's `componentDidMount` and `componentWillUnmount`, what's different is that they represent whether the user can actually see the component in question -- and not just whether it's been mounted or not. Because of the way React Native Navigation optimizes performance, a component is actually `mounted` as soon as it's part of a layout -- but it is not always `visible` (for example, when another screen is `pushed` on top of it).
182 183
 
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
+There are lots of use cases for these. For example: starting and stopping an animation while the component is shown on-screen.
184 185
 
185 186
 > They are implemented by iOS's viewDidAppear/viewDidDisappear and Android's ViewTreeObserver visibility detection
186 187
 
187
-To use them, simply implement them in your component like any other react lifecycle function:
188
+To use them, simply implement them in your component like any other React lifecycle function:
188 189
 
189 190
 ```js
190 191
 class LifecycleScreenExample extends Component {