Update view configs handle view props/events

Summary:
This diff adds support for spreading view props into the generated viewconfig (currently hardcoded the view viewconfig but soon that will also be generated)

Results in a generated view config such as:

```
const ReactNativeViewConfig = require('ReactNativeViewConfig');
const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');

const BooleanPropNativeComponentViewConfig = {
  uiViewClassName: 'BooleanPropNativeComponent',
  Commands: {},

  bubblingEventTypes: {
    ...ReactNativeViewConfig.bubblingEventTypes
  },

  directEventTypes: {
    ...ReactNativeViewConfig.directEventTypes
  },

  validAttributes: {
    ...ReactNativeViewConfig.validAttributes,
    disabled: true
  }
};

ReactNativeViewConfigRegistry.register(
  'BooleanPropNativeComponent',
  () => BooleanPropNativeComponentViewConfig,
);

module.exports = 'BooleanPropNativeComponent';
```

Reviewed By: TheSavior

Differential Revision: D15258778

fbshipit-source-id: 2c70d20dc366f32a8114d42e0e15b5f1e359d11f

Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const ReactNativeViewConfig = {
+  uiViewClassName: 'RCTView',
+  baseModuleName: null,
+  Manager: 'ViewManager',
+  Commands: {},
+  Constants: {},
+  bubblingEventTypes: {
+    topBlur: {
+      phasedRegistrationNames: {
+        bubbled: 'onBlur',
+        captured: 'onBlurCapture',
+      },
+    },
+    topChange: {
+      phasedRegistrationNames: {
+        bubbled: 'onChange',
+        captured: 'onChangeCapture',
+      },
+    },
+    topEndEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onEndEditing',
+        captured: 'onEndEditingCapture',
+      },
+    },
+    topFocus: {
+      phasedRegistrationNames: {
+        bubbled: 'onFocus',
+        captured: 'onFocusCapture',
+      },
+    },
+    topKeyPress: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyPress',
+        captured: 'onKeyPressCapture',
+      },
+    },
+    topPress: {
+      phasedRegistrationNames: {
+        bubbled: 'onPress',
+        captured: 'onPressCapture',
+      },
+    },
+    topSubmitEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onSubmitEditing',
+        captured: 'onSubmitEditingCapture',
+      },
+    },
+    topTouchCancel: {
+      phasedRegistrationNames: {
+        bubbled: 'onTouchCancel',
+        captured: 'onTouchCancelCapture',
+      },
+    },
+    topTouchEnd: {
+      phasedRegistrationNames: {
+        bubbled: 'onTouchEnd',
+        captured: 'onTouchEndCapture',
+      },
+    },
+    topTouchMove: {
+      phasedRegistrationNames: {
+        bubbled: 'onTouchMove',
+        captured: 'onTouchMoveCapture',
+      },
+    },
+    topTouchStart: {
+      phasedRegistrationNames: {
+        bubbled: 'onTouchStart',
+        captured: 'onTouchStartCapture',
+      },
+    },
+  },
+  directEventTypes: {
+    topAccessibilityAction: {
+      registrationName: 'onAccessibilityAction',
+    },
+    topAccessibilityEscape: {
+      registrationName: 'onAccessibilityEscape',
+    },
+    topAccessibilityTap: {
+      registrationName: 'onAccessibilityTap',
+    },
+    topLayout: {
+      registrationName: 'onLayout',
+    },
+    topMagicTap: {
+      registrationName: 'onMagicTap',
+    },
+  },
+  validAttributes: {
+    accessibilityActions: true,
+    accessibilityElementsHidden: true,
+    accessibilityHint: true,
+    accessibilityIgnoresInvertColors: true,
+    accessibilityLabel: true,
+    accessibilityRole: true,
+    accessibilityStates: true,
+    accessibilityViewIsModal: true,
+    accessible: true,
+    alignContent: true,
+    alignItems: true,
+    alignSelf: true,
+    aspectRatio: true,
+    backfaceVisibility: true,
+    backgroundColor: {process: require('processColor')},
+    borderBottomColor: {process: require('processColor')},
+    borderBottomEndRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderBottomStartRadius: true,
+    borderBottomWidth: true,
+    borderColor: {process: require('processColor')},
+    borderEndColor: {process: require('processColor')},
+    borderEndWidth: true,
+    borderLeftColor: {process: require('processColor')},
+    borderLeftWidth: true,
+    borderRadius: true,
+    borderRightColor: {process: require('processColor')},
+    borderRightWidth: true,
+    borderStartColor: {process: require('processColor')},
+    borderStartWidth: true,
+    borderStyle: true,
+    borderTopColor: {process: require('processColor')},
+    borderTopEndRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderTopStartRadius: true,
+    borderTopWidth: true,
+    borderWidth: true,
+    bottom: true,
+    direction: true,
+    display: true,
+    end: true,
+    flex: true,
+    flexBasis: true,
+    flexDirection: true,
+    flexGrow: true,
+    flexShrink: true,
+    flexWrap: true,
+    height: true,
+    hitSlop: {diff: require('insetsDiffer')},
+    justifyContent: true,
+    left: true,
+    margin: true,
+    marginBottom: true,
+    marginEnd: true,
+    marginHorizontal: true,
+    marginLeft: true,
+    marginRight: true,
+    marginStart: true,
+    marginTop: true,
+    marginVertical: true,
+    maxHeight: true,
+    maxWidth: true,
+    minHeight: true,
+    minWidth: true,
+    nativeID: true,
+    needsOffscreenAlphaCompositing: true,
+    onAccessibilityAction: true,
+    onAccessibilityEscape: true,
+    onAccessibilityTap: true,
+    onLayout: true,
+    onMagicTap: true,
+    opacity: true,
+    overflow: true,
+    padding: true,
+    paddingBottom: true,
+    paddingEnd: true,
+    paddingHorizontal: true,
+    paddingLeft: true,
+    paddingRight: true,
+    paddingStart: true,
+    paddingTop: true,
+    paddingVertical: true,
+    pointerEvents: true,
+    position: true,
+    removeClippedSubviews: true,
+    right: true,
+    shadowColor: {process: require('processColor')},
+    shadowOffset: {diff: require('sizesDiffer')},
+    shadowOpacity: true,
+    shadowRadius: true,
+    shouldRasterizeIOS: true,
+    start: true,
+    style: {
+      alignContent: true,
+      alignItems: true,
+      alignSelf: true,
+      aspectRatio: true,
+      backfaceVisibility: true,
+      backgroundColor: {process: require('processColor')},
+      borderBottomColor: {process: require('processColor')},
+      borderBottomEndRadius: true,
+      borderBottomLeftRadius: true,
+      borderBottomRightRadius: true,
+      borderBottomStartRadius: true,
+      borderBottomWidth: true,
+      borderColor: {process: require('processColor')},
+      borderEndColor: {process: require('processColor')},
+      borderEndWidth: true,
+      borderLeftColor: {process: require('processColor')},
+      borderLeftWidth: true,
+      borderRadius: true,
+      borderRightColor: {process: require('processColor')},
+      borderRightWidth: true,
+      borderStartColor: {process: require('processColor')},
+      borderStartWidth: true,
+      borderStyle: true,
+      borderTopColor: {process: require('processColor')},
+      borderTopEndRadius: true,
+      borderTopLeftRadius: true,
+      borderTopRightRadius: true,
+      borderTopStartRadius: true,
+      borderTopWidth: true,
+      borderWidth: true,
+      bottom: true,
+      color: {process: require('processColor')},
+      decomposedMatrix: true,
+      direction: true,
+      display: true,
+      elevation: true,
+      end: true,
+      flex: true,
+      flexBasis: true,
+      flexDirection: true,
+      flexGrow: true,
+      flexShrink: true,
+      flexWrap: true,
+      fontFamily: true,
+      fontSize: true,
+      fontStyle: true,
+      fontVariant: true,
+      fontWeight: true,
+      height: true,
+      includeFontPadding: true,
+      justifyContent: true,
+      left: true,
+      letterSpacing: true,
+      lineHeight: true,
+      margin: true,
+      marginBottom: true,
+      marginEnd: true,
+      marginHorizontal: true,
+      marginLeft: true,
+      marginRight: true,
+      marginStart: true,
+      marginTop: true,
+      marginVertical: true,
+      maxHeight: true,
+      maxWidth: true,
+      minHeight: true,
+      minWidth: true,
+      opacity: true,
+      overflow: true,
+      overlayColor: {process: require('processColor')},
+      padding: true,
+      paddingBottom: true,
+      paddingEnd: true,
+      paddingHorizontal: true,
+      paddingLeft: true,
+      paddingRight: true,
+      paddingStart: true,
+      paddingTop: true,
+      paddingVertical: true,
+      position: true,
+      resizeMode: true,
+      right: true,
+      rotation: true,
+      scaleX: true,
+      scaleY: true,
+      shadowColor: {process: require('processColor')},
+      shadowOffset: {diff: require('sizesDiffer')},
+      shadowOpacity: true,
+      shadowRadius: true,
+      start: true,
+      textAlign: true,
+      textAlignVertical: true,
+      textDecorationColor: {process: require('processColor')},
+      textDecorationLine: true,
+      textDecorationStyle: true,
+      textShadowColor: {process: require('processColor')},
+      textShadowOffset: true,
+      textShadowRadius: true,
+      textTransform: true,
+      tintColor: {process: require('processColor')},
+      top: true,
+      transform: {diff: require('matricesDiffer')},
+      transformMatrix: true,
+      translateX: true,
+      translateY: true,
+      width: true,
+      writingDirection: true,
+      zIndex: true,
+    },
+    testID: true,
+    top: true,
+    transform: {diff: require('matricesDiffer')},
+    width: true,
+    zIndex: true,
+  },
+};
+
+module.exports = ReactNativeViewConfig;

packages/react-native-codegen/src/generators/GenerateViewConfigJs.js

@@ -72,12 +72,23 @@ ReactNativeViewConfigRegistry.register(
   '::_COMPONENT_NAME_::',
   () => ::_COMPONENT_NAME_::ViewConfig,
 );
+
+module.exports = '::_COMPONENT_NAME_::';
 `.trim();
 
+function normalizeInputEventName(name) {
+  if (name.startsWith('on')) {
+    return name.replace(/^on/, 'top');
+  } else if (!name.startsWith('top')) {
+    return `top${name[0].toUpperCase()}${name.slice(1)}`;
+  }
+
+  return name;
+}
 function generateBubblingEventInfo(event) {
   return j.property(
     'init',
-    j.identifier(event.name),
+    j.identifier(normalizeInputEventName(event.name)),
     j.objectExpression([
       j.property(
         'init',
@@ -116,8 +127,11 @@ function buildViewConfig(
   imports,
 ) {
   const componentProps = component.props;
+  const componentEvents = component.events;
 
-  let styleAttribute = null;
+  let viewAttributes = null;
+  let viewEvents = null;
+  let viewDirectEvents = null;
 
   component.extendsProps.forEach(extendProps => {
     switch (extendProps.type) {
@@ -125,13 +139,30 @@ function buildViewConfig(
         switch (extendProps.knownTypeName) {
           case 'ReactNativeCoreViewProps':
             imports.add(
-              "const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');",
+              "const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');",
             );
-            styleAttribute = j.property(
-              'init',
-              j.identifier('style'),
-              j.identifier('ReactNativeStyleAttributes'),
+
+            viewAttributes = j.spreadProperty(
+              j.memberExpression(
+                j.identifier('ReactNativeViewViewConfig'),
+                j.identifier('validAttributes'),
+              ),
             );
+
+            viewEvents = j.spreadProperty(
+              j.memberExpression(
+                j.identifier('ReactNativeViewViewConfig'),
+                j.identifier('bubblingEventTypes'),
+              ),
+            );
+
+            viewDirectEvents = j.spreadProperty(
+              j.memberExpression(
+                j.identifier('ReactNativeViewViewConfig'),
+                j.identifier('directEventTypes'),
+              ),
+            );
+
             return;
           default:
             (extendProps.knownTypeName: empty);
@@ -144,6 +175,7 @@ function buildViewConfig(
   });
 
   const validAttributes = j.objectExpression([
+    viewAttributes,
     ...componentProps.map(schemaProp => {
       return j.property(
         'init',
@@ -151,13 +183,17 @@ function buildViewConfig(
         getReactDiffProcessValue(schemaProp),
       );
     }),
-    styleAttribute,
+    ...componentEvents.map(eventType => {
+      return j.property('init', j.identifier(eventType.name), j.literal(true));
+    }),
   ]);
 
   const bubblingEventNames = component.events
     .filter(event => event.bubblingType === 'bubble')
     .map(generateBubblingEventInfo);
 
+  bubblingEventNames.unshift(viewEvents);
+
   const bubblingEvents =
     bubblingEventNames.length > 0
       ? j.property(
@@ -171,6 +207,8 @@ function buildViewConfig(
     .filter(event => event.bubblingType === 'direct')
     .map(generateDirectEventInfo);
 
+  directEventNames.unshift(viewDirectEvents);
+
   const directEvents =
     directEventNames.length > 0
       ? j.property(
@@ -186,12 +224,6 @@ function buildViewConfig(
     j.objectExpression([]),
   );
 
-  const constants = j.property(
-    'init',
-    j.identifier('Constants'),
-    j.objectExpression([]),
-  );
-
   const properties = [
     j.property(
       'init',
@@ -199,7 +231,6 @@ function buildViewConfig(
       j.literal(componentName),
     ),
     commands,
-    constants,
     bubblingEvents,
     directEvents,
     j.property('init', j.identifier('validAttributes'), validAttributes),

packages/react-native-codegen/src/generators/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -15,23 +15,30 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const ArrayPropsNativeComponentViewConfig = {
   uiViewClassName: 'ArrayPropsNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     names: true,
     disableds: true,
     progress: true,
     radii: true,
     colors: true,
     srcs: true,
-    points: true,
-    style: ReactNativeStyleAttributes
+    points: true
   }
 };
 
@@ -39,6 +46,8 @@ ReactNativeViewConfigRegistry.register(
   'ArrayPropsNativeComponent',
   () => ArrayPropsNativeComponentViewConfig,
 );
+
+module.exports = 'ArrayPropsNativeComponent';
 ",
 }
 `;
@@ -58,17 +67,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const BooleanPropNativeComponentViewConfig = {
   uiViewClassName: 'BooleanPropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    disabled: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    disabled: true
   }
 };
 
@@ -76,6 +92,8 @@ ReactNativeViewConfigRegistry.register(
   'BooleanPropNativeComponent',
   () => BooleanPropNativeComponentViewConfig,
 );
+
+module.exports = 'BooleanPropNativeComponent';
 ",
 }
 `;
@@ -95,17 +113,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const ColorPropNativeComponentViewConfig = {
   uiViewClassName: 'ColorPropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    tintColor: { process: require('processColor') },
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    tintColor: { process: require('processColor') }
   }
 };
 
@@ -113,6 +138,8 @@ ReactNativeViewConfigRegistry.register(
   'ColorPropNativeComponent',
   () => ColorPropNativeComponentViewConfig,
 );
+
+module.exports = 'ColorPropNativeComponent';
 ",
 }
 `;
@@ -132,17 +159,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const EnumPropsNativeComponentViewConfig = {
   uiViewClassName: 'EnumPropsNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    alignment: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    alignment: true
   }
 };
 
@@ -150,6 +184,8 @@ ReactNativeViewConfigRegistry.register(
   'EnumPropsNativeComponent',
   () => EnumPropsNativeComponentViewConfig,
 );
+
+module.exports = 'EnumPropsNativeComponent';
 ",
 }
 `;
@@ -169,16 +205,17 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const EventsNestedObjectNativeComponentViewConfig = {
   uiViewClassName: 'EventsNestedObjectNativeComponent',
   Commands: {},
-  Constants: {},
 
   bubblingEventTypes: {
-    onChange: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes,
+
+    topChange: {
       phasedRegistrationNames: {
         captured: 'onChangeCapture',
         bubbled: 'onChange'
@@ -186,9 +223,14 @@ const EventsNestedObjectNativeComponentViewConfig = {
     }
   },
 
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
+
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     disabled: true,
-    style: ReactNativeStyleAttributes
+    onChange: true
   }
 };
 
@@ -196,6 +238,8 @@ ReactNativeViewConfigRegistry.register(
   'EventsNestedObjectNativeComponent',
   () => EventsNestedObjectNativeComponentViewConfig,
 );
+
+module.exports = 'EventsNestedObjectNativeComponent';
 ",
 }
 `;
@@ -215,16 +259,17 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const EventsNativeComponentViewConfig = {
   uiViewClassName: 'EventsNativeComponent',
   Commands: {},
-  Constants: {},
 
   bubblingEventTypes: {
-    onChange: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes,
+
+    topChange: {
       phasedRegistrationNames: {
         captured: 'onChangeCapture',
         bubbled: 'onChange'
@@ -233,14 +278,18 @@ const EventsNativeComponentViewConfig = {
   },
 
   directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes,
+
     onEventDirect: {
       registrationName: 'onEventDirect'
     }
   },
 
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     disabled: true,
-    style: ReactNativeStyleAttributes
+    onChange: true,
+    onEventDirect: true
   }
 };
 
@@ -248,6 +297,8 @@ ReactNativeViewConfigRegistry.register(
   'EventsNativeComponent',
   () => EventsNativeComponentViewConfig,
 );
+
+module.exports = 'EventsNativeComponent';
 ",
 }
 `;
@@ -267,22 +318,29 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const FloatPropNativeComponentViewConfig = {
   uiViewClassName: 'FloatPropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     blurRadius: true,
     blurRadius2: true,
     blurRadius3: true,
     blurRadius4: true,
     blurRadius5: true,
-    blurRadius6: true,
-    style: ReactNativeStyleAttributes
+    blurRadius6: true
   }
 };
 
@@ -290,6 +348,8 @@ ReactNativeViewConfigRegistry.register(
   'FloatPropNativeComponent',
   () => FloatPropNativeComponentViewConfig,
 );
+
+module.exports = 'FloatPropNativeComponent';
 ",
 }
 `;
@@ -309,17 +369,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const ImagePropNativeComponentViewConfig = {
   uiViewClassName: 'ImagePropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    thumbImage: { process: require('resolveAssetSource') },
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    thumbImage: { process: require('resolveAssetSource') }
   }
 };
 
@@ -327,6 +394,8 @@ ReactNativeViewConfigRegistry.register(
   'ImagePropNativeComponent',
   () => ImagePropNativeComponentViewConfig,
 );
+
+module.exports = 'ImagePropNativeComponent';
 ",
 }
 `;
@@ -346,19 +415,26 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const IntegerPropNativeComponentViewConfig = {
   uiViewClassName: 'IntegerPropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     progress1: true,
     progress2: true,
-    progress3: true,
-    style: ReactNativeStyleAttributes
+    progress3: true
   }
 };
 
@@ -366,6 +442,8 @@ ReactNativeViewConfigRegistry.register(
   'IntegerPropNativeComponent',
   () => IntegerPropNativeComponentViewConfig,
 );
+
+module.exports = 'IntegerPropNativeComponent';
 ",
 }
 `;
@@ -385,16 +463,17 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const InterfaceOnlyComponentViewConfig = {
   uiViewClassName: 'InterfaceOnlyComponent',
   Commands: {},
-  Constants: {},
 
   bubblingEventTypes: {
-    onChange: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes,
+
+    topChange: {
       phasedRegistrationNames: {
         captured: 'onChangeCapture',
         bubbled: 'onChange'
@@ -402,9 +481,14 @@ const InterfaceOnlyComponentViewConfig = {
     }
   },
 
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
+
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     accessibilityHint: true,
-    style: ReactNativeStyleAttributes
+    onChange: true
   }
 };
 
@@ -412,6 +496,8 @@ ReactNativeViewConfigRegistry.register(
   'InterfaceOnlyComponent',
   () => InterfaceOnlyComponentViewConfig,
 );
+
+module.exports = 'InterfaceOnlyComponent';
 ",
 }
 `;
@@ -431,20 +517,27 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const ImageColorPropNativeComponentViewConfig = {
   uiViewClassName: 'ImageColorPropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
     thumbImage: { process: require('resolveAssetSource') },
     color: { process: require('processColor') },
     thumbTintColor: { process: require('processColor') },
-    point: { diff: require('pointsDiffer') },
-    style: ReactNativeStyleAttributes
+    point: { diff: require('pointsDiffer') }
   }
 };
 
@@ -452,6 +545,8 @@ ReactNativeViewConfigRegistry.register(
   'ImageColorPropNativeComponent',
   () => ImageColorPropNativeComponentViewConfig,
 );
+
+module.exports = 'ImageColorPropNativeComponent';
 ",
 }
 `;
@@ -471,17 +566,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const PointPropNativeComponentViewConfig = {
   uiViewClassName: 'PointPropNativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    startPoint: { diff: require('pointsDiffer') },
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    startPoint: { diff: require('pointsDiffer') }
   }
 };
 
@@ -489,6 +591,8 @@ ReactNativeViewConfigRegistry.register(
   'PointPropNativeComponent',
   () => PointPropNativeComponentViewConfig,
 );
+
+module.exports = 'PointPropNativeComponent';
 ",
 }
 `;
@@ -508,17 +612,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const StringPropComponentViewConfig = {
   uiViewClassName: 'StringPropComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    accessibilityHint: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    accessibilityHint: true
   }
 };
 
@@ -526,6 +637,8 @@ ReactNativeViewConfigRegistry.register(
   'StringPropComponent',
   () => StringPropComponentViewConfig,
 );
+
+module.exports = 'StringPropComponent';
 ",
 }
 `;
@@ -545,17 +658,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const MultiFile1NativeComponentViewConfig = {
   uiViewClassName: 'MultiFile1NativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    disabled: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    disabled: true
   }
 };
 
@@ -564,14 +684,23 @@ ReactNativeViewConfigRegistry.register(
   () => MultiFile1NativeComponentViewConfig,
 );
 
+module.exports = 'MultiFile1NativeComponent';
+
 const MultiFile2NativeComponentViewConfig = {
   uiViewClassName: 'MultiFile2NativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    disabled: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    disabled: true
   }
 };
 
@@ -579,6 +708,8 @@ ReactNativeViewConfigRegistry.register(
   'MultiFile2NativeComponent',
   () => MultiFile2NativeComponentViewConfig,
 );
+
+module.exports = 'MultiFile2NativeComponent';
 ",
 }
 `;
@@ -598,17 +729,24 @@ Map {
 
 'use strict';
 
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
 
 const MultiComponent1NativeComponentViewConfig = {
   uiViewClassName: 'MultiComponent1NativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    disabled: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    disabled: true
   }
 };
 
@@ -617,14 +755,23 @@ ReactNativeViewConfigRegistry.register(
   () => MultiComponent1NativeComponentViewConfig,
 );
 
+module.exports = 'MultiComponent1NativeComponent';
+
 const MultiComponent2NativeComponentViewConfig = {
   uiViewClassName: 'MultiComponent2NativeComponent',
   Commands: {},
-  Constants: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes
+  },
 
   validAttributes: {
-    disabled: true,
-    style: ReactNativeStyleAttributes
+    ...ReactNativeViewViewConfig.validAttributes,
+    disabled: true
   }
 };
 
@@ -632,6 +779,8 @@ ReactNativeViewConfigRegistry.register(
   'MultiComponent2NativeComponent',
   () => MultiComponent2NativeComponentViewConfig,
 );
+
+module.exports = 'MultiComponent2NativeComponent';
 ",
 }
 `;