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

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

@@ -29,9 +29,8 @@ export default class SecondTabScreen extends Component {
29 29
   onNavigatorEvent(event) {
30 30
     // handle a deep link
31 31
     if (event.type == 'DeepLink') {
32
-
33 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 35
       if (parts[0] == 'tab2') {
37 36
         // handle the link somehow, usually run a this.props.navigator command

+ 5
- 0
docs/index.html View File

@@ -48,4 +48,9 @@
48 48
 <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
49 49
 <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
50 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 56
 </html>

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

@@ -1,74 +1,85 @@
1 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 13
 	```groovy
11 14
 	include ':react-native-navigation'
12 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 19
 	```groovy
17 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 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 38
 	```java
36 39
 	import com.reactnativenavigation.NavigationApplication;
37
-	
40
+
38 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 50
 	```java
52 51
 	import com.reactnativenavigation.NavigationApplication;
53
-	
52
+
54 53
 	public class MainApplication extends NavigationApplication {
55
- 
56
-    	@Override
54
+
55
+		@Override
57 56
 		public boolean isDebug() {
58 57
 			// Make sure you are using BuildConfig from your own application
59 58
 			return BuildConfig.DEBUG;
60 59
 		}
61 60
 
62
-	    @Override
63
-	    public List<ReactPackage> createAdditionalReactPackages() {
61
+		@Override
62
+		public List<ReactPackage> createAdditionalReactPackages() {
63
+
64 64
 		// Add additional packages you require here
65 65
 		return Arrays.<ReactPackage>asList(
66
-           	    new InsertPackageName() // For example: new VectorIconsPackage()
67
-       		);
66
+			// eg. new VectorIconsPackage()
67
+		);
68
+
68 69
 		// No need to add RnnPackage and MainReactPackage
69 70
 		// Simply return null if you do not have additional packages:
70 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,19 +1,17 @@
1 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,15 +128,6 @@ this.props.navigator.handleDeepLink({
128 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 131
 ## setButtons(params = {})
141 132
 
142 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,7 +157,7 @@ Set the nav bar subtitle dynamically. If your subtitle doesn't change during run
166 157
 
167 158
 ```js
168 159
 this.props.navigator.setSubTitle({
169
-  subtitle: "Connecting..." 
160
+  subtitle: "Connecting..."
170 161
 });
171 162
 ```
172 163
 
@@ -236,6 +227,15 @@ this.props.navigator.toggleNavBar({
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 239
 # Screen Visibility
240 240
 Listen to screen visibility events in onNavigatorEvent handler:
241 241
 
@@ -259,3 +259,21 @@ export default class ExampleScreen extends Component {
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,7 +24,8 @@ Navigation.startTabBasedApp({
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 29
 ```js
29 30
 Navigation.startTabBasedApp({
30 31
   tabs: [...],

+ 83
- 0
docs/sw.js View File

@@ -0,0 +1,83 @@
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,12 +1,12 @@
1 1
 # Top Level API
2 2
 
3
-### `Navigation`
3
+## Navigation
4 4
 
5 5
 ```js
6 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 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,7 +18,7 @@ Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
18 18
 Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
19 19
 ```
20 20
 
21
-#### `startTabBasedApp(params)`
21
+## startTabBasedApp(params)
22 22
 
23 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,10 +58,12 @@ Navigation.startTabBasedApp({
58 58
   },
59 59
   drawer: { // optional, add this if you want a side menu drawer in your app
60 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 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 68
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
67 69
   },
@@ -70,10 +72,7 @@ Navigation.startTabBasedApp({
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 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,10 +86,12 @@ Navigation.startSingleScreenApp({
87 86
   },
88 87
   drawer: { // optional, add this if you want a side menu drawer in your app
89 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 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 96
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
96 97
   },
@@ -99,7 +100,7 @@ Navigation.startSingleScreenApp({
99 100
 });
100 101
 ```
101 102
 
102
-#### `showModal(params = {})`
103
+## showModal(params = {})
103 104
 
104 105
 Show a screen as a modal.
105 106
 
@@ -114,7 +115,7 @@ Navigation.showModal({
114 115
 });
115 116
 ```
116 117
 
117
-#### `dismissModal(params = {})`
118
+## dismissModal(params = {})
118 119
 
119 120
 Dismiss the current modal.
120 121
 
@@ -124,7 +125,7 @@ Navigation.dismissModal({
124 125
 });
125 126
 ```
126 127
 
127
-#### `dismissAllModals(params = {})`
128
+## dismissAllModals(params = {})
128 129
 
129 130
 Dismiss all the current modals at the same time.
130 131
 
@@ -134,7 +135,7 @@ Navigation.dismissAllModals({
134 135
 });
135 136
 ```
136 137
 
137
-#### `showLightBox(params = {})`
138
+## showLightBox(params = {})
138 139
 
139 140
 Show a screen as a lightbox.
140 141
 
@@ -149,7 +150,7 @@ Navigation.showLightBox({
149 150
 });
150 151
 ```
151 152
 
152
-#### `dismissLightBox(params = {})`
153
+## dismissLightBox(params = {})
153 154
 
154 155
 Dismiss the current lightbox.
155 156
 
@@ -157,7 +158,7 @@ Dismiss the current lightbox.
157 158
 Navigation.dismissLightBox();
158 159
 ```
159 160
 
160
-#### `registerScreen(screenID, generator)`
161
+## registerScreen(screenID, generator)
161 162
 
162 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,4 +1,4 @@
1
-# Usage 
1
+# Usage
2 2
 
3 3
 If you don't like reading, just jump into the fully working example projects:
4 4
 
@@ -15,6 +15,7 @@ This would normally go in your `index.ios.js`
15 15
 import { Navigation } from 'react-native-navigation';
16 16
 
17 17
 import { registerScreens } from './screens';
18
+
18 19
 registerScreens(); // this is where you register all of your app's screens
19 20
 
20 21
 // start the app
@@ -40,7 +41,7 @@ Navigation.startTabBasedApp({
40 41
 
41 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 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