Update Docs (#1206)

* Fix documentation website link

* Update docs

docs/adding-buttons-to-the-navigator.md

@@ -23,11 +23,13 @@ class FirstTabScreen extends Component {
       }
     ]
   };
+
   constructor(props) {
     super(props);
     // if you want to listen on navigator events, set this up
     this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
   }
+
   onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
     if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
       if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
@@ -38,6 +40,7 @@ class FirstTabScreen extends Component {
       }
     }
   }
+
   render() {
     return (
       <View style={{flex: 1}}>...</View>

docs/deep-links.md

@@ -29,9 +29,8 @@ export default class SecondTabScreen extends Component {
   onNavigatorEvent(event) {
     // handle a deep link
     if (event.type == 'DeepLink') {
-
       const parts = event.link.split('/'); // Link parts
-      const payload = event.payload;       // (optional) The payload
+      const payload = event.payload; // (optional) The payload
 
       if (parts[0] == 'tab2') {
         // handle the link somehow, usually run a this.props.navigator command

docs/index.html

@@ -48,4 +48,9 @@
 <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
 <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
 <script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+<script>
+  if (typeof navigator.serviceWorker !== 'undefined') {
+    navigator.serviceWorker.register('sw.js')
+  }
+</script>
 </html>

docs/installation-android.md

@@ -1,74 +1,85 @@
 # Android Installation
-First add `react-native-navigation` as an npm dependency: `yarn add react-native-navigation`
 
-----
+!> Make sure you are using **react-native** version >= 0.43. We also recommend using npm version >= 3
 
-* Make sure you are using react-native version 0.43 or above
- 
-1.  Add the following to your `settings.gradle` file located in the `android` folder:
+1. Install `react-native-navigation` latest stable version.
+
+	```sh
+	yarn add react-native-navigation@latest
+	```
+
+2. Add the following in `android/settings.gradle`.
 
 	```groovy
 	include ':react-native-navigation'
 	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
 	```
-	
-2. Update project dependencies in `build.gradle` under `app` folder.
+
+3. Update project dependencies in `android/app/build.gradle`.
 	```groovy
 	android {
-	    compileSdkVersion 25
-	    buildToolsVersion "25.0.1"
-	    ...
+		compileSdkVersion 25
+		buildToolsVersion "25.0.1"
+		...
 	}
 
 	dependencies {
-	    compile fileTree(dir: "libs", include: ["*.jar"])
-	    compile "com.android.support:appcompat-v7:23.0.1"
-	    compile "com.facebook.react:react-native:+"
-	    compile project(':react-native-navigation')
+		compile fileTree(dir: "libs", include: ["*.jar"])
+		compile "com.android.support:appcompat-v7:23.0.1"
+		compile "com.facebook.react:react-native:+"
+		compile project(':react-native-navigation')
 	}
 	```
 
-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.
+4. In `MainActivity.java` it should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`.
+
+	This file can be located in `android/app/src/main/java/com/yourproject/`.
 
-4. Update the MainApplication file and update the `Application` element in `AndroidManifest.xml`
-	
 	```java
 	import com.reactnativenavigation.NavigationApplication;
-	
+
 	public class MainApplication extends NavigationApplication {
-	
+
 	}
 	```
-	
-	```xml
-	<application
-        android:name=".MainApplication"
-        ...
-        />
-	```
-5. Implement `isDebug` and `createAdditionalReactPackages` methods
 
+	If you have any **react-native** related methods, you can safely delete them.
+
+
+5. In `MainApplication.java`, add the following
 	```java
 	import com.reactnativenavigation.NavigationApplication;
-	
+
 	public class MainApplication extends NavigationApplication {
- 
-    	@Override
+
+		@Override
 		public boolean isDebug() {
 			// Make sure you are using BuildConfig from your own application
 			return BuildConfig.DEBUG;
 		}
 
-	    @Override
-	    public List<ReactPackage> createAdditionalReactPackages() {
+		@Override
+		public List<ReactPackage> createAdditionalReactPackages() {
+
 		// Add additional packages you require here
 		return Arrays.<ReactPackage>asList(
-           	    new InsertPackageName() // For example: new VectorIconsPackage()
-       		);
+			// eg. new VectorIconsPackage()
+		);
+
 		// No need to add RnnPackage and MainReactPackage
 		// Simply return null if you do not have additional packages:
 		// return null;
-	    }
+		}
 	}
 	```
-6. Run `react-native start`
+
+	Make sure that `isDebug` and `createAdditionalReactPackages` methods are implemented.
+
+6. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
+	```xml
+	<application
+		android:name=".MainApplication"
+		...
+	/>
+	```
+

docs/installation-ios.md

@@ -1,19 +1,17 @@
 # iOS Installation
-First add `react-native-navigation` as an npm dependency: `yarn add react-native-navigation`
 
-----
+!> Make sure you are using **react-native** version >= 0.43. We also recommend using npm version >= 3
 
- * Make sure you are using react-native version 0.43.0 or higher
+1. Install `react-native-navigation` latest stable version.
 
- * In your project folder run `npm install react-native-navigation@next --save`
-> 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.
+    ```sh
+    yarn add react-native-navigation@latest
+    ```
 
-* 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))
+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))
 
-* 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))
+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))
 
-* 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))
+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))
 
-* 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)
-
-* Run `react-native start`
+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)

docs/screen-api.md

@@ -128,15 +128,6 @@ this.props.navigator.handleDeepLink({
   Navigation.handleDeepLink(...);
 ```
 
-## setOnNavigatorEvent(callback)
-
-Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
-
-```js
-// this.onNavigatorEvent will be our handler
-this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-```
-
 ## setButtons(params = {})
 
 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
 
 ```js
 this.props.navigator.setSubTitle({
-  subtitle: "Connecting..." 
+  subtitle: "Connecting..."
 });
 ```
 
@@ -236,6 +227,15 @@ this.props.navigator.toggleNavBar({
 });
 ```
 
+## setOnNavigatorEvent(callback)
+
+Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
+
+```js
+// this.onNavigatorEvent will be our handler
+this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+```
+
 # Screen Visibility
 Listen to screen visibility events in onNavigatorEvent handler:
 
@@ -259,3 +259,21 @@ export default class ExampleScreen extends Component {
   }
 }
 ```
+
+# Listening to tab selected events
+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.
+
+```js
+export default class ExampleScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+  }
+
+  onNavigatorEvent(event) {
+	if (event.id === 'bottomTabSelected') {
+	  console.log('Tab selected!');
+	}
+  }
+}
+```

docs/styling-the-tab-bar.md

@@ -24,7 +24,8 @@ Navigation.startTabBasedApp({
 }
 ```
 
-> *Note:* On Android, add BottomTabs styles to `AppStyle`:
+?> On Android, add BottomTabs styles to `AppStyle`:
+
 ```js
 Navigation.startTabBasedApp({
   tabs: [...],

docs/sw.js

@@ -0,0 +1,83 @@
+/* ===========================================================
+ * docsify sw.js
+ * ===========================================================
+ * Copyright 2016 @huxpro
+ * Licensed under Apache 2.0
+ * Register service worker.
+ * ========================================================== */
+
+const RUNTIME = 'docsify'
+const HOSTNAME_WHITELIST = [
+  self.location.hostname,
+  'fonts.gstatic.com',
+  'fonts.googleapis.com',
+  'unpkg.com'
+]
+
+// The Util Function to hack URLs of intercepted requests
+const getFixedUrl = (req) => {
+  var now = Date.now()
+  var url = new URL(req.url)
+
+  // 1. fixed http URL
+  // Just keep syncing with location.protocol
+  // fetch(httpURL) belongs to active mixed content.
+  // And fetch(httpRequest) is not supported yet.
+  url.protocol = self.location.protocol
+
+  // 2. add query for caching-busting.
+  // Github Pages served with Cache-Control: max-age=600
+  // max-age on mutable content is error-prone, with SW life of bugs can even extend.
+  // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
+  // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
+  if (url.hostname === self.location.hostname) {
+    url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
+  }
+  return url.href
+}
+
+/**
+ *  @Lifecycle Activate
+ *  New one activated when old isnt being used.
+ *
+ *  waitUntil(): activating ====> activated
+ */
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim())
+})
+
+/**
+ *  @Functional Fetch
+ *  All network requests are being intercepted here.
+ *
+ *  void respondWith(Promise<Response> r)
+ */
+self.addEventListener('fetch', event => {
+  // Skip some of cross-origin requests, like those for Google Analytics.
+  if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
+    // Stale-while-revalidate
+    // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
+    // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
+    const cached = caches.match(event.request)
+    const fixedUrl = getFixedUrl(event.request)
+    const fetched = fetch(fixedUrl, { cache: 'no-store' })
+    const fetchedCopy = fetched.then(resp => resp.clone())
+
+    // Call respondWith() with whatever we get first.
+    // If the fetch fails (e.g disconnected), wait for the cache.
+    // If there’s nothing in cache, wait for the fetch.
+    // If neither yields a response, return offline pages.
+    event.respondWith(
+      Promise.race([fetched.catch(_ => cached), cached])
+        .then(resp => resp || fetched)
+        .catch(_ => { /* eat any errors */ })
+    )
+
+    // Update the cache with the version we fetched (only for ok status)
+    event.waitUntil(
+      Promise.all([fetchedCopy, caches.open(RUNTIME)])
+        .then(([response, cache]) => response.ok && cache.put(event.request, response))
+        .catch(_ => { /* eat any errors */ })
+    )
+  }
+})

docs/top-level-api.md

@@ -1,12 +1,12 @@
 # Top Level API
 
-### `Navigation`
+## Navigation
 
 ```js
 import { Navigation } from 'react-native-navigation';
 ```
 
-#### `registerComponent(screenID, generator, store = undefined, Provider = undefined)`
+## registerComponent(screenID, generator, store = undefined, Provider = undefined)
 
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component`.
 
@@ -18,7 +18,7 @@ Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
 Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
 ```
 
-#### `startTabBasedApp(params)`
+## startTabBasedApp(params)
 
 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.
 
@@ -58,10 +58,12 @@ Navigation.startTabBasedApp({
   },
   drawer: { // optional, add this if you want a side menu drawer in your app
     left: { // optional, define if you want a drawer from the left
-      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
+      screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
+      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
     },
     right: { // optional, define if you want a drawer from the right
-      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
+      screen: 'example.SecondSideMenu', // unique ID registered with Navigation.registerScreen
+      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
     },
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
   },
@@ -70,10 +72,7 @@ Navigation.startTabBasedApp({
 });
 ```
 
-##### Listening to tab selected events
-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.
-
-#### `startSingleScreenApp(params)`
+## startSingleScreenApp(params)
 
 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
 
@@ -87,10 +86,12 @@ Navigation.startSingleScreenApp({
   },
   drawer: { // optional, add this if you want a side menu drawer in your app
     left: { // optional, define if you want a drawer from the left
-      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
+      screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
+      passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
     },
     right: { // optional, define if you want a drawer from the right
-      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
+      screen: 'example.SecondSideMenu', // unique ID registered with Navigation.registerScreen
+      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
     },
     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
   },
@@ -99,7 +100,7 @@ Navigation.startSingleScreenApp({
 });
 ```
 
-#### `showModal(params = {})`
+## showModal(params = {})
 
 Show a screen as a modal.
 
@@ -114,7 +115,7 @@ Navigation.showModal({
 });
 ```
 
-#### `dismissModal(params = {})`
+## dismissModal(params = {})
 
 Dismiss the current modal.
 
@@ -124,7 +125,7 @@ Navigation.dismissModal({
 });
 ```
 
-#### `dismissAllModals(params = {})`
+## dismissAllModals(params = {})
 
 Dismiss all the current modals at the same time.
 
@@ -134,7 +135,7 @@ Navigation.dismissAllModals({
 });
 ```
 
-#### `showLightBox(params = {})`
+## showLightBox(params = {})
 
 Show a screen as a lightbox.
 
@@ -149,7 +150,7 @@ Navigation.showLightBox({
 });
 ```
 
-#### `dismissLightBox(params = {})`
+## dismissLightBox(params = {})
 
 Dismiss the current lightbox.
 
@@ -157,7 +158,7 @@ Dismiss the current lightbox.
 Navigation.dismissLightBox();
 ```
 
-#### `registerScreen(screenID, generator)`
+## registerScreen(screenID, generator)
 
 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.
 

docs/usage.md

@@ -1,4 +1,4 @@
-# Usage 
+# Usage
 
 If you don't like reading, just jump into the fully working example projects:
 
@@ -15,6 +15,7 @@ This would normally go in your `index.ios.js`
 import { Navigation } from 'react-native-navigation';
 
 import { registerScreens } from './screens';
+
 registerScreens(); // this is where you register all of your app's screens
 
 // start the app
@@ -40,7 +41,7 @@ Navigation.startTabBasedApp({
 
 #### Step 2 - Register all of your screen components
 
-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).
+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).
 
 > Note: Since your screens will potentially be bundled with other packages, your registered name must be **unique**! Follow a namespacing convention like `packageName.ScreenName`.