Convert NavigationPlayground project to a CRNA project

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;

examples/NavigationPlayground/transformer.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * Note: This is a fork of the fb-specific transform.js
+ * Specifically, it uses 'babel-plugin-module-resolver' to rewrite requires for
+ * 'react-native' and 'react' to point to the passed in paths from the transformer
+ * options, and also utilizes babel-preset-expo for other Exponent specific transforms.
+ */
+
+const path = require('path');
+const babel = require('babel-core');
+const reactTransformPlugin = require('babel-plugin-react-transform').default;
+
+const hmrTransform = 'react-transform-hmr/lib/index.js';
+const transformPath = require.resolve(hmrTransform);
+
+const makeHMRConfig = function(options, filename) {
+  const transform = filename
+    ? './' + path.relative(path.dirname(filename), transformPath) // packager can't handle absolute paths
+    : hmrTransform;
+
+  return {
+    plugins: [
+      [
+        reactTransformPlugin,
+        {
+          transforms: [
+            {
+              transform,
+              imports: ['react-native'],
+              locals: ['module'],
+            },
+          ],
+        },
+      ],
+    ],
+  };
+};
+
+const buildAliasPreset = (reactNativePath, reactPath) => ({
+  plugins: [
+    [
+      require('babel-plugin-module-resolver').default,
+      {
+        alias: Object.assign(
+          {},
+          {
+            'react-native': path.resolve(
+              `${reactNativePath || './node_modules/react-native'}`
+            ),
+            react: path.resolve(`${reactPath || './node_modules/react'}`),
+          },
+          require('babel-preset-expo').plugins[0][1].alias
+        ),
+        cwd: path.resolve(__dirname, '..'),
+      },
+    ],
+  ],
+});
+
+/**
+ * Given a filename and options, build a Babel
+ * config object with the appropriate plugins.
+ */
+function buildBabelConfig(filename, options) {
+  const exponentBabelPreset = require('babel-preset-expo');
+  const babelConfig = {
+    presets: [
+      ...exponentBabelPreset.presets,
+      buildAliasPreset(options.reactNativePath, options.reactPath),
+    ],
+    plugins: [],
+  };
+
+  const extraConfig = {
+    filename,
+    sourceFileName: filename,
+    babelrc: false,
+  };
+
+  let config = Object.assign({}, babelConfig, extraConfig);
+
+  let extraPresets = [];
+
+  if (options.hot) {
+    const hmrConfig = makeHMRConfig(options, filename);
+    extraPresets.push(hmrConfig);
+  }
+
+  config.presets = [...config.presets, ...extraPresets];
+
+  return Object.assign({}, babelConfig, config);
+}
+
+function transform(src, filename, options) {
+  options = options || {};
+
+  const babelConfig = buildBabelConfig(filename, options);
+  const result = babel.transform(src, babelConfig);
+
+  return {
+    ast: result.ast,
+    code: result.code,
+    map: result.map,
+    filename,
+  };
+}
+
+module.exports = function(data, callback) {
+  let result;
+  try {
+    result = transform(data.sourceCode, data.filename, data.options);
+  } catch (e) {
+    callback(e);
+    return;
+  }
+
+  callback(null, result);
+};
+
+// export for use in jest
+module.exports.transform = transform;