Generate ImageSource

Summary: Generates the ImageSource primitive for components like Slider

Reviewed By: TheSavior

Differential Revision: D14262452

fbshipit-source-id: 29df3d64706633b51c784fa9acf2f054a510de76

packages/react-native-codegen/BUCK

@@ -63,6 +63,14 @@ rn_codegen_test(
     fixture_name = "COLOR_PROP",
 )
 
+rn_codegen_test(
+    fixture_name = "IMAGE_PROP",
+)
+
+rn_codegen_test(
+    fixture_name = "MULTI_NATIVE_PROP",
+)
+
 rn_codegen_test(
     fixture_name = "ENUM_PROP",
 )
@@ -105,7 +113,9 @@ fb_xplat_cxx_binary(
         ":generated_components-EVENT_NESTED_OBJECT_PROPS",
         ":generated_components-EVENT_PROPS",
         ":generated_components-FLOAT_PROPS",
+        ":generated_components-IMAGE_PROP",
         ":generated_components-INTEGER_PROPS",
+        ":generated_components-MULTI_NATIVE_PROP",
         ":generated_components-STRING_PROP",
         ":generated_components-TWO_COMPONENTS_DIFFERENT_FILES",
         ":generated_components-TWO_COMPONENTS_SAME_FILE",
@@ -137,7 +147,9 @@ rn_xplat_cxx_library(
         ":generated_components-EVENT_NESTED_OBJECT_PROPS",
         ":generated_components-EVENT_PROPS",
         ":generated_components-FLOAT_PROPS",
+        ":generated_components-IMAGE_PROP",
         ":generated_components-INTEGER_PROPS",
+        ":generated_components-MULTI_NATIVE_PROP",
         ":generated_components-STRING_PROP",
         ":generated_components-TWO_COMPONENTS_DIFFERENT_FILES",
         ":generated_components-TWO_COMPONENTS_SAME_FILE",

packages/react-native-codegen/DEFS.bzl

@@ -129,6 +129,8 @@ def rn_codegen(
             react_native_xplat_target("fabric/debug:debug"),
             react_native_xplat_target("fabric/core:core"),
             react_native_xplat_target("fabric/graphics:graphics"),
+            react_native_xplat_target("fabric/components/image:image"),
+            react_native_xplat_target("fabric/imagemanager:imagemanager"),
             react_native_xplat_target("fabric/components/view:view"),
         ],
     )

packages/react-native-codegen/buck_tests/emptyFile.cpp

@@ -3,6 +3,8 @@
 #import <react/components/INTEGER_PROPS/ComponentDescriptors.h>
 #import <react/components/FLOAT_PROPS/ComponentDescriptors.h>
 #import <react/components/COLOR_PROP/ComponentDescriptors.h>
+#import <react/components/IMAGE_PROP/ComponentDescriptors.h>
+#import <react/components/MULTI_NATIVE_PROP/ComponentDescriptors.h>
 #import <react/components/ENUM_PROP/ComponentDescriptors.h>
 #import <react/components/EVENT_NESTED_OBJECT_PROPS/ComponentDescriptors.h>
 #import <react/components/EVENT_PROPS/ComponentDescriptors.h>

packages/react-native-codegen/src/CodegenSchema.js

@@ -64,7 +64,7 @@ type PropTypeTypeAnnotation =
     |}>
   | $ReadOnly<{|
       type: 'NativePrimitiveTypeAnnotation',
-      name: 'ColorPrimitive',
+      name: 'ColorPrimitive' | 'ImageSourcePrimitive',
     |}>;
 
 export type PropTypeShape = $ReadOnly<{|

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

@@ -24,7 +24,7 @@ const template = `
  */
 
 #include <react/components/::_LIBRARY_::/Props.h>
-#include <react/core/propsConversions.h>
+::_IMPORTS_::
 
 namespace facebook {
 namespace react {
@@ -79,9 +79,36 @@ function getClassExtendString(component): string {
   return extendString;
 }
 
+function getImports(component): Set<string> {
+  const imports: Set<string> = new Set();
+  component.props.forEach(prop => {
+    const typeAnnotation = prop.typeAnnotation;
+
+    if (typeAnnotation.type === 'NativePrimitiveTypeAnnotation') {
+      switch (typeAnnotation.name) {
+        case 'ColorPrimitive':
+          return;
+        case 'ImageSourcePrimitive':
+          imports.add('#include <react/components/image/conversions.h>');
+          return;
+        default:
+          (typeAnnotation.name: empty);
+          throw new Error(
+            `Invalid NativePrimitiveTypeAnnotation name, got ${prop.name}`,
+          );
+      }
+    }
+  });
+
+  return imports;
+}
+
 module.exports = {
   generate(libraryName: string, schema: SchemaType): FilesOutput {
     const fileName = 'Props.cpp';
+    const allImports: Set<string> = new Set([
+      '#include <react/core/propsConversions.h>',
+    ]);
 
     const componentProps = Object.keys(schema.modules)
       .map(moduleName => {
@@ -99,6 +126,9 @@ module.exports = {
             const propsString = generatePropsString(component);
             const extendString = getClassExtendString(component);
 
+            const imports = getImports(component);
+            imports.forEach(allImports.add, allImports);
+
             const replacedTemplate = componentTemplate
               .replace(/::_CLASSNAME_::/g, newName)
               .replace('::_EXTEND_CLASSES_::', extendString)
@@ -113,7 +143,15 @@ module.exports = {
 
     const replacedTemplate = template
       .replace(/::_COMPONENT_CLASSES_::/g, componentProps)
-      .replace('::_LIBRARY_::', libraryName);
+      .replace('::_LIBRARY_::', libraryName)
+      .replace(
+        '::_IMPORTS_::',
+
+        Array.from(allImports)
+          .sort()
+          .join('\n')
+          .trim(),
+      );
 
     return new Map([[fileName, replacedTemplate]]);
   },

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

@@ -106,6 +106,8 @@ function getNativeTypeFromAnnotation(componentName: string, prop): string {
       switch (typeAnnotation.name) {
         case 'ColorPrimitive':
           return 'SharedColor';
+        case 'ImageSourcePrimitive':
+          return 'ImageSource';
         default:
           (typeAnnotation.name: empty);
           throw new Error('Receieved unknown NativePrimitiveTypeAnnotation');
@@ -136,6 +138,8 @@ function convertDefaultTypeToString(componentName: string, prop): string {
       switch (typeAnnotation.name) {
         case 'ColorPrimitive':
           return '';
+        case 'ImageSourcePrimitive':
+          return '';
         default:
           (typeAnnotation.name: empty);
           throw new Error('Receieved unknown NativePrimitiveTypeAnnotation');
@@ -239,6 +243,9 @@ function getImports(component): Set<string> {
         case 'ColorPrimitive':
           imports.add('#include <react/graphics/Color.h>');
           return;
+        case 'ImageSourcePrimitive':
+          imports.add('#include <react/imagemanager/primitives.h>');
+          return;
         default:
           (typeAnnotation.name: empty);
           throw new Error(

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

@@ -51,6 +51,9 @@ function getReactDiffProcessValue(prop) {
       switch (typeAnnotation.name) {
         case 'ColorPrimitive':
           return j.template.expression`${nativeTypesString}.ColorPrimitive`;
+        case 'ImageSourcePrimitive':
+          return j.template
+            .expression`${nativeTypesString}.ImageSourcePrimitive`;
         default:
           (typeAnnotation.name: empty);
           throw new Error('Receieved unknown NativePrimitiveTypeAnnotation');

packages/react-native-codegen/src/generators/__test_fixtures__/fixtures.js

@@ -200,6 +200,78 @@ const COLOR_PROP: SchemaType = {
   },
 };
 
+const IMAGE_PROP: SchemaType = {
+  modules: {
+    Slider: {
+      components: {
+        ImagePropNativeComponent: {
+          extendsProps: [
+            {
+              type: 'ReactNativeBuiltInType',
+              knownTypeName: 'ReactNativeCoreViewProps',
+            },
+          ],
+          events: [],
+          props: [
+            {
+              name: 'thumbImage',
+              optional: true,
+              typeAnnotation: {
+                type: 'NativePrimitiveTypeAnnotation',
+                name: 'ImageSourcePrimitive',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+const MULTI_NATIVE_PROP: SchemaType = {
+  modules: {
+    Slider: {
+      components: {
+        ImageColorPropNativeComponent: {
+          extendsProps: [
+            {
+              type: 'ReactNativeBuiltInType',
+              knownTypeName: 'ReactNativeCoreViewProps',
+            },
+          ],
+          events: [],
+          props: [
+            {
+              name: 'thumbImage',
+              optional: true,
+              typeAnnotation: {
+                type: 'NativePrimitiveTypeAnnotation',
+                name: 'ImageSourcePrimitive',
+              },
+            },
+            {
+              name: 'color',
+              optional: true,
+              typeAnnotation: {
+                type: 'NativePrimitiveTypeAnnotation',
+                name: 'ColorPrimitive',
+              },
+            },
+            {
+              name: 'thumbTintColor',
+              optional: true,
+              typeAnnotation: {
+                type: 'NativePrimitiveTypeAnnotation',
+                name: 'ColorPrimitive',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
 const ENUM_PROP: SchemaType = {
   modules: {
     Switch: {
@@ -513,6 +585,8 @@ module.exports = {
   INTEGER_PROPS,
   FLOAT_PROPS,
   COLOR_PROP,
+  IMAGE_PROP,
+  MULTI_NATIVE_PROP,
   ENUM_PROP,
   EVENT_PROPS,
   EVENT_NESTED_OBJECT_PROPS,

packages/react-native-codegen/src/generators/__tests__/GenerateComponentDescriptorH-test.js

@@ -19,6 +19,8 @@ const {
   INTEGER_PROPS,
   FLOAT_PROPS,
   COLOR_PROP,
+  IMAGE_PROP,
+  MULTI_NATIVE_PROP,
   ENUM_PROP,
   EVENT_PROPS,
   TWO_COMPONENTS_SAME_FILE,
@@ -48,6 +50,16 @@ describe('GenerateComponentDescriptorH', () => {
     expect(generator.generate('COLOR_PROP', COLOR_PROP)).toMatchSnapshot();
   });
 
+  it('can generate a native primitive image prop', () => {
+    expect(generator.generate('IMAGE_PROP', IMAGE_PROP)).toMatchSnapshot();
+  });
+
+  it('can generate multiple native props', () => {
+    expect(
+      generator.generate('MULTI_NATIVE_PROP', MULTI_NATIVE_PROP),
+    ).toMatchSnapshot();
+  });
+
   it('can generate enum props', () => {
     expect(generator.generate('ENUM_PROP', ENUM_PROP)).toMatchSnapshot();
   });

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

@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GenerateComponentDescriptorH can generate a native primitive image prop 1`] = `
+Map {
+  "ComponentDescriptors.h" => "
+/**
+ * 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.
+ */
+
+#pragma once
+
+#include <react/components/IMAGE_PROP/ShadowNodes.h>
+#include <react/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using ImagePropNativeComponentComponentDescriptor = ConcreteComponentDescriptor<ImagePropNativeComponentShadowNode>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateComponentDescriptorH can generate a single boolean prop 1`] = `
 Map {
   "ComponentDescriptors.h" => "
@@ -182,6 +208,32 @@ using IntegerPropNativeComponentComponentDescriptor = ConcreteComponentDescripto
 }
 `;
 
+exports[`GenerateComponentDescriptorH can generate multiple native props 1`] = `
+Map {
+  "ComponentDescriptors.h" => "
+/**
+ * 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.
+ */
+
+#pragma once
+
+#include <react/components/MULTI_NATIVE_PROP/ShadowNodes.h>
+#include <react/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using ImageColorPropNativeComponentComponentDescriptor = ConcreteComponentDescriptor<ImageColorPropNativeComponentShadowNode>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateComponentDescriptorH supports two components from different modules 1`] = `
 Map {
   "ComponentDescriptors.h" => "

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

@@ -166,6 +166,29 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterCpp can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "EventEmitters.cpp" => "
+/**
+ * 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.
+ */
+
+#include <react/components/IMAGE_PROP/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",
@@ -189,6 +212,29 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterCpp can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "EventEmitters.cpp" => "
+/**
+ * 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.
+ */
+
+#include <react/components/MULTI_NATIVE_PROP/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",

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

@@ -175,6 +175,30 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterH can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "EventEmitters.h" => "
+/**
+ * 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.
+ */
+#pragma once
+
+#include <react/components/view/ViewEventEmitter.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",
@@ -199,6 +223,30 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterH can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "EventEmitters.h" => "
+/**
+ * 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.
+ */
+#pragma once
+
+#include <react/components/view/ViewEventEmitter.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",

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

@@ -178,6 +178,36 @@ blurRadius5(convertRawProp(rawProps, \\"blurRadius5\\", sourceProps.blurRadius5,
 }
 `;
 
+exports[`GeneratePropsCpp can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "Props.cpp" => "
+/**
+ * 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.
+ */
+
+#include <react/components/IMAGE_PROP/Props.h>
+#include <react/components/image/conversions.h>
+#include <react/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+ImagePropNativeComponentProps::ImagePropNativeComponentProps(
+    const ImagePropNativeComponentProps &sourceProps,
+    const RawProps &rawProps): ViewProps(sourceProps, rawProps),
+
+    thumbImage(convertRawProp(rawProps, \\"thumbImage\\", sourceProps.thumbImage, thumbImage))
+      {}
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsCpp can generate fixture INTEGER_PROPS 1`] = `
 Map {
   "Props.cpp" => "
@@ -209,6 +239,38 @@ progress3(convertRawProp(rawProps, \\"progress3\\", sourceProps.progress3, progr
 }
 `;
 
+exports[`GeneratePropsCpp can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "Props.cpp" => "
+/**
+ * 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.
+ */
+
+#include <react/components/MULTI_NATIVE_PROP/Props.h>
+#include <react/components/image/conversions.h>
+#include <react/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+ImageColorPropNativeComponentProps::ImageColorPropNativeComponentProps(
+    const ImageColorPropNativeComponentProps &sourceProps,
+    const RawProps &rawProps): ViewProps(sourceProps, rawProps),
+
+    thumbImage(convertRawProp(rawProps, \\"thumbImage\\", sourceProps.thumbImage, thumbImage)),
+color(convertRawProp(rawProps, \\"color\\", sourceProps.color, color)),
+thumbTintColor(convertRawProp(rawProps, \\"thumbTintColor\\", sourceProps.thumbTintColor, thumbTintColor))
+      {}
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsCpp can generate fixture STRING_PROP 1`] = `
 Map {
   "Props.cpp" => "

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

@@ -209,6 +209,38 @@ const Float blurRadius5{1.0};
 }
 `;
 
+exports[`GeneratePropsH can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "Props.h" => "
+/**
+ * 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.
+ */
+
+#include <react/components/view/ViewProps.h>
+#include <react/imagemanager/primitives.h>
+
+namespace facebook {
+namespace react {
+
+class ImagePropNativeComponentProps final : public ViewProps {
+ public:
+  ImagePropNativeComponentProps() = default;
+  ImagePropNativeComponentProps(const ImagePropNativeComponentProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  const ImageSource thumbImage{};
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsH can generate fixture INTEGER_PROPS 1`] = `
 Map {
   "Props.h" => "
@@ -242,6 +274,41 @@ const int progress3{10};
 }
 `;
 
+exports[`GeneratePropsH can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "Props.h" => "
+/**
+ * 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.
+ */
+
+#include <react/components/view/ViewProps.h>
+#include <react/graphics/Color.h>
+#include <react/imagemanager/primitives.h>
+
+namespace facebook {
+namespace react {
+
+class ImageColorPropNativeComponentProps final : public ViewProps {
+ public:
+  ImageColorPropNativeComponentProps() = default;
+  ImageColorPropNativeComponentProps(const ImageColorPropNativeComponentProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  const ImageSource thumbImage{};
+const SharedColor color{};
+const SharedColor thumbTintColor{};
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsH can generate fixture STRING_PROP 1`] = `
 Map {
   "Props.h" => "

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

@@ -138,6 +138,29 @@ extern const char FloatPropNativeComponentComponentName[] = \\"FloatPropNativeCo
 }
 `;
 
+exports[`GenerateShadowNodeCpp can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "ShadowNodes.cpp" => "
+/**
+ * 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.
+ */
+
+#include <react/components/IMAGE_PROP/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char ImagePropNativeComponentComponentName[] = \\"ImagePropNativeComponent\\";
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeCpp can generate fixture INTEGER_PROPS 1`] = `
 Map {
   "ShadowNodes.cpp" => "
@@ -161,6 +184,29 @@ extern const char IntegerPropNativeComponentComponentName[] = \\"IntegerPropNati
 }
 `;
 
+exports[`GenerateShadowNodeCpp can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "ShadowNodes.cpp" => "
+/**
+ * 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.
+ */
+
+#include <react/components/MULTI_NATIVE_PROP/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char ImageColorPropNativeComponentComponentName[] = \\"ImageColorPropNativeComponent\\";
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeCpp can generate fixture STRING_PROP 1`] = `
 Map {
   "ShadowNodes.cpp" => "

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

@@ -202,6 +202,39 @@ using FloatPropNativeComponentShadowNode = ConcreteViewShadowNode<
 }
 `;
 
+exports[`GenerateShadowNodeH can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "ShadowNodes.h" => "
+/**
+ * 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.
+ */
+
+#pragma once
+
+#include <react/components/IMAGE_PROP/Props.h>
+#include <react/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook {
+namespace react {
+
+extern const char ImagePropNativeComponentComponentName[];
+
+/*
+ * \`ShadowNode\` for <ImagePropNativeComponent> component.
+ */
+using ImagePropNativeComponentShadowNode = ConcreteViewShadowNode<
+    ImagePropNativeComponentComponentName,
+    ImagePropNativeComponentProps>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeH can generate fixture INTEGER_PROPS 1`] = `
 Map {
   "ShadowNodes.h" => "
@@ -235,6 +268,39 @@ using IntegerPropNativeComponentShadowNode = ConcreteViewShadowNode<
 }
 `;
 
+exports[`GenerateShadowNodeH can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "ShadowNodes.h" => "
+/**
+ * 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.
+ */
+
+#pragma once
+
+#include <react/components/MULTI_NATIVE_PROP/Props.h>
+#include <react/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook {
+namespace react {
+
+extern const char ImageColorPropNativeComponentComponentName[];
+
+/*
+ * \`ShadowNode\` for <ImageColorPropNativeComponent> component.
+ */
+using ImageColorPropNativeComponentShadowNode = ConcreteViewShadowNode<
+    ImageColorPropNativeComponentComponentName,
+    ImageColorPropNativeComponentProps>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeH can generate fixture STRING_PROP 1`] = `
 Map {
   "ShadowNodes.h" => "

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

@@ -238,6 +238,41 @@ ReactNativeViewConfigRegistry.register(
 }
 `;
 
+exports[`GenerateViewConfigJs can generate fixture IMAGE_PROP 1`] = `
+Map {
+  "ViewConfigs.js" => "
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
+const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+
+const ImagePropNativeComponentViewConfig = {
+  uiViewClassName: 'ImagePropNativeComponent',
+
+  validAttributes: {
+    thumbImage: require('react-native').__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.NativePrimitives.ImageSourcePrimitive,
+    style: ReactNativeStyleAttributes
+  }
+};
+
+ReactNativeViewConfigRegistry.register(
+  'ImagePropNativeComponent',
+  () => ImagePropNativeComponentViewConfig,
+);
+",
+}
+`;
+
 exports[`GenerateViewConfigJs can generate fixture INTEGER_PROPS 1`] = `
 Map {
   "ViewConfigs.js" => "
@@ -275,6 +310,43 @@ ReactNativeViewConfigRegistry.register(
 }
 `;
 
+exports[`GenerateViewConfigJs can generate fixture MULTI_NATIVE_PROP 1`] = `
+Map {
+  "ViewConfigs.js" => "
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
+const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+
+const ImageColorPropNativeComponentViewConfig = {
+  uiViewClassName: 'ImageColorPropNativeComponent',
+
+  validAttributes: {
+    thumbImage: require('react-native').__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.NativePrimitives.ImageSourcePrimitive,
+    color: require('react-native').__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.NativePrimitives.ColorPrimitive,
+    thumbTintColor: require('react-native').__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.NativePrimitives.ColorPrimitive,
+    style: ReactNativeStyleAttributes
+  }
+};
+
+ReactNativeViewConfigRegistry.register(
+  'ImageColorPropNativeComponent',
+  () => ImageColorPropNativeComponentViewConfig,
+);
+",
+}
+`;
+
 exports[`GenerateViewConfigJs can generate fixture STRING_PROP 1`] = `
 Map {
   "ViewConfigs.js" => "