Convert NavigationPlayground project to a CRNA project

Author: Adam Miskiewicz

circle.yml

@@ -27,6 +27,6 @@ jobs:
               ./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
+              exp login -u "$EXPO_USERNAME" -p "$EXPO_PASSWORD"
+              cd examples/ExpoNavigationPlayground && yarn && exp publish
             fi

examples/NavigationPlayground/.babelrc

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

examples/NavigationPlayground/.flowconfig

@@ -6,7 +6,6 @@
 <PROJECT_ROOT>/\.buckd/
 
 ; Ignore unexpected extra "@providesModule"
-.*/node_modules/commoner/test/source/widget/share.js
 .*/node_modules/.*/node_modules/fbjs/.*
 
 ; Ignore duplicate module providers
@@ -15,6 +14,22 @@
 .*/Libraries/react-native/React.js
 .*/Libraries/react-native/ReactNative.js
 
+; Additional create-react-native-app ignores
+
+; Ignore duplicate module providers
+.*/node_modules/fbemitter/lib/*
+
+; Ignore misbehaving dev-dependencies
+.*/node_modules/xdl/build/*
+.*/node_modules/reqwest/tests/*
+
+; Ignore missing expo-sdk dependencies (temporarily)
+; https://github.com/exponent/exponent-sdk/issues/36
+.*/node_modules/expo/src/*
+
+; Ignore react-native-fbads dependency of the expo sdk
+.*/node_modules/react-native-fbads/*
+
 [include]
 
 [libs]
@@ -25,6 +40,8 @@ flow/
 [options]
 module.system=haste
 
+emoji=true
+
 experimental.strict_type_args=true
 
 munge_underscores=true
@@ -35,11 +52,12 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+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\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.36.0
+^0.40.0

examples/NavigationPlayground/.gitignore

@@ -1,53 +1,3 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# node.js
-#
 node_modules/
-npm-debug.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
-
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
+.expo/
+npm-debug.*

examples/NavigationPlayground/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

examples/NavigationPlayground/App.js

@@ -0,0 +1,2 @@
+import App from './js/App';
+export default App;

examples/NavigationPlayground/App.test.js

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

examples/NavigationPlayground/app.json

@@ -1,4 +1,29 @@
 {
-  "name": "NavigationPlayground",
-  "displayName": "NavigationPlayground"
-}
+  "expo": {
+    "name": "NavigationPlayground",
+    "description": "Try out react-navigation now with this awesome playground",
+    "version": "1.0.0",
+    "slug": "NavigationPlayground",
+    "privacy": "public",
+    "orientation": "portrait",
+    "primaryColor": "#cccccc",
+    "icon": "./assets/icons/react-navigation.png",
+    "loading": {
+      "icon": "./assets/icons/react-navigation.png",
+      "hideExponentText": false
+    },
+    "sdkVersion": "16.0.0",
+    "entryPoint": "./examples/NavigationPlayground/node_modules/react-native-scripts/build/bin/crna-entry.js",
+    "packagerOpts": {
+      "projectRoots": "",
+      "assetExts": [
+        "ttf",
+        "mp4"
+      ],
+      "config": "./rn-cli.config.js"
+    },
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

examples/NavigationPlayground/package.json

@@ -1,29 +1,33 @@
 {
   "name": "NavigationPlayground",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "private": true,
+  "devDependencies": {
+    "react-native-scripts": "0.0.29",
+    "jest-expo": "^0.4.0",
+    "react-test-renderer": "16.0.0-alpha.6"
+  },
+  "main": "./examples/node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
-    "test": "jest"
+    "start": "react-native-scripts start",
+    "eject": "react-native-scripts eject",
+    "android": "react-native-scripts android",
+    "ios": "react-native-scripts ios",
+    "test": "node node_modules/jest/bin/jest.js --watch"
   },
   "dependencies": {
+    "expo": "^16.0.0",
     "react": "16.0.0-alpha.6",
-    "react-native": "^0.44.0",
-    "react-native-vector-icons": "^4.1.1",
-    "react-navigation": "file:../.."
-  },
-  "devDependencies": {
-    "babel-jest": "^20.0.1",
-    "jest": "^20.0.1",
-    "react-test-renderer": "^15.5.4"
+    "react-native": "^0.43.4"
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "jest-expo",
     "setupFiles": [
       "<rootDir>/../../jest-setup.js"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!react-native|react-navigation)/",
-      "__exponent"
+      "examples/ReduxExample/"
     ]
   }
 }

examples/NavigationPlayground/rn-cli.config.js

@@ -0,0 +1,50 @@
+/**
+ * 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 config = require('react-native/packager/rn-cli.config');
+
+const examples = getDirectories(path.join(__dirname, '..'));
+const CURRENT_EXAMPLE = 'NavigationPlayground';
+
+const getBlacklistForExample = (example) => [
+  ...examples.filter(x => x !== example).map(exampleName => new RegExp(`${path.resolve(__dirname, '..')}/${exampleName}/(.*)`))
+];
+
+config.getBlacklist = () => [
+  new RegExp(
+    `${path.resolve(__dirname, '../..')}/node_modules/react-native/(.*)`
+  ),
+  new RegExp(`${path.resolve(__dirname, '../..')}/node_modules/react/(.*)`),
+  ...getBlacklistForExample(CURRENT_EXAMPLE)
+];
+
+config.getBlacklistRE = () => blacklist(config.getBlacklist());
+
+config.getTransformModulePath = () =>
+  path.resolve(__dirname, 'transformer.js');
+
+config.getTransformOptions = () => ({
+  reactNativePath: path.resolve(__dirname, 'node_modules/react-native/'),
+  reactPath: path.resolve(__dirname, 'node_modules/react/'),
+});
+
+config.getProjectRoots = () => getRoots();
+config.getAssetRoots = () => getRoots();
+
+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;