Browse Source

Update Docs (#1206)

* Fix documentation website link

* Update docs
June Domingo 7 years ago
parent
commit
7ff341a6cc

+ 3
- 0
docs/adding-buttons-to-the-navigator.md View File

23
       }
23
       }
24
     ]
24
     ]
25
   };
25
   };
26
+
26
   constructor(props) {
27
   constructor(props) {
27
     super(props);
28
     super(props);
28
     // if you want to listen on navigator events, set this up
29
     // if you want to listen on navigator events, set this up
29
     this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
30
     this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
30
   }
31
   }
32
+
31
   onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
33
   onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
32
     if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
34
     if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
33
       if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
35
       if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
38
       }
40
       }
39
     }
41
     }
40
   }
42
   }
43
+
41
   render() {
44
   render() {
42
     return (
45
     return (
43
       <View style={{flex: 1}}>...</View>
46
       <View style={{flex: 1}}>...</View>

+ 1
- 2
docs/deep-links.md View File

29
   onNavigatorEvent(event) {
29
   onNavigatorEvent(event) {
30
     // handle a deep link
30
     // handle a deep link
31
     if (event.type == 'DeepLink') {
31
     if (event.type == 'DeepLink') {
32
-
33
       const parts = event.link.split('/'); // Link parts
32
       const parts = event.link.split('/'); // Link parts
34
-      const payload = event.payload;       // (optional) The payload
33
+      const payload = event.payload; // (optional) The payload
35
 
34
 
36
       if (parts[0] == 'tab2') {
35
       if (parts[0] == 'tab2') {
37
         // handle the link somehow, usually run a this.props.navigator command
36
         // handle the link somehow, usually run a this.props.navigator command

+ 5
- 0
docs/index.html View File

48
 <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
48
 <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
49
 <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
49
 <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
50
 <script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
50
 <script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
51
+<script>
52
+  if (typeof navigator.serviceWorker !== 'undefined') {
53
+    navigator.serviceWorker.register('sw.js')
54
+  }
55
+</script>
51
 </html>
56
 </html>

+ 47
- 36
docs/installation-android.md View File

1
 # Android Installation
1
 # Android Installation
2
-First add `react-native-navigation` as an npm dependency: `yarn add react-native-navigation`
3
 
2
 
4
-----
3
+!> Make sure you are using **react-native** version >= 0.43. We also recommend using npm version >= 3
5
 
4
 
6
-* Make sure you are using react-native version 0.43 or above
7
- 
8
-1.  Add the following to your `settings.gradle` file located in the `android` folder:
5
+1. Install `react-native-navigation` latest stable version.
6
+
7
+	```sh
8
+	yarn add react-native-navigation@latest
9
+	```
10
+
11
+2. Add the following in `android/settings.gradle`.
9
 
12
 
10
 	```groovy
13
 	```groovy
11
 	include ':react-native-navigation'
14
 	include ':react-native-navigation'
12
 	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
15
 	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
13
 	```
16
 	```
14
-	
15
-2. Update project dependencies in `build.gradle` under `app` folder.
17
+
18
+3. Update project dependencies in `android/app/build.gradle`.
16
 	```groovy
19
 	```groovy
17
 	android {
20
 	android {
18
-	    compileSdkVersion 25
19
-	    buildToolsVersion "25.0.1"
20
-	    ...
21
+		compileSdkVersion 25
22
+		buildToolsVersion "25.0.1"
23
+		...
21
 	}
24
 	}
22
 
25
 
23
 	dependencies {
26
 	dependencies {
24
-	    compile fileTree(dir: "libs", include: ["*.jar"])
25
-	    compile "com.android.support:appcompat-v7:23.0.1"
26
-	    compile "com.facebook.react:react-native:+"
27
-	    compile project(':react-native-navigation')
27
+		compile fileTree(dir: "libs", include: ["*.jar"])
28
+		compile "com.android.support:appcompat-v7:23.0.1"
29
+		compile "com.facebook.react:react-native:+"
30
+		compile project(':react-native-navigation')
28
 	}
31
 	}
29
 	```
32
 	```
30
 
33
 
31
-3. Your `MainActivity` should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`. If you have any `react-native` related methods in your `MainActivity` you can safely delete them.
34
+4. In `MainActivity.java` it should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`.
35
+
36
+	This file can be located in `android/app/src/main/java/com/yourproject/`.
32
 
37
 
33
-4. Update the MainApplication file and update the `Application` element in `AndroidManifest.xml`
34
-	
35
 	```java
38
 	```java
36
 	import com.reactnativenavigation.NavigationApplication;
39
 	import com.reactnativenavigation.NavigationApplication;
37
-	
40
+
38
 	public class MainApplication extends NavigationApplication {
41
 	public class MainApplication extends NavigationApplication {
39
-	
42
+
40
 	}
43
 	}
41
 	```
44
 	```
42
-	
43
-	```xml
44
-	<application
45
-        android:name=".MainApplication"
46
-        ...
47
-        />
48
-	```
49
-5. Implement `isDebug` and `createAdditionalReactPackages` methods
50
 
45
 
46
+	If you have any **react-native** related methods, you can safely delete them.
47
+
48
+
49
+5. In `MainApplication.java`, add the following
51
 	```java
50
 	```java
52
 	import com.reactnativenavigation.NavigationApplication;
51
 	import com.reactnativenavigation.NavigationApplication;
53
-	
52
+
54
 	public class MainApplication extends NavigationApplication {
53
 	public class MainApplication extends NavigationApplication {
55
- 
56
-    	@Override
54
+
55
+		@Override
57
 		public boolean isDebug() {
56
 		public boolean isDebug() {
58
 			// Make sure you are using BuildConfig from your own application
57
 			// Make sure you are using BuildConfig from your own application
59
 			return BuildConfig.DEBUG;
58
 			return BuildConfig.DEBUG;
60
 		}
59
 		}
61
 
60
 
62
-	    @Override
63
-	    public List<ReactPackage> createAdditionalReactPackages() {
61
+		@Override
62
+		public List<ReactPackage> createAdditionalReactPackages() {
63
+
64
 		// Add additional packages you require here
64
 		// Add additional packages you require here
65
 		return Arrays.<ReactPackage>asList(
65
 		return Arrays.<ReactPackage>asList(
66
-           	    new InsertPackageName() // For example: new VectorIconsPackage()
67
-       		);
66
+			// eg. new VectorIconsPackage()
67
+		);
68
+
68
 		// No need to add RnnPackage and MainReactPackage
69
 		// No need to add RnnPackage and MainReactPackage
69
 		// Simply return null if you do not have additional packages:
70
 		// Simply return null if you do not have additional packages:
70
 		// return null;
71
 		// return null;
71
-	    }
72
+		}
72
 	}
73
 	}
73
 	```
74
 	```
74
-6. Run `react-native start`
75
+
76
+	Make sure that `isDebug` and `createAdditionalReactPackages` methods are implemented.
77
+
78
+6. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
79
+	```xml
80
+	<application
81
+		android:name=".MainApplication"
82
+		...
83
+	/>
84
+	```
85
+

+ 9
- 11
docs/installation-ios.md View File

1
 # iOS Installation
1
 # iOS Installation
2
-First add `react-native-navigation` as an npm dependency: `yarn add react-native-navigation`
3
 
2
 
4
-----
3
+!> Make sure you are using **react-native** version >= 0.43. We also recommend using npm version >= 3
5
 
4
 
6
- * Make sure you are using react-native version 0.43.0 or higher
5
+1. Install `react-native-navigation` latest stable version.
7
 
6
 
8
- * In your project folder run `npm install react-native-navigation@next --save`
9
-> Note: We recommend using npm ver 3+. If you insist on using npm ver 2 please notice that the location for react-native-controllers in node_modules will be under the react-native-navigation folder and you'll need to change the paths in Xcode below accordingly.
7
+    ```sh
8
+    yarn add react-native-navigation@latest
9
+    ```
10
 
10
 
11
-* In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
11
+2. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
12
 
12
 
13
-* In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
13
+3. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
14
 
14
 
15
-* In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-navigation/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
15
+4. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-navigation/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
16
 
16
 
17
-* In Xcode, under your project files, modify `AppDelegate.m` according to this [example](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m)
18
-
19
-* Run `react-native start`
17
+5. In Xcode, under your project files, modify `AppDelegate.m` according to this [example](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m)

+ 28
- 10
docs/screen-api.md View File

128
   Navigation.handleDeepLink(...);
128
   Navigation.handleDeepLink(...);
129
 ```
129
 ```
130
 
130
 
131
-## setOnNavigatorEvent(callback)
132
-
133
-Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
134
-
135
-```js
136
-// this.onNavigatorEvent will be our handler
137
-this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
138
-```
139
-
140
 ## setButtons(params = {})
131
 ## setButtons(params = {})
141
 
132
 
142
 Set buttons dynamically on the navigator. If your buttons don't change during runtime, see "Adding buttons to the navigator" below to add them using `static navigatorButtons = {...};`.
133
 Set buttons dynamically on the navigator. If your buttons don't change during runtime, see "Adding buttons to the navigator" below to add them using `static navigatorButtons = {...};`.
166
 
157
 
167
 ```js
158
 ```js
168
 this.props.navigator.setSubTitle({
159
 this.props.navigator.setSubTitle({
169
-  subtitle: "Connecting..." 
160
+  subtitle: "Connecting..."
170
 });
161
 });
171
 ```
162
 ```
172
 
163
 
236
 });
227
 });
237
 ```
228
 ```
238
 
229
 
230
+## setOnNavigatorEvent(callback)
231
+
232
+Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
233
+
234
+```js
235
+// this.onNavigatorEvent will be our handler
236
+this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
237
+```
238
+
239
 # Screen Visibility
239
 # Screen Visibility
240
 Listen to screen visibility events in onNavigatorEvent handler:
240
 Listen to screen visibility events in onNavigatorEvent handler:
241
 
241
 
259
   }
259
   }
260
 }
260
 }
261
 ```
261
 ```
262
+
263
+# Listening to tab selected events
264
+In order to listen to `bottomTabSelected` event, set an `onNavigatorEventListener` on screens that are pushed to BottomTab. The event is dispatched to the top most screen pushed to the selected tab's stack.
265
+
266
+```js
267
+export default class ExampleScreen extends Component {
268
+  constructor(props) {
269
+    super(props);
270
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
271
+  }
272
+
273
+  onNavigatorEvent(event) {
274
+	if (event.id === 'bottomTabSelected') {
275
+	  console.log('Tab selected!');
276
+	}
277
+  }
278
+}
279
+```

+ 2
- 1
docs/styling-the-tab-bar.md View File

24
 }
24
 }
25
 ```
25
 ```
26
 
26
 
27
-> *Note:* On Android, add BottomTabs styles to `AppStyle`:
27
+?> On Android, add BottomTabs styles to `AppStyle`:
28
+
28
 ```js
29
 ```js
29
 Navigation.startTabBasedApp({
30
 Navigation.startTabBasedApp({
30
   tabs: [...],
31
   tabs: [...],

+ 83
- 0
docs/sw.js View File

1
+/* ===========================================================
2
+ * docsify sw.js
3
+ * ===========================================================
4
+ * Copyright 2016 @huxpro
5
+ * Licensed under Apache 2.0
6
+ * Register service worker.
7
+ * ========================================================== */
8
+
9
+const RUNTIME = 'docsify'
10
+const HOSTNAME_WHITELIST = [
11
+  self.location.hostname,
12
+  'fonts.gstatic.com',
13
+  'fonts.googleapis.com',
14
+  'unpkg.com'
15
+]
16
+
17
+// The Util Function to hack URLs of intercepted requests
18
+const getFixedUrl = (req) => {
19
+  var now = Date.now()
20
+  var url = new URL(req.url)
21
+
22
+  // 1. fixed http URL
23
+  // Just keep syncing with location.protocol
24
+  // fetch(httpURL) belongs to active mixed content.
25
+  // And fetch(httpRequest) is not supported yet.
26
+  url.protocol = self.location.protocol
27
+
28
+  // 2. add query for caching-busting.
29
+  // Github Pages served with Cache-Control: max-age=600
30
+  // max-age on mutable content is error-prone, with SW life of bugs can even extend.
31
+  // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
32
+  // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
33
+  if (url.hostname === self.location.hostname) {
34
+    url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
35
+  }
36
+  return url.href
37
+}
38
+
39
+/**
40
+ *  @Lifecycle Activate
41
+ *  New one activated when old isnt being used.
42
+ *
43
+ *  waitUntil(): activating ====> activated
44
+ */
45
+self.addEventListener('activate', event => {
46
+  event.waitUntil(self.clients.claim())
47
+})
48
+
49
+/**
50
+ *  @Functional Fetch
51
+ *  All network requests are being intercepted here.
52
+ *
53
+ *  void respondWith(Promise<Response> r)
54
+ */
55
+self.addEventListener('fetch', event => {
56
+  // Skip some of cross-origin requests, like those for Google Analytics.
57
+  if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
58
+    // Stale-while-revalidate
59
+    // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
60
+    // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
61
+    const cached = caches.match(event.request)
62
+    const fixedUrl = getFixedUrl(event.request)
63
+    const fetched = fetch(fixedUrl, { cache: 'no-store' })
64
+    const fetchedCopy = fetched.then(resp => resp.clone())
65
+
66
+    // Call respondWith() with whatever we get first.
67
+    // If the fetch fails (e.g disconnected), wait for the cache.
68
+    // If there’s nothing in cache, wait for the fetch.
69
+    // If neither yields a response, return offline pages.
70
+    event.respondWith(
71
+      Promise.race([fetched.catch(_ => cached), cached])
72
+        .then(resp => resp || fetched)
73
+        .catch(_ => { /* eat any errors */ })
74
+    )
75
+
76
+    // Update the cache with the version we fetched (only for ok status)
77
+    event.waitUntil(
78
+      Promise.all([fetchedCopy, caches.open(RUNTIME)])
79
+        .then(([response, cache]) => response.ok && cache.put(event.request, response))
80
+        .catch(_ => { /* eat any errors */ })
81
+    )
82
+  }
83
+})

+ 18
- 17
docs/top-level-api.md View File

1
 # Top Level API
1
 # Top Level API
2
 
2
 
3
-### `Navigation`
3
+## Navigation
4
 
4
 
5
 ```js
5
 ```js
6
 import { Navigation } from 'react-native-navigation';
6
 import { Navigation } from 'react-native-navigation';
7
 ```
7
 ```
8
 
8
 
9
-#### `registerComponent(screenID, generator, store = undefined, Provider = undefined)`
9
+## registerComponent(screenID, generator, store = undefined, Provider = undefined)
10
 
10
 
11
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component`.
11
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component`.
12
 
12
 
18
 Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
18
 Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
19
 ```
19
 ```
20
 
20
 
21
-#### `startTabBasedApp(params)`
21
+## startTabBasedApp(params)
22
 
22
 
23
 Change your app root into an app based on several tabs (usually 2-5), a very common pattern in iOS (like Facebook app or the iOS Contacts app). Every tab has its own navigation stack with a native nav bar.
23
 Change your app root into an app based on several tabs (usually 2-5), a very common pattern in iOS (like Facebook app or the iOS Contacts app). Every tab has its own navigation stack with a native nav bar.
24
 
24
 
58
   },
58
   },
59
   drawer: { // optional, add this if you want a side menu drawer in your app
59
   drawer: { // optional, add this if you want a side menu drawer in your app
60
     left: { // optional, define if you want a drawer from the left
60
     left: { // optional, define if you want a drawer from the left
61
-      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
61
+      screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
62
+      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
62
     },
63
     },
63
     right: { // optional, define if you want a drawer from the right
64
     right: { // optional, define if you want a drawer from the right
64
-      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
65
+      screen: 'example.SecondSideMenu', // unique ID registered with Navigation.registerScreen
66
+      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
65
     },
67
     },
66
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
68
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
67
   },
69
   },
70
 });
72
 });
71
 ```
73
 ```
72
 
74
 
73
-##### Listening to tab selected events
74
-In order to listen to `bottomTabSelected` event, set an `onNavigatorEventListener` on screens that are pushed to BottomTab. The event is dispatched to the top most screen pushed to the selected tab's stack.
75
-
76
-#### `startSingleScreenApp(params)`
75
+## startSingleScreenApp(params)
77
 
76
 
78
 Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
77
 Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
79
 
78
 
87
   },
86
   },
88
   drawer: { // optional, add this if you want a side menu drawer in your app
87
   drawer: { // optional, add this if you want a side menu drawer in your app
89
     left: { // optional, define if you want a drawer from the left
88
     left: { // optional, define if you want a drawer from the left
90
-      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
89
+      screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
90
+      passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
91
     },
91
     },
92
     right: { // optional, define if you want a drawer from the right
92
     right: { // optional, define if you want a drawer from the right
93
-      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
93
+      screen: 'example.SecondSideMenu', // unique ID registered with Navigation.registerScreen
94
+      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
94
     },
95
     },
95
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
96
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
96
   },
97
   },
99
 });
100
 });
100
 ```
101
 ```
101
 
102
 
102
-#### `showModal(params = {})`
103
+## showModal(params = {})
103
 
104
 
104
 Show a screen as a modal.
105
 Show a screen as a modal.
105
 
106
 
114
 });
115
 });
115
 ```
116
 ```
116
 
117
 
117
-#### `dismissModal(params = {})`
118
+## dismissModal(params = {})
118
 
119
 
119
 Dismiss the current modal.
120
 Dismiss the current modal.
120
 
121
 
124
 });
125
 });
125
 ```
126
 ```
126
 
127
 
127
-#### `dismissAllModals(params = {})`
128
+## dismissAllModals(params = {})
128
 
129
 
129
 Dismiss all the current modals at the same time.
130
 Dismiss all the current modals at the same time.
130
 
131
 
134
 });
135
 });
135
 ```
136
 ```
136
 
137
 
137
-#### `showLightBox(params = {})`
138
+## showLightBox(params = {})
138
 
139
 
139
 Show a screen as a lightbox.
140
 Show a screen as a lightbox.
140
 
141
 
149
 });
150
 });
150
 ```
151
 ```
151
 
152
 
152
-#### `dismissLightBox(params = {})`
153
+## dismissLightBox(params = {})
153
 
154
 
154
 Dismiss the current lightbox.
155
 Dismiss the current lightbox.
155
 
156
 
157
 Navigation.dismissLightBox();
158
 Navigation.dismissLightBox();
158
 ```
159
 ```
159
 
160
 
160
-#### `registerScreen(screenID, generator)`
161
+## registerScreen(screenID, generator)
161
 
162
 
162
 This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
163
 This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
163
 
164
 

+ 3
- 2
docs/usage.md View File

1
-# Usage 
1
+# Usage
2
 
2
 
3
 If you don't like reading, just jump into the fully working example projects:
3
 If you don't like reading, just jump into the fully working example projects:
4
 
4
 
15
 import { Navigation } from 'react-native-navigation';
15
 import { Navigation } from 'react-native-navigation';
16
 
16
 
17
 import { registerScreens } from './screens';
17
 import { registerScreens } from './screens';
18
+
18
 registerScreens(); // this is where you register all of your app's screens
19
 registerScreens(); // this is where you register all of your app's screens
19
 
20
 
20
 // start the app
21
 // start the app
40
 
41
 
41
 #### Step 2 - Register all of your screen components
42
 #### Step 2 - Register all of your screen components
42
 
43
 
43
-Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered. We recommend doing this in a central place, like [`screens/index.js`](example/src/screens/index.js).
44
+Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered. We recommend doing this in a central place, like [screens/index.js](https://github.com/wix/react-native-navigation/blob/master/example/src/screens/index.ios.js).
44
 
45
 
45
 > Note: Since your screens will potentially be bundled with other packages, your registered name must be **unique**! Follow a namespacing convention like `packageName.ScreenName`.
46
 > Note: Since your screens will potentially be bundled with other packages, your registered name must be **unique**! Follow a namespacing convention like `packageName.ScreenName`.
46
 
47