Fix the NavigationPlayground example! (#2170)

* [Playground] Commit auto-changes to package.json, yarn.lock

* [Playground] Rerun create-react-native-app

Preserving rn-cli.js and transformer.js

Still not quite working.

* [Playground] Fix the Expo loading issue by removing projectRoots

Now it looks in the right place to find its resources, including 'entryPoint'.

* [Playground] Add postinstall script to clean up files Yarn copies in

Yarn copies them when installing locally, causing lots of @providesModule collisions.

* Update the Contributors guide to explain how to use the example app

And recommend Yarn by default

* [Playground] Remove now-obsolete rn-cli.config.js

* [Playground] Upgrade expo and other dependencies

* [Playground] Don't delete .git just in case

packages/react-navigation/docs/guides/Contributors.md

@@ -2,59 +2,65 @@
 
 ## Environment
 
-React navigation was initially developed on macOS 10.12, with node 7+, and react-native v0.39+. Please open issues when uncovering problems in different environments.
+React Navigation was initially developed on macOS v10.12, with node v7+, and react-native v0.39+.
+It's also been verified to work using Boron LTS (node v6.11.1 with npm v3.10.10), and using node v8.1.4 with npm v4.6.1.
+Please open issues if you uncover problems in different environments.
+
+In all of the below commands, you can use `npm` instead of `yarn` if you prefer.
+[Yarn](https://yarnpkg.com/en/) is generally much faster, but some people still prefer `npm`.
+They should work the same here.
 
 ## Development
 
 ### Fork the repo
 
 - Fork [`react-navigation`](https://github.com/react-community/react-navigation) on GitHub
-
 - Run these commands in the terminal to download locally and install it:
 
-```
-git clone https://github.com/<USERNAME>/react-navigation.git
-cd react-navigation
-git remote add upstream https://github.com/react-community/react-navigation.git
-npm install
-```
+    ```bash
+    git clone https://github.com/<USERNAME>/react-navigation.git
+    cd react-navigation
+    git remote add upstream https://github.com/react-community/react-navigation.git
+    yarn install
+    ```
 
 ### Run the example app
 
-```
-npm install
+```bash
+yarn install
 cd examples/NavigationPlayground
-npm install
-cd ../..
-npm start
-
-# In a seperate terminal tab:
-npm run run-playground-android
-# OR:
-npm run run-playground-ios
+yarn install
+yarn start
 ```
 
-You can also simply run e.g. `react-native run-android` from within the example app directory (instead of `npm run run-playground-android` from the root `react-navigation` directory); both do the same thing.
+You will be given a URL to open in your Expo app. You can get Expo [here](https://docs.expo.io/versions/v18.0.0/introduction/installation.html) if you don't have it yet.
+
+If you run into any issues, please try the following to start fresh:
+
+```bash
+watchman watch-del-all
+yarn start -- --reset-cache
+```
 
 ### Run the website
 
 For development mode and live-reloading:
 
-```
+```bash
 cd website
-npm install
-npm start
+yarn install
+yarn start
 ```
 
 To run the website in production mode with server rendering:
 
-```
-npm run prod
+```bash
+yarn run prod
 ```
 
 ### Run tests and type-checking
 
-```
+```bash
 jest
 flow
 ```
@@ -87,5 +93,7 @@ Simple bug fixes are welcomed in pull requests! Please check for duplicate PRs b
 
 #### Make sure to sync up with the state of upstream before submitting a PR:
 
-- `git fetch upstream`
-- `git rebase upstream/master`
+```bash
+git fetch upstream
+git rebase upstream/master
+```

packages/react-navigation/examples/NavigationPlayground/.flowconfig

@@ -24,7 +24,7 @@
 .*/node_modules/reqwest/tests/*
 
 ; Ignore missing expo-sdk dependencies (temporarily)
-; https://github.com/exponent/exponent-sdk/issues/36
+; https://github.com/expo/expo/issues/162
 .*/node_modules/expo/src/*
 
 ; Ignore react-native-fbads dependency of the expo sdk
@@ -64,8 +64,8 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 

packages/react-navigation/examples/NavigationPlayground/App.test.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import 'react-native';
-import renderer from 'react-test-renderer';
-
 import App from './App';
 
+import renderer from 'react-test-renderer';
+
 it('renders without crashing', () => {
   const rendered = renderer.create(<App />).toJSON();
   expect(rendered).toBeTruthy();

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

@@ -12,15 +12,13 @@
       "icon": "./assets/icons/react-navigation.png",
       "hideExponentText": false
     },
-    "sdkVersion": "18.0.0",
+    "sdkVersion": "20.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "packagerOpts": {
-      "projectRoots": "",
       "assetExts": [
         "ttf",
         "mp4"
-      ],
-      "config": "./rn-cli.config.js"
+      ]
     },
     "ios": {
       "supportsTablet": true

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

@@ -4,6 +4,7 @@
   "private": true,
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
+    "postinstall": "rm -rf node_modules/react-navigation/{node_modules,examples}",
     "start": "react-native-scripts start",
     "eject": "react-native-scripts eject",
     "android": "react-native-scripts android",
@@ -11,19 +12,19 @@
     "test": "node node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "expo": "^18.0.9",
+    "expo": "^20.1.2",
     "flow-bin": "^0.49.1",
     "react": "16.0.0-alpha.12",
-    "react-native": "^0.45.1",
-    "react-navigation": "*"
+    "react-native": "~0.47.2",
+    "react-navigation": "file:../.."
   },
   "devDependencies": {
-    "babel-jest": "^20.0.1",
-    "jest": "^20.0.1",
-    "jest-expo": "^18.0.0",
+    "babel-jest": "^21.0.0",
+    "jest": "^21.0.1",
+    "jest-expo": "^20.0.0",
     "react-addons-test-utils": "16.0.0-alpha.3",
-    "react-native-scripts": "^0.0.50",
-    "react-test-renderer": "16.0.0-alpha.13"
+    "react-native-scripts": "^1.3.1",
+    "react-test-renderer": "16.0.0-alpha.12"
   },
   "jest": {
     "preset": "jest-expo",

packages/react-navigation/examples/NavigationPlayground/rn-cli.config.js

@@ -1,43 +0,0 @@
-/**
- * RN CLI Config that allows Exponent to work with this project
- *
- * Extends the base rn-cli.config.js at the root of the project to use a custom transfomer and a
- * special blacklist.
- */
-
-const fs = require('fs');
-const path = require('path');
-const blacklist = require('react-native/packager/blacklist');
-
-const CURRENT_EXAMPLE = 'NavigationPlayground';
-
-const examples = getDirectories(path.join(__dirname, '..'));
-
-const getBlacklistForExample = (example) => [
-  ...examples.filter(x => x !== example).map(exampleName => new RegExp(`${path.resolve(__dirname, '..')}/${exampleName}/(.*)`))
-];
-
-const config = {};
-
-config.getBlacklist = () => [
-  new RegExp(
-    `${path.resolve(__dirname, '../..')}/node_modules/react-native/(.*)`
-  ),
-  new RegExp(`${path.resolve(__dirname, '../..')}/node_modules/react/(.*)`),
-  new RegExp(`${path.resolve(__dirname, '../..')}/lib-rn/(.*)`),
-  new RegExp(`${path.resolve(__dirname, '../..')}/lib/(.*)`),
-  ...getBlacklistForExample(CURRENT_EXAMPLE)
-];
-
-config.getBlacklistRE = () => blacklist(config.getBlacklist());
-
-function getRoots() {
-  return [path.join(__dirname)];
-}
-
-function getDirectories(srcpath) {
-  return fs.readdirSync(srcpath)
-    .filter(file => fs.lstatSync(path.join(srcpath, file)).isDirectory())
-}
-
-module.exports = config;

packages/react-navigation/yarn.lock

@@ -4299,9 +4299,9 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-react-native-tab-view@^0.0.67:
-  version "0.0.67"
-  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.67.tgz#cdd146fe5e5d4baff6c89f2d5d0b15fa23db39d0"
+react-native-tab-view@~0.0.67:
+  version "0.0.69"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.69.tgz#f52d4354a98a382f10eb5fcf61db5216c91dc7e7"
   dependencies:
     prop-types "^15.5.8"