Upgrading to RN 48 and Three.js 87

Summary: Updating RN, React, and Three.js deps, making local changes needed to move from RN 45 to 48

Reviewed By: amberroy

Differential Revision: D5795859

fbshipit-source-id: 85b3c50

EndToEnd/testapp/rn-cli.config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var path = require('path');
-var blacklist = require('react-native/packager/blacklist');
+var blacklist = require('metro-bundler/src/blacklist');
 console.log(path.resolve('react-native'));
 
 /**

Libraries/Components/View/PlatformViewPropTypes.vr.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ * @providesModule PlatformViewPropTypes
+ * @flow
+ */
+
+module.export = {};

Libraries/VRLayers/CylindricalPanel.js

@@ -67,11 +67,11 @@ const CylindricalPanel = createReactClass({
   propTypes: {
     ...View.propTypes,
 
-    layer: React.PropTypes.shape({
-      width: React.PropTypes.number.isRequired,
-      height: React.PropTypes.number.isRequired,
-      radius: React.PropTypes.number,
-      density: React.PropTypes.number,
+    layer: PropTypes.shape({
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      radius: PropTypes.number,
+      density: PropTypes.number,
     }).isRequired,
 
     style: StyleSheetPropType(LayoutAndTransformOpacityPropTypes),

Libraries/VRLayers/QuadPanel.js

@@ -58,11 +58,11 @@ const QuadPanel = createReactClass({
   propTypes: {
     ...View.propTypes,
 
-    layer: React.PropTypes.shape({
-      width: React.PropTypes.number.isRequired,
-      height: React.PropTypes.number.isRequired,
-      distance: React.PropTypes.number,
-      density: React.PropTypes.number,
+    layer: PropTypes.shape({
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      distance: PropTypes.number,
+      density: PropTypes.number,
     }).isRequired,
 
     style: StyleSheetPropType(LayoutAndTransformOpacityPropTypes),

Libraries/VRReactOverrides/Image.vr.js

@@ -99,17 +99,17 @@ const Image = createReactClass({
     /**
      * inset in texture space in 9 tile set up
      */
-    inset: React.PropTypes.arrayOf(PropTypes.number),
+    inset: PropTypes.arrayOf(PropTypes.number),
 
     /**
      * Inset size in world units in 9 tile set up
      */
-    insetSize: React.PropTypes.arrayOf(PropTypes.number),
+    insetSize: PropTypes.arrayOf(PropTypes.number),
 
     /**
      * Specifies the extents of the UV to display
      */
-    crop: React.PropTypes.arrayOf(PropTypes.number),
+    crop: PropTypes.arrayOf(PropTypes.number),
   },
 
   statics: {
@@ -134,7 +134,7 @@ const Image = createReactClass({
   },
 
   contextTypes: {
-    isInAParentText: React.PropTypes.bool,
+    isInAParentText: PropTypes.bool,
   },
 
   render: function() {

Libraries/VRReactOverrides/MaskedViewIOS.vr.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ * @providesModule MaskedViewIOS
+ * @flow
+ */
+'use strict';
+
+module.exports = require('UnimplementedView');

Libraries/VRReactOverrides/setupDevtools.vr.js

@@ -11,152 +11,58 @@
  */
 'use strict';
 
-const NativeModules = require('NativeModules');
-const UIManager = NativeModules.UIManager;
+type DevToolsPluginConnection = {
+  isAppActive: () => boolean,
+  host: string,
+  port: number,
+};
 
-// Make sure we only print out the connection message once
-let logged = false;
+type DevToolsPlugin = {
+  connectToDevTools: (connection: DevToolsPluginConnection) => void,
+};
 
-function setupDevtools() {
-  // Only attemp the connection if `?devtools` has been appended to the url,
-  // so that we don't flood every app with websocket connection failure messages
-  if (!self.__DEVTOOLS__) {
-    return;
-  }
-  const port = window.__REACT_DEVTOOLS_PORT__ || 8097;
-  if (!logged) {
-    console.log('Attempting to connect to React Inspector on :' + port);
-    logged = true;
-  }
-  const messageListeners = [];
-  const closeListeners = [];
-  const hostname = 'localhost';
-  const ws = new window.WebSocket('ws://' + hostname + ':' + port + '/devtools');
-  // this is accessed by the eval'd backend code
-  /* eslint-disable no-unused-vars */
-  const FOR_BACKEND = {
-    /* eslint-enable no-unused-vars */
-    resolveRNStyle: require('flattenStyle'),
-    wall: {
-      listen(fn) {
-        messageListeners.push(fn);
-      },
-      onClose(fn) {
-        closeListeners.push(fn);
-      },
-      send(data) {
-        ws.send(JSON.stringify(data));
-      },
-    },
-  };
-  ws.onclose = handleClose;
-  ws.onerror = handleClose;
-  ws.onopen = function() {
-    tryToConnect();
-  };
-
-  let hasClosed = false;
-  function handleClose() {
-    if (!hasClosed) {
-      hasClosed = true;
-      setTimeout(setupDevtools, 2000);
-      closeListeners.forEach(fn => fn());
-    }
-  }
+let register = function () {
+  // noop
+};
 
-  function tryToConnect() {
-    ws.send('attach:agent');
-    const _interval = setInterval(() => ws.send('attach:agent'), 500);
-    ws.onmessage = evt => {
-      if (evt.data.indexOf('eval:') === 0) {
-        clearInterval(_interval);
-        initialize(evt.data.slice('eval:'.length));
-      }
-    };
-  }
+if (__DEV__) {
+  const AppState = require('AppState');
+  const WebSocket = require('WebSocket');
+  const {PlatformConstants} = require('NativeModules');
+  /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an
+   * error found when Flow v0.54 was deployed. To see the error delete this
+   * comment and run Flow. */
+  const reactDevTools = require('react-devtools-core');
 
-  function initialize(text) {
-    try {
-      // FOR_BACKEND is used by the eval'd code
-      eval(text); // eslint-disable-line no-eval
-    } catch (e) {
-      console.error('Failed to eval: ' + e.message);
-      return;
-    }
-    const ReactNativeComponentTree = require('ReactNativeComponentTree');
-    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
-      ComponentTree: {
-        getClosestInstanceFromNode: function(node) {
-          return ReactNativeComponentTree.getClosestInstanceFromNode(node);
-        },
-        getNodeFromInstance: function(inst) {
-          // inst is an internal instance (but could be a composite)
-          while (inst._renderedComponent) {
-            inst = inst._renderedComponent;
-          }
-          if (inst) {
-            return ReactNativeComponentTree.getNodeFromInstance(inst);
-          } else {
-            return null;
-          }
-        },
-      },
-      Mount: require('ReactNativeMount'),
-      Reconciler: require('ReactReconciler'),
-    });
-    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', attachToDevtools);
-    if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
-      attachToDevtools(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent);
-    }
-    ws.onmessage = handleMessage;
-  }
+  register = function (plugin: DevToolsPlugin) {
+    // Initialize dev tools only if the native module for WebSocket is available
+    if (self.__DEVTOOLS__ && WebSocket.isAvailable) {
+      // Don't steal the DevTools from currently active app.
+      // Note: if you add any AppState subscriptions to this file,
+      // you will also need to guard against `AppState.isAvailable`,
+      // or the code will throw for bundles that don't have it.
+      const isAppActive = () => true;
 
-  let currentHighlight = null;
+      // Special case: Genymotion is running on a different host.
+      const host = PlatformConstants && PlatformConstants.ServerHost ?
+        PlatformConstants.ServerHost.split(':')[0] :
+        'localhost';
 
-  function attachToDevtools(agent) {
-    agent.sub('highlight', ({node, name, props}) => {
-      currentHighlight = node;
-      UIManager.setBoundingBoxVisible(node, true);
-    });
-    agent.sub('hideHighlight', () => {
-      if (currentHighlight) {
-        UIManager.setBoundingBoxVisible(currentHighlight, false);
-        currentHighlight = null;
-      }
-    });
-  }
-
-  function handleMessage(evt) {
-    // It's hard to handle JSON in a safe manner without inspecting it at
-    // runtime, hence the any
-    let data: any;
-    try {
-      data = JSON.parse(evt.data);
-    } catch (e) {
-      return console.error('failed to parse json: ' + evt.data);
-    }
-    // the devtools closed
-    if (data.$close || data.$error) {
-      closeListeners.forEach(fn => fn());
-      window.__REACT_DEVTOOLS_GLOBAL_HOOK__.emit('shutdown');
-      tryToConnect();
-      return;
-    }
-    if (data.$open) {
-      return; // ignore
+      plugin.connectToDevTools({
+        isAppActive,
+        host,
+        // Read the optional global variable for backward compatibility.
+        // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
+        port: window.__REACT_DEVTOOLS_PORT__,
+        resolveRNStyle: require('flattenStyle'),
+      });
     }
-    messageListeners.forEach(fn => {
-      try {
-        fn(data);
-      } catch (e) {
-        // jsc doesn't play so well with tracebacks that go into eval'd code,
-        // so the stack trace here will stop at the `eval()` call. Getting the
-        // message that caused the error is the best we can do for now.
-        console.log(data);
-        throw e;
-      }
-    });
-  }
+  };
+
+  register(reactDevTools);
+  global.registerDevtoolsPlugin = register;
 }
 
-module.exports = setupDevtools;
+module.exports = {
+  register,
+};

ReactVR/js/Modules/Timing.js

@@ -110,7 +110,7 @@ export default class Timing extends Module {
     // timer information is distributed in a single message with mulitiple params
     // which minimizes the bridge traffic when many timers are used
     if (timers.length) {
-      this._rnctx.callFunction('JSTimersExecution', 'callTimers', [timers]);
+      this._rnctx.callFunction('JSTimers', 'callTimers', [timers]);
     }
 
     for (const timer of toRemove) {
@@ -131,7 +131,7 @@ export default class Timing extends Module {
     const now = window.performance ? performance.now() : Date.now();
     const frameElapsed = now - frameStart;
     if (this._targetFrameDuration - frameElapsed >= IDLE_CALLBACK_THRESHOLD) {
-      this._rnctx.callFunction('JSTimersExecution', 'callIdleCallbacks', [
+      this._rnctx.callFunction('JSTimers', 'callIdleCallbacks', [
         Date.now() - frameElapsed,
       ]);
     }

jest/setup.js

@@ -38,6 +38,15 @@ const mockNativeModules = {
     pause: jest.fn(),
     stop: jest.fn(),
   },
+  BlobModule: {
+    BLOB_URI_SCHEME: 'content',
+    BLOB_URI_HOST: null,
+    enableBlobSupport: jest.fn(),
+    disableBlobSupport: jest.fn(),
+    createFromParts: jest.fn(),
+    sendBlob: jest.fn(),
+    release: jest.fn(),
+  },
   ExternalAssets: {
     assetRoot: './',
   },

package.json

@@ -21,8 +21,8 @@
     "scripts"
   ],
   "peerDependencies": {
-    "react": "16.0.0-alpha.12",
-    "react-native": "~0.45.0"
+    "react": "16.0.0-rc.2",
+    "react-native": "~0.48.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
@@ -40,9 +40,9 @@
     "jest": "^17.0.3",
     "jsdom": "^9.10.0",
     "prettier": "^1.0.0",
-    "react": "16.0.0-alpha.12",
-    "react-native": "~0.45.0",
-    "three": "^0.85.2",
+    "react": "16.0.0-rc.2",
+    "react-native": "~0.48.0",
+    "three": "^0.87.0",
     "three-gltf2-loader": "^1.0.0"
   },
   "scripts": {
@@ -54,7 +54,7 @@
     "test-unit": "jest --config jest/config-unit.json"
   },
   "dependencies": {
-    "create-react-class": "^15.5.3",
+    "create-react-class": "^15.6.0",
     "prop-types": "^15.5.10"
   }
 }

react-vr-cli/generators/rn-cli.config.generator.js

@@ -12,7 +12,7 @@ module.exports = config => ({
   contents: `'use strict';
 
 var path = require('path');
-var blacklist = require('./node_modules/react-native/packager/blacklist');
+var blacklist = require('metro-bundler/src/blacklist');
 
 var config = {
   getProjectRoots() {