Add NavigationPlayground Expo Demo (#1523)

* use react-navigation as dependency
* add expo based playground app
* name expo playground demo in the docs
* add ci task to deploy playground demo

packages/react-navigation/README.md

@@ -3,7 +3,7 @@
 
 *Learn once, navigate anywhere.*
 
-Browse the docs on [reactnavigation.org](https://reactnavigation.org/).
+Browse the docs on [reactnavigation.org](https://reactnavigation.org/) or try it out on [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
 
 ## Motivation
 

packages/react-navigation/circle.yml

@@ -21,7 +21,12 @@ jobs:
       - deploy:
           command: |
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
+              # deploy website
               cd website && yarn && cd ../
               yarn run build-docs
               ./scripts/deploy-website.sh
+
+              # deploy expo playground demo
+              yarn global add exp && exp login -u "$EXPO_USERNAME" -p "$EXPO_PASSWORD"
+              cd examples/ExpoNavigationPlayground && npm install && exp publish
             fi

packages/react-navigation/docs/api/navigators/DrawerNavigator.md

@@ -1,6 +1,6 @@
 # DrawerNavigator
 
-Used to easily set up a screen with a drawer navigation.
+Used to easily set up a screen with a drawer navigation. For a live example please see [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
 
 ```js
 class MyHomeScreen extends React.Component {

packages/react-navigation/docs/api/navigators/StackNavigator.md

@@ -164,3 +164,5 @@ The navigator component created by `StackNavigator(...)` takes the following pro
 ### Examples
 
 See the examples [SimpleStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/SimpleStack.js) and [ModalStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/ModalStack.js) which you can run locally as part of the [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground) app.
+
+You can view these examples directly on your phone by visiting [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).

packages/react-navigation/docs/api/navigators/TabNavigator.md

@@ -1,6 +1,6 @@
 # TabNavigator
 
-Used to easily set up a screen with several tabs with a TabRouter.
+Used to easily set up a screen with several tabs with a TabRouter. For a live example please see [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
 
 ```js
 class MyHomeScreen extends React.Component {

packages/react-navigation/examples/ExpoNavigationPlayground/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

packages/react-navigation/examples/ExpoNavigationPlayground/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

packages/react-navigation/examples/ExpoNavigationPlayground/.watchmanconfig

@@ -0,0 +1 @@
+{}

packages/react-navigation/examples/ExpoNavigationPlayground/exp.json

@@ -0,0 +1,24 @@
+{
+  "name": "NavigationPlayground",
+  "description": "Try out react-navigation now with this awesome playground",
+  "slug": "NavigationPlayground",
+  "privacy": "public",
+  "sdkVersion": "16.0.0",
+  "version": "1.0.0",
+  "orientation": "portrait",
+  "primaryColor": "#cccccc",
+  "icon": "./assets/icons/react-navigation.png",
+  "loading": {
+    "icon": "./assets/icons/react-navigation.png",
+    "hideExponentText": false
+  },
+  "packagerOpts": {
+    "assetExts": [
+      "ttf",
+      "mp4"
+    ]
+  },
+  "ios": {
+    "supportsTablet": true
+  }
+}

packages/react-navigation/examples/ExpoNavigationPlayground/main.js

@@ -0,0 +1,4 @@
+import Expo from 'expo';
+import App from 'NavigationPlayground/js/App';
+
+Expo.registerRootComponent(App);

packages/react-navigation/examples/ExpoNavigationPlayground/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "ExpoNavigationPlayground",
+  "version": "0.0.0",
+  "description": "Hello Expo!",
+  "author": null,
+  "private": true,
+  "main": "main.js",
+  "dependencies": {
+    "expo": "16.0.0",
+    "react": "16.0.0-alpha.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-16.0.0.tar.gz",
+    "NavigationPlayground": "file:../NavigationPlayground"
+  }
+}

packages/react-navigation/examples/NavigationPlayground/README.md

@@ -5,3 +5,5 @@ A playground for experimenting with react-navigation in a pure-JS React Native a
 ## Usage
 
 Please see the [Contributors Guide](https://github.com/react-community/react-navigation/blob/master/docs/guides/Contributors.md#development) for instructions on running these example apps.
+
+You can view this example application directly on your phone by visiting [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).

packages/react-navigation/examples/NavigationPlayground/package.json

@@ -8,12 +8,12 @@
   "dependencies": {
     "react": "16.0.0-alpha.6",
     "react-native": "^0.44.0",
-    "react-native-vector-icons": "^4.1.1"
+    "react-native-vector-icons": "^4.1.1",
+    "react-navigation": "file:../.."
   },
   "devDependencies": {
     "babel-jest": "^20.0.1",
     "jest": "^20.0.1",
-    "react-navigation": "file:../..",
     "react-test-renderer": "^15.5.4"
   },
   "jest": {

packages/react-navigation/website/src/AppFrame.js

@@ -21,6 +21,13 @@ const NavigationLinks = ({ navigation, className, reverse }) => {
       );
     }),
 
+    <a
+      href="https://exp.host/@react-navigation/NavigationPlayground"
+      key="demo"
+    >
+      Demo
+    </a>,
+
     <a href="https://github.com/react-community/react-navigation" key="github">
       GitHub
     </a>,