Added v2 docs (#1795)

README.md

@@ -6,8 +6,7 @@ We are rebuilding react-native-navigation
 
 - [Why?](#why-rebuild-react-native-navigation)
 - [Where is it standing now?](#current-status)
-- [Getting Started](#getting-started-with-v2)
-- [Usage](#usage)
+- [Documentation](https://wix.github.io/react-native-navigation/v2/)
 - [Contributing](CONTRIBUTING.md)
 
 ## Why Rebuild react-native-navigation?
@@ -109,257 +108,4 @@ Note:  v1 properties with names beginning with 'navBar' are replaced in v2 with
 | splitViewScreen       |     :x:  |    [Contribute](CONTRIBUTING.md)      | [Contribute](CONTRIBUTING.md)|
 
 
-Element tranisitions, adding buttons and styles are not yet implemented. [Contribute](CONTRIBUTING.md)
-
-## Getting started with v2
-If v2 supports everything you need for your app we encourage you to use it.
-
-### Installation
-1. Download react-native-navigation v2
-```bash
-npm install --save react-native-navigation@alpha
-```
-##### iOS
-2. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
-
-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))
-
-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/lib/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))
-
-5. In Xcode, under your project files, modify `AppDelegate.m`. add:
-
-`#import <ReactNativeNavigation/ReactNativeNavigation.h>`
-
-remove everything in the method didFinishLaunchingWithOptions and add:
-
-```
-NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
-[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
-```
-
-##### Android
-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/lib/android/app/')
-	```
-
-3. Update project dependencies in `android/app/build.gradle`.
-	```groovy
-	android {
-		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')
-	}
-	```
-
-4. In `MainActivity.java` it should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
-
-	This file can be located in `android/app/src/main/java/com/yourproject/`.
-
-	```java
-	import com.reactnativenavigation.NavigationActivity;
-
-	public class MainActivity extends NavigationActivity {
-
-	}
-	```
-
-	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
-		public boolean isDebug() {
-			// Make sure you are using BuildConfig from your own application
-			return BuildConfig.DEBUG;
-		}
-
-		protected List<ReactPackage> getPackages() {
-			// Add additional packages you require here
-			// No need to add RnnPackage and MainReactPackage
-			return Arrays.<ReactPackage>asList(
-				// eg. new VectorIconsPackage()
-			);
-		}
-	}
-	```
-
-	Make sure that `isDebug` methods is implemented.
-
-6. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
-	```xml
-	<application
-		android:name=".MainApplication"
-		...
-	/>
-## Usage
-### Top Screen API
-
-#### Navigation
-```js
-import Navigation from 'react-native-navigation';
-```
-#### Events - On App Launched
-How to initiate your app.
-
-```js
-Navigation.events().onAppLaunched(() => {
-    Navigation.setRoot({
-      container: {
-        name: 'navigation.playground.WelcomeScreen'
-      }
-    });
-  });
-```
-
-#### registerContainer(screenID, generator)
-Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
-```js
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-```
-
-#### setRoot({params})
-Start a Single page app with two side menus:
-```js
-Navigation.setRoot({
-      container: {
-        name: 'navigation.playground.WelcomeScreen'
-      },
-      sideMenu: {
-        left: {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a left side menu screen'
-            }
-          }
-        },
-        right: {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a right side menu screen'
-            }
-          }
-        }
-      }
-    });
-```
-Start a tab based app:
-```js
-Navigation.setRoot({
-      tabs: [
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is tab 1',
-              myFunction: () => 'Hello from a function!'
-            }
-          }
-        },
-        {
-          container: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is tab 2'
-            }
-          }
-        }
-      ]
-    });
-```
-### Screen API
-
-#### push(params)
-Push a new screen into this screen's navigation stack.
-```js
-Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.PushedScreen',
-      passProps: {}
-    });
-```
-#### pop(containerId)
-Pop the top screen from this screen's navigation stack.
-```js
-Navigation.pop(this.props.containerId);
-```
-#### popTo(params)
-```js
-Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
-```
-#### popToRoot()
-Pop all the screens until the root from this screen's navigation stack
-```js
-Navigation.popToRoot(this.props.containerId);
-```
-#### showModal(params = {})
-Show a screen as a modal.
-```js
-Navigation.showModal({
-      container: {
-        name: 'navigation.playground.ModalScreen',
-        passProps: {
-            key: 'value'
-        }
-      }
-    });
-```
-#### dismissModal(containerId)
-Dismiss modal.
-```js
-Navigation.dismissModal(this.props.containerId);
-```
-#### dismissAllModals()
-Dismiss all the current modals at the same time.
-```js
-Navigation.dismissAllModals();
-```
-#### Screen Lifecycle - didDisappear() and didAppear()
-
-The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
-
-```js
-class LifecycleScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      text: 'nothing yet'
-    };
-  }
-
-  didAppear() {
-    this.setState({ text: 'didAppear' });
-  }
-
-  didDisappear() {
-    alert('didDisappear');
-  }
-
-  componentWillUnmount() {
-    alert('componentWillUnmount');
-  }
-
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
-	<Text style={styles.h1}>{this.state.text}</Text>
-      </View>
-    );
-  }
-}
-```
+Element tranisitions, adding buttons and styles are not yet implemented. [Contribute](CONTRIBUTING.md)

docs/_sidebar.md

@@ -1 +1,17 @@
 - Getting started
+ - [Installation - iOS](/installation-ios)
+ - [Installation - Android](/installation-android)
+ - [Usage](/usage)
+<!-- 
+- Guide
+ - [Top Level API](/top-level-api)
+ - [Screen API](/screen-api)
+ - [Deep links](/deep-links)
+ - [Android Specific Use Cases](/android-specific-use-cases)
+ - [Third Party Libraries Support](/third-party-libraries-support)
+
+- Customization
+  - [Styling the Navigator](/styling-the-navigator)
+  - [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator)
+  - [Styling the Tab Bar](/styling-the-tab-bar)
+   -->

docs/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>React Native Navigation - truly native navigation for iOS and Android</title>
+    <meta name="description" content="React Native Navigation - truly native navigation for iOS and Android">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+    <link rel="shortcut icon" href="_images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="_images/favicon.ico" type="image/x-icon">
+</head>
+<body>
+<div id="app">
+    <img src="https://raw.githubusercontent.com/wix/react-native-navigation/master/logo.png"
+         alt="react-native-navigation logo">
+</div>
+</body>
+<script>
+    window.$docsify = {
+        repo: '',
+        name: 'React Native Navigation',
+        search: 'auto',
+        themeColor: '#21B8F0',
+        loadSidebar: true,
+        loadNavbar: true,
+        maxLevel: 4,
+        subMaxLevel: 2,
+        auto2top: true,
+        ga: 'UA-XXXXX-Y',
+        plugins: [
+            function (hook) {
+                var footer = [
+                    '<hr/>',
+                    '<footer class="Test">',
+                    `<span>Caught a mistake or want to contribute to the documentation? <a href="https://github.com/wix/react-native-navigation/tree/v2/docs" target="_blank">Edit documentation on Github!</a>.</span>`,
+                    '</footer>'
+                ].join('');
+
+                hook.afterEach(function (html) {
+                    return html + footer;
+                });
+            }
+        ]
+    };
+</script>
+<script src="//unpkg.com/docsify/lib/docsify.js"></script>
+<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

@@ -0,0 +1,76 @@
+# Android Installation
+
+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/lib/android/app/')
+	```
+
+3. Update project dependencies in `android/app/build.gradle`.
+	```groovy
+	android {
+		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')
+	}
+	```
+
+4. In `MainActivity.java` it should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
+
+	This file can be located in `android/app/src/main/java/com/yourproject/`.
+
+	```java
+	import com.reactnativenavigation.NavigationActivity;
+
+	public class MainActivity extends NavigationActivity {
+
+	}
+	```
+
+	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
+		public boolean isDebug() {
+			// Make sure you are using BuildConfig from your own application
+			return BuildConfig.DEBUG;
+		}
+
+		protected List<ReactPackage> getPackages() {
+			// Add additional packages you require here
+			// No need to add RnnPackage and MainReactPackage
+			return Arrays.<ReactPackage>asList(
+				// eg. new VectorIconsPackage()
+			);
+		}
+	}
+	```
+
+	Make sure that `isDebug` methods is implemented.
+
+6. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
+	```xml
+	<application
+		android:name=".MainApplication"
+		...
+	/>
+	```

docs/installation-ios.md

@@ -0,0 +1,24 @@
+# iOS Installation
+
+1. Install `react-native-navigation` latest stable version.
+
+    ```sh
+    yarn add react-native-navigation@latest
+    ```
+
+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))
+
+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))
+
+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))
+
+5. In Xcode, under your project files, modify `AppDelegate.m`. add:
+
+`#import <ReactNativeNavigation/ReactNativeNavigation.h>`
+
+remove everything in the method didFinishLaunchingWithOptions and add:
+
+```
+NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
+```

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/usage.md

@@ -0,0 +1,159 @@
+# Usage
+
+## Top Screen API
+
+### Navigation
+```js
+import Navigation from 'react-native-navigation';
+```
+### Events - On App Launched
+How to initiate your app.
+
+```js
+Navigation.events().onAppLaunched(() => {
+  Navigation.setRoot({
+    container: {
+      name: 'navigation.playground.WelcomeScreen'
+    }
+  });
+});
+```
+
+### registerContainer(screenID, generator)
+Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
+```js
+Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
+```
+
+### setRoot({params})
+Start a Single page app with two side menus:
+```js
+Navigation.setRoot({
+  container: {
+    name: 'navigation.playground.WelcomeScreen'
+  },
+  sideMenu: {
+    left: {
+      container: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is a left side menu screen'
+        }
+      }
+    },
+    right: {
+      container: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is a right side menu screen'
+        }
+      }
+    }
+  }
+});
+```
+Start a tab based app:
+```js
+Navigation.setRoot({
+  tabs: [
+    {
+      container: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is tab 1',
+          myFunction: () => 'Hello from a function!'
+        }
+      }
+    },
+    {
+      container: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is tab 2'
+        }
+      }
+    }
+  ]
+});
+```
+## Screen API
+
+### push(params)
+Push a new screen into this screen's navigation stack.
+```js
+Navigation.push(this.props.containerId, {
+  name: 'navigation.playground.PushedScreen',
+  passProps: {}
+});
+```
+### pop(containerId)
+Pop the top screen from this screen's navigation stack.
+```js
+Navigation.pop(this.props.containerId);
+```
+### popTo(params)
+```js
+Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
+```
+### popToRoot()
+Pop all the screens until the root from this screen's navigation stack
+```js
+Navigation.popToRoot(this.props.containerId);
+```
+### showModal(params = {})
+Show a screen as a modal.
+```js
+Navigation.showModal({
+  container: {
+    name: 'navigation.playground.ModalScreen',
+    passProps: {
+        key: 'value'
+    }
+  }
+});
+```
+### dismissModal(containerId)
+Dismiss modal.
+```js
+Navigation.dismissModal(this.props.containerId);
+```
+### dismissAllModals()
+Dismiss all the current modals at the same time.
+```js
+Navigation.dismissAllModals();
+```
+### Screen Lifecycle - didDisappear() and didAppear()
+
+The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
+
+```js
+class LifecycleScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: 'nothing yet'
+    };
+  }
+
+  didAppear() {
+    this.setState({ text: 'didAppear' });
+  }
+
+  didDisappear() {
+    alert('didDisappear');
+  }
+
+  componentWillUnmount() {
+    alert('componentWillUnmount');
+  }
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
+	      <Text style={styles.h1}>{this.state.text}</Text>
+      </View>
+    );
+  }
+}
+```