Touchable: TouchableMixin wasn't injected in native

package.json

@@ -74,13 +74,14 @@
   "dependencies": {
     "animated": "^0.1.5",
     "asap": "^2.0.5",
+    "create-react-class": "^15.6.2",
     "deline": "^1.0.4",
     "flexibility": "^2.0.1",
     "inline-style-prefixer": "^2.0.5",
     "invariant": "^2.2.1",
     "normalize-css-color": "^1.0.1",
     "prop-types": "^15.5.10",
-    "react-native-web": "0.0.x",
+    "react-native-web": ">=0.0.100",
     "react-timer-mixin": "^0.13.3",
     "string-hash": "^1.1.3"
   },

src/injection/react-native-web.js

@@ -10,7 +10,7 @@ const {
   Dimensions,
   Easing,
 } = require('react-native-web');
-const StyleRegistry = require('react-native-web/dist/apis/StyleSheet/registry');
+const StyleRegistry = require('react-native-web/dist/apis/StyleSheet/registry').default;
 
 const emptyObject = {};
 

src/injection/react-native.js

@@ -1,4 +1,7 @@
 const ReactPrimitives = require('../ReactPrimitives');
+
+const { Touchable } = require('react-native');
+
 const {
   Animated,
   View,
@@ -22,5 +25,5 @@ ReactPrimitives.inject({
     Version: Platform.Version,
   },
   Dimensions,
-  Touchable: require('../modules/Touchable')(Animated, StyleSheet, Platform),
+  Touchable: require('../modules/Touchable')(Animated, StyleSheet, Platform, Touchable.Mixin),
 });

src/modules/Platform.js

@@ -10,8 +10,10 @@ const Platform = {
     return obj.default;
   },
   inject: platform => {
-    Platform.OS = platform.OS;
-    Platform.Version = platform.Version;
+    // Use bracket accessor notation as workaround for
+    // https://github.com/facebook/metro-bundler/issues/27
+    Platform['OS'] = platform.OS; // eslint-disable-line dot-notation
+    Platform['Version'] = platform.Version; // eslint-disable-line dot-notation
   },
 };
 

src/modules/Touchable.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const createReactClass = require('create-react-class');
 const PropTypes = require('prop-types');
 const TimerMixin = require('react-timer-mixin');
 
@@ -74,7 +75,7 @@ const Touchable = (
   });
 
   // eslint-disable-next-line react/prefer-es6-class
-  return React.createClass({
+  return createReactClass({
     displayName: 'Touchable',
     propTypes: {
       accessible: PropTypes.bool,

src/vr/Touchable.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const createReactClass = require('create-react-class');
 const PropTypes = require('prop-types');
 const { VrButton } = require('react-vr');
 
@@ -54,7 +55,7 @@ const Touchable = (
   TouchableMixin,
 ) => {
   // eslint-disable-next-line react/prefer-es6-class
-  return React.createClass({
+  return createReactClass({
     displayName: 'Touchable',
     propTypes: {
       accessible: PropTypes.bool,

src/web/Touchable/Touchable.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const createReactClass = require('create-react-class');
 const TimerMixin = require('react-timer-mixin');
 const TouchableMixin = require('./TouchableMixin');
 const ensurePositiveDelayProps = require('./ensurePositiveDelayProps');
@@ -64,7 +65,7 @@ const Touchable = (Animated, StyleSheet, Platform) => {
   });
 
   // eslint-disable-next-line react/prefer-es6-class
-  return React.createClass({
+  return createReactClass({
     displayName: 'Touchable',
     propTypes: {
       accessible: PropTypes.bool,