Add ImageSource and ImageRequest to generate custom NativeState (#34910)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/34910

This Diff adds supports on the CustomState generation for ImageSource and ImageRequests, to enable NativeComponents to use the ImageSource loading provided by React Native.

To achieve this, I also had to fox some errors in the imports and to introduce some functions to decorate parameters.

This diff also introduces the tests for thise additional types in both generators and parsers.

## Changelog
[General][Added] - add support for ImageSource and ImageRequest in the State.

Reviewed By: cortinico

Differential Revision: D39884889

fbshipit-source-id: ae3d2d51dfe6a4fe688dc78fec83f428beb8d443

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

@@ -183,7 +183,8 @@ export type ReservedPropTypeAnnotation = $ReadOnly<{
     | 'ColorPrimitive'
     | 'ImageSourcePrimitive'
     | 'PointPrimitive'
-    | 'EdgeInsetsPrimitive',
+    | 'EdgeInsetsPrimitive'
+    | 'ImageRequestPrimitive',
 }>;
 
 export type StateTypeAnnotation = PropTypeAnnotation;

packages/react-native-codegen/src/generators/components/ComponentsGeneratorUtils.js

@@ -32,6 +32,7 @@ const {
   getEnumMaskName,
   getEnumName,
   generateStructName,
+  getImports,
 } = require('./CppHelpers.js');
 
 function getNativeTypeFromAnnotation(
@@ -77,6 +78,8 @@ function getNativeTypeFromAnnotation(
           return 'SharedColor';
         case 'ImageSourcePrimitive':
           return 'ImageSource';
+        case 'ImageRequestPrimitive':
+          return 'ImageRequest';
         case 'PointPrimitive':
           return 'Point';
         case 'EdgeInsetsPrimitive':
@@ -152,7 +155,181 @@ function getStateConstituents(
   };
 }
 
+/// This function process some types if we need to customize them
+/// For example, the ImageSource and the reserved types could be trasformed into
+/// const address instead of using them as plain types.
+function convertTypesToConstAddressIfNeeded(
+  type: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `${type} const &`;
+  }
+  return type;
+}
+
+function convertValueToSharedPointerWithMove(
+  type: string,
+  value: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `std::make_shared<${type}>(std::move(${value}))`;
+  }
+  return value;
+}
+
+function convertVariableToSharedPointer(
+  type: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `std::shared_ptr<${type}>`;
+  }
+  return type;
+}
+
+function convertVariableToPointer(
+  type: string,
+  value: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `*${value}`;
+  }
+  return value;
+}
+
+const convertCtorParamToAddressType = (type: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageSource');
+
+  return convertTypesToConstAddressIfNeeded(type, typesToConvert);
+};
+
+const convertCtorInitToSharedPointers = (
+  type: string,
+  value: string,
+): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertValueToSharedPointerWithMove(type, value, typesToConvert);
+};
+
+const convertGettersReturnTypeToAddressType = (type: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertTypesToConstAddressIfNeeded(type, typesToConvert);
+};
+
+const convertVarTypeToSharedPointer = (type: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertVariableToSharedPointer(type, typesToConvert);
+};
+
+const convertVarValueToPointer = (type: string, value: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertVariableToPointer(type, value, typesToConvert);
+};
+
+function getLocalImports(
+  properties:
+    | $ReadOnlyArray<NamedShape<PropTypeAnnotation>>
+    | $ReadOnlyArray<NamedShape<StateTypeAnnotation>>,
+): Set<string> {
+  const imports: Set<string> = new Set();
+
+  function addImportsForNativeName(
+    name:
+      | 'ColorPrimitive'
+      | 'EdgeInsetsPrimitive'
+      | 'ImageSourcePrimitive'
+      | 'PointPrimitive'
+      | 'ImageRequestPrimitive',
+  ) {
+    switch (name) {
+      case 'ColorPrimitive':
+        imports.add('#include <react/renderer/graphics/Color.h>');
+        return;
+      case 'ImageSourcePrimitive':
+        imports.add('#include <react/renderer/imagemanager/primitives.h>');
+        return;
+      case 'ImageRequestPrimitive':
+        imports.add('#include <react/renderer/imagemanager/ImageRequest.h>');
+        return;
+      case 'PointPrimitive':
+        imports.add('#include <react/renderer/graphics/Geometry.h>');
+        return;
+      case 'EdgeInsetsPrimitive':
+        imports.add('#include <react/renderer/graphics/Geometry.h>');
+        return;
+      default:
+        (name: empty);
+        throw new Error(`Invalid ReservedPropTypeAnnotation name, got ${name}`);
+    }
+  }
+
+  properties.forEach(prop => {
+    const typeAnnotation = prop.typeAnnotation;
+
+    if (typeAnnotation.type === 'ReservedPropTypeAnnotation') {
+      addImportsForNativeName(typeAnnotation.name);
+    }
+
+    if (typeAnnotation.type === 'ArrayTypeAnnotation') {
+      imports.add('#include <vector>');
+      if (typeAnnotation.elementType.type === 'StringEnumTypeAnnotation') {
+        imports.add('#include <cinttypes>');
+      }
+    }
+
+    if (
+      typeAnnotation.type === 'ArrayTypeAnnotation' &&
+      typeAnnotation.elementType.type === 'ReservedPropTypeAnnotation'
+    ) {
+      addImportsForNativeName(typeAnnotation.elementType.name);
+    }
+
+    if (
+      typeAnnotation.type === 'ArrayTypeAnnotation' &&
+      typeAnnotation.elementType.type === 'ObjectTypeAnnotation'
+    ) {
+      const objectProps = typeAnnotation.elementType.properties;
+      const objectImports = getImports(objectProps);
+      const localImports = getLocalImports(objectProps);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      objectImports.forEach(imports.add, imports);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      localImports.forEach(imports.add, imports);
+    }
+
+    if (typeAnnotation.type === 'ObjectTypeAnnotation') {
+      imports.add('#include <react/renderer/core/propsConversions.h>');
+      const objectImports = getImports(typeAnnotation.properties);
+      const localImports = getLocalImports(typeAnnotation.properties);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      objectImports.forEach(imports.add, imports);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      localImports.forEach(imports.add, imports);
+    }
+  });
+
+  return imports;
+}
+
 module.exports = {
   getNativeTypeFromAnnotation,
   getStateConstituents,
+  convertCtorParamToAddressType,
+  convertGettersReturnTypeToAddressType,
+  convertCtorInitToSharedPointers,
+  convertVarTypeToSharedPointer,
+  convertVarValueToPointer,
+  getLocalImports,
 };

packages/react-native-codegen/src/generators/components/CppHelpers.js

@@ -61,6 +61,7 @@ function getImports(
     name:
       | 'ColorPrimitive'
       | 'EdgeInsetsPrimitive'
+      | 'ImageRequestPrimitive'
       | 'ImageSourcePrimitive'
       | 'PointPrimitive',
   ) {
@@ -71,6 +72,8 @@ function getImports(
         return;
       case 'EdgeInsetsPrimitive':
         return;
+      case 'ImageRequestPrimitive':
+        return;
       case 'ImageSourcePrimitive':
         imports.add('#include <react/renderer/components/image/conversions.h>');
         return;
@@ -163,6 +166,8 @@ function convertDefaultTypeToString(
           return '';
         case 'ImageSourcePrimitive':
           return '';
+        case 'ImageRequestPrimitive':
+          return '';
         case 'PointPrimitive':
           return '';
         case 'EdgeInsetsPrimitive':

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

@@ -11,7 +11,10 @@
 'use strict';
 import type {ComponentShape} from '../../CodegenSchema';
 
-const {getNativeTypeFromAnnotation} = require('./ComponentsGeneratorUtils.js');
+const {
+  getNativeTypeFromAnnotation,
+  getLocalImports,
+} = require('./ComponentsGeneratorUtils.js');
 
 const {
   convertDefaultTypeToString,
@@ -19,7 +22,6 @@ const {
   getEnumName,
   toSafeCppString,
   generateStructName,
-  getImports,
   toIntEnumValueName,
 } = require('./CppHelpers.js');
 
@@ -500,85 +502,6 @@ function getExtendsImports(
   return imports;
 }
 
-function getLocalImports(
-  properties: $ReadOnlyArray<NamedShape<PropTypeAnnotation>>,
-): Set<string> {
-  const imports: Set<string> = new Set();
-
-  function addImportsForNativeName(
-    name:
-      | 'ColorPrimitive'
-      | 'EdgeInsetsPrimitive'
-      | 'ImageSourcePrimitive'
-      | 'PointPrimitive',
-  ) {
-    switch (name) {
-      case 'ColorPrimitive':
-        imports.add('#include <react/renderer/graphics/Color.h>');
-        return;
-      case 'ImageSourcePrimitive':
-        imports.add('#include <react/renderer/imagemanager/primitives.h>');
-        return;
-      case 'PointPrimitive':
-        imports.add('#include <react/renderer/graphics/Geometry.h>');
-        return;
-      case 'EdgeInsetsPrimitive':
-        imports.add('#include <react/renderer/graphics/Geometry.h>');
-        return;
-      default:
-        (name: empty);
-        throw new Error(`Invalid ReservedPropTypeAnnotation name, got ${name}`);
-    }
-  }
-
-  properties.forEach(prop => {
-    const typeAnnotation = prop.typeAnnotation;
-
-    if (typeAnnotation.type === 'ReservedPropTypeAnnotation') {
-      addImportsForNativeName(typeAnnotation.name);
-    }
-
-    if (typeAnnotation.type === 'ArrayTypeAnnotation') {
-      imports.add('#include <vector>');
-      if (typeAnnotation.elementType.type === 'StringEnumTypeAnnotation') {
-        imports.add('#include <cinttypes>');
-      }
-    }
-
-    if (
-      typeAnnotation.type === 'ArrayTypeAnnotation' &&
-      typeAnnotation.elementType.type === 'ReservedPropTypeAnnotation'
-    ) {
-      addImportsForNativeName(typeAnnotation.elementType.name);
-    }
-
-    if (
-      typeAnnotation.type === 'ArrayTypeAnnotation' &&
-      typeAnnotation.elementType.type === 'ObjectTypeAnnotation'
-    ) {
-      const objectProps = typeAnnotation.elementType.properties;
-      const objectImports = getImports(objectProps);
-      const localImports = getLocalImports(objectProps);
-      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-      objectImports.forEach(imports.add, imports);
-      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-      localImports.forEach(imports.add, imports);
-    }
-
-    if (typeAnnotation.type === 'ObjectTypeAnnotation') {
-      imports.add('#include <react/renderer/core/propsConversions.h>');
-      const objectImports = getImports(typeAnnotation.properties);
-      const localImports = getLocalImports(typeAnnotation.properties);
-      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-      objectImports.forEach(imports.add, imports);
-      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-      localImports.forEach(imports.add, imports);
-    }
-  });
-
-  return imports;
-}
-
 function generateStructsForComponent(
   componentName: string,
   component: ComponentShape,

packages/react-native-codegen/src/generators/components/GeneratePropsJavaDelegate.js

@@ -122,6 +122,8 @@ function getJavaValueForProp(
           return 'ColorPropConverter.getColor(value, view.getContext())';
         case 'ImageSourcePrimitive':
           return '(ReadableMap) value';
+        case 'ImageRequestPrimitive':
+          return '(ReadableMap) value';
         case 'PointPrimitive':
           return '(ReadableMap) value';
         case 'EdgeInsetsPrimitive':

packages/react-native-codegen/src/generators/components/GeneratePropsJavaInterface.js

@@ -97,6 +97,9 @@ function getJavaValueForProp(
         case 'ImageSourcePrimitive':
           addNullable(imports);
           return '@Nullable ReadableMap value';
+        case 'ImageRequestPrimitive':
+          addNullable(imports);
+          return '@Nullable ReadableMap value';
         case 'PointPrimitive':
           addNullable(imports);
           return '@Nullable ReadableMap value';

packages/react-native-codegen/src/generators/components/GeneratePropsJavaPojo/serializePojo.js

@@ -81,6 +81,12 @@ function toJavaType(
           importReadableMap();
           return '@Nullable ReadableMap';
 
+        // TODO: Make ImageRequestPrimitive type-safe
+        case 'ImageRequestPrimitive':
+          importNullable();
+          importReadableMap();
+          return '@Nullable ReadableMap';
+
         // TODO: Make PointPrimitive type-safe
         case 'PointPrimitive':
           importNullable();
@@ -162,6 +168,11 @@ function toJavaType(
                 importReadableMap();
                 return 'ReadableMap';
 
+              // TODO: Make ImageRequestPrimitive type-safe
+              case 'ImageRequestPrimitive':
+                importReadableMap();
+                return 'ReadableMap';
+
               // TODO: Make PointPrimitive type-safe
               case 'PointPrimitive':
                 importReadableMap();

packages/react-native-codegen/src/generators/components/GenerateStateCpp.js

@@ -16,7 +16,11 @@ import type {
   StateTypeAnnotation,
 } from '../../CodegenSchema';
 const {capitalize} = require('../Utils.js');
-const {getStateConstituents} = require('./ComponentsGeneratorUtils.js');
+const {
+  getStateConstituents,
+  convertGettersReturnTypeToAddressType,
+  convertVarValueToPointer,
+} = require('./ComponentsGeneratorUtils.js');
 
 // File path -> contents
 type FilesOutput = Map<string, string>;
@@ -59,8 +63,10 @@ function generateStrings(
     );
 
     getters += `
-${type} ${componentName}::get${capitalize(name)}() const {
-  return ${varName};
+${convertGettersReturnTypeToAddressType(
+  type,
+)} ${componentName}State::get${capitalize(name)}() const {
+  return ${convertVarValueToPointer(type, varName)};
 }
 `;
   });

packages/react-native-codegen/src/generators/components/GenerateStateH.js

@@ -16,16 +16,25 @@ import type {
   StateTypeAnnotation,
 } from '../../CodegenSchema';
 const {capitalize} = require('../Utils.js');
-const {getStateConstituents} = require('./ComponentsGeneratorUtils.js');
+const {
+  getStateConstituents,
+  convertCtorParamToAddressType,
+  convertGettersReturnTypeToAddressType,
+  convertCtorInitToSharedPointers,
+  convertVarTypeToSharedPointer,
+  getLocalImports,
+} = require('./ComponentsGeneratorUtils.js');
 
 // File path -> contents
 type FilesOutput = Map<string, string>;
 
 const FileTemplate = ({
   libraryName,
+  imports,
   stateClasses,
 }: {
   libraryName: string,
+  imports: string,
   stateClasses: string,
 }) =>
   `
@@ -47,6 +56,8 @@ const FileTemplate = ({
 #include <react/renderer/mapbuffer/MapBufferBuilder.h>
 #endif
 
+${imports}
+
 namespace facebook {
 namespace react {
 
@@ -71,34 +82,31 @@ const StateTemplate = ({
 }) => {
   let stateWithParams = '';
   if (ctorParams.length > 0) {
-    stateWithParams = `
-      ${stateName}State(
-        ${ctorParams}
-      )
-      : ${ctorInits}{};
-    `;
+    stateWithParams = `${stateName}State(
+      ${ctorParams})
+    : ${ctorInits}{};`;
   }
 
   return `
 class ${stateName}State {
-    public:
-    ${stateWithParams}
-    ${stateName}State() = default;
+public:
+  ${stateWithParams}
+  ${stateName}State() = default;
 
-    ${getters}
+  ${getters}
 
 #ifdef ANDROID
-    ${stateName}State(${stateName}State const &previousState, folly::dynamic data){};
-    folly::dynamic getDynamic() const {
-      return {};
-    };
-    MapBuffer getMapBuffer() const {
-      return MapBufferBuilder::EMPTY();
-    };
+  ${stateName}State(${stateName}State const &previousState, folly::dynamic data){};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
 #endif
 
-    private:
-    ${stateProps}
+private:
+  ${stateProps}
 };
 `.trim();
 };
@@ -130,14 +138,21 @@ function generateStrings(
       stateShape,
     );
 
-    ctorParams += `      ${type} ${name},\n`;
-    ctorInits += `${varName}(${name}),\n      `;
-    getters += `${type} get${capitalize(name)}() const;\n    `;
+    ctorParams += `${convertCtorParamToAddressType(type)} ${name},\n      `;
+    ctorInits += `${varName}(${convertCtorInitToSharedPointers(
+      type,
+      name,
+    )}),\n      `;
+    getters += `${convertGettersReturnTypeToAddressType(type)} get${capitalize(
+      name,
+    )}() const;\n  `;
     let finalDefaultValue = defaultValue;
     if (defaultValue.length > 0) {
       finalDefaultValue = `{${defaultValue}}`;
     }
-    stateProps += `  ${type} ${varName}${finalDefaultValue};\n    `;
+    stateProps += `  ${convertVarTypeToSharedPointer(
+      type,
+    )} ${varName}${finalDefaultValue};\n  `;
   });
 
   // Sanitize
@@ -161,6 +176,8 @@ module.exports = {
   ): FilesOutput {
     const fileName = 'States.h';
 
+    const allImports: Set<string> = new Set();
+
     const stateClasses = Object.keys(schema.modules)
       .map(moduleName => {
         const module = schema.modules[moduleName];
@@ -194,6 +211,11 @@ module.exports = {
             const {ctorParams, ctorInits, getters, stateProps} =
               generateStrings(componentName, state);
 
+            const imports = getLocalImports(state);
+
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+            imports.forEach(allImports.add, allImports);
+
             return StateTemplate({
               stateName: componentName,
               ctorParams,
@@ -208,7 +230,11 @@ module.exports = {
       .filter(Boolean)
       .join('\n\n');
 
-    const template = FileTemplate({libraryName, stateClasses});
+    const template = FileTemplate({
+      libraryName,
+      imports: Array.from(allImports).sort().join('\n'),
+      stateClasses,
+    });
     return new Map([[fileName, template]]);
   },
 };

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

@@ -70,6 +70,8 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
         case 'ImageSourcePrimitive':
           return j.template
             .expression`{ process: require('react-native/Libraries/Image/resolveAssetSource') }`;
+        case 'ImageRequestPrimitive':
+          throw new Error('ImageRequest should not be used in props');
         case 'PointPrimitive':
           return j.template
             .expression`{ diff: require('react-native/Libraries/Utilities/differ/pointsDiffer') }`;

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

@@ -2483,6 +2483,54 @@ const COMPONENT_WITH_INT_ENUM_STATE: SchemaType = {
   },
 };
 
+const COMPONENTS_WITH_IMAGES_IN_STATE: SchemaType = {
+  modules: {
+    MyComponent: {
+      type: 'Component',
+      components: {
+        SimpleComponent: {
+          extendsProps: [
+            {
+              type: 'ReactNativeBuiltInType',
+              knownTypeName: 'ReactNativeCoreViewProps',
+            },
+          ],
+          events: [],
+          props: [
+            {
+              name: 'imageSource',
+              optional: false,
+              typeAnnotation: {
+                type: 'ReservedPropTypeAnnotation',
+                name: 'ImageSourcePrimitive',
+              },
+            },
+          ],
+          commands: [],
+          state: [
+            {
+              name: 'imageSource',
+              optional: false,
+              typeAnnotation: {
+                type: 'ReservedPropTypeAnnotation',
+                name: 'ImageSourcePrimitive',
+              },
+            },
+            {
+              name: 'imageRequest',
+              optional: false,
+              typeAnnotation: {
+                type: 'ReservedPropTypeAnnotation',
+                name: 'ImageRequestPrimitive',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
 module.exports = {
   NO_PROPS_NO_EVENTS,
   INTERFACE_ONLY,
@@ -2525,4 +2573,5 @@ module.exports = {
   COMPONENT_WITH_ARRAY_OF_OBJECTS_STATE,
   COMPONENT_WITH_STRING_ENUM_STATE_PROPS,
   COMPONENT_WITH_INT_ENUM_STATE,
+  COMPONENTS_WITH_IMAGES_IN_STATE,
 };

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

@@ -560,6 +560,34 @@ using SimpleComponentComponentDescriptor = ConcreteComponentDescriptor<SimpleCom
 }
 `;
 
+exports[`GenerateComponentDescriptorH can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "ComponentDescriptors.h" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using SimpleComponentComponentDescriptor = ConcreteComponentDescriptor<SimpleComponentShadowNode>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateComponentDescriptorH can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "ComponentDescriptors.h" => "

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

@@ -636,6 +636,31 @@ NS_ASSUME_NONNULL_END",
 }
 `;
 
+exports[`GenerateComponentHObjCpp can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "RCTComponentViewHelpers.h" => "/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GenerateComponentHObjCpp.js
+*/
+
+#import <Foundation/Foundation.h>
+#import <React/RCTDefines.h>
+#import <React/RCTLog.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@protocol RCTSimpleComponentViewProtocol <NSObject>
+
+@end
+
+NS_ASSUME_NONNULL_END",
+}
+`;
+
 exports[`GenerateComponentHObjCpp can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "RCTComponentViewHelpers.h" => "/**

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

@@ -494,6 +494,31 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterCpp can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "EventEmitters.cpp" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterCpp.js
+ */
+
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",

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

@@ -672,6 +672,40 @@ class JSI_EXPORT SimpleComponentEventEmitter : public ViewEventEmitter {
   
 
   
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterH can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "EventEmitters.h" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewEventEmitter.h>
+#include <jsi/jsi.h>
+
+namespace facebook {
+namespace react {
+
+class JSI_EXPORT SimpleComponentEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  
+
+  
 };
 
 } // namespace react

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

@@ -671,6 +671,40 @@ SimpleComponentProps::SimpleComponentProps(
 }
 `;
 
+exports[`GeneratePropsCpp can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "Props.cpp" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsCpp.js
+ */
+
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/Props.h>
+#include <react/renderer/components/image/conversions.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+SimpleComponentProps::SimpleComponentProps(
+    const PropsParserContext &context,
+    const SimpleComponentProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    imageSource(convertRawProp(context, rawProps, \\"imageSource\\", sourceProps.imageSource, {}))
+      {}
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsCpp can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "Props.cpp" => "

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

@@ -943,6 +943,43 @@ class JSI_EXPORT SimpleComponentProps final : public ViewProps {
 }
 `;
 
+exports[`GeneratePropsH can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "Props.h" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsH.js
+ */
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/imagemanager/primitives.h>
+
+namespace facebook {
+namespace react {
+
+class JSI_EXPORT SimpleComponentProps final : public ViewProps {
+ public:
+  SimpleComponentProps() = default;
+  SimpleComponentProps(const PropsParserContext& context, const SimpleComponentProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  ImageSource imageSource{};
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsH can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "Props.h" => "

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

@@ -709,6 +709,44 @@ public class SimpleComponentManagerDelegate<T extends View, U extends BaseViewMa
 }
 `;
 
+exports[`GeneratePropsJavaDelegate can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "java/com/facebook/react/viewmanagers/SimpleComponentManagerDelegate.java" => "/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.BaseViewManagerInterface;
+
+public class SimpleComponentManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & SimpleComponentManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public SimpleComponentManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case \\"imageSource\\":
+        mViewManager.setImageSource(view, (ReadableMap) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}
+",
+}
+`;
+
 exports[`GeneratePropsJavaDelegate can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "java/com/facebook/react/viewmanagers/DoublePropNativeComponentManagerDelegate.java" => "/**

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

@@ -460,6 +460,30 @@ public interface SimpleComponentManagerInterface<T extends View> {
 }
 `;
 
+exports[`GeneratePropsJavaInterface can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "java/com/facebook/react/viewmanagers/SimpleComponentManagerInterface.java" => "/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableMap;
+
+public interface SimpleComponentManagerInterface<T extends View> {
+  void setImageSource(T view, @Nullable ReadableMap value);
+}
+",
+}
+`;
+
 exports[`GeneratePropsJavaInterface can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "java/com/facebook/react/viewmanagers/DoublePropNativeComponentManagerInterface.java" => "/**

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

@@ -676,6 +676,35 @@ public class SimpleComponentProps {
 }
 `;
 
+exports[`GeneratePropsJavaPojo can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "java/com/facebook/react/viewmanagers/MyComponent/SimpleComponentProps.java" => "/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+* @generated by codegen project: GeneratePropsJavaPojo.js
+*/
+
+package com.facebook.react.viewmanagers.MyComponent;
+
+import androidx.annotation.Nullable;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.bridge.ReadableMap;
+
+@DoNotStrip
+public class SimpleComponentProps {
+  private @Nullable ReadableMap mImageSource;
+  @DoNotStrip
+  public @Nullable ReadableMap getImageSource() {
+    return mImageSource;
+  }
+}
+",
+}
+`;
+
 exports[`GeneratePropsJavaPojo can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "java/com/facebook/react/viewmanagers/Switch/DoublePropNativeComponentProps.java" => "/**

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

@@ -500,6 +500,31 @@ extern const char SimpleComponentComponentName[] = \\"SimpleComponent\\";
 }
 `;
 
+exports[`GenerateShadowNodeCpp can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "ShadowNodes.cpp" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeCpp.js
+ */
+
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char SimpleComponentComponentName[] = \\"SimpleComponent\\";
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeCpp can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "ShadowNodes.cpp" => "

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

@@ -800,6 +800,46 @@ using SimpleComponentShadowNode = ConcreteViewShadowNode<
 }
 `;
 
+exports[`GenerateShadowNodeH can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "ShadowNodes.h" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/EventEmitters.h>
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/Props.h>
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char SimpleComponentComponentName[];
+
+/*
+ * \`ShadowNode\` for <SimpleComponent> component.
+ */
+using SimpleComponentShadowNode = ConcreteViewShadowNode<
+    SimpleComponentComponentName,
+    SimpleComponentProps,
+    SimpleComponentEventEmitter,
+    SimpleComponentState>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeH can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "ShadowNodes.h" => "

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

@@ -160,7 +160,7 @@ Map {
 namespace facebook {
 namespace react {
 
-std::vector<SimpleComponentArrayStateStruct> SimpleComponent::getArrayState() const {
+std::vector<SimpleComponentArrayStateStruct> SimpleComponentState::getArrayState() const {
   return arrayState_;
 }
 
@@ -186,47 +186,47 @@ Map {
 namespace facebook {
 namespace react {
 
-std::vector<std::string> SimpleComponent::getNames() const {
+std::vector<std::string> SimpleComponentState::getNames() const {
   return names_;
 }
 
-std::vector<bool> SimpleComponent::getDisableds() const {
+std::vector<bool> SimpleComponentState::getDisableds() const {
   return disableds_;
 }
 
-std::vector<int> SimpleComponent::getProgress() const {
+std::vector<int> SimpleComponentState::getProgress() const {
   return progress_;
 }
 
-std::vector<Float> SimpleComponent::getRadii() const {
+std::vector<Float> SimpleComponentState::getRadii() const {
   return radii_;
 }
 
-std::vector<SharedColor> SimpleComponent::getColors() const {
+std::vector<SharedColor> SimpleComponentState::getColors() const {
   return colors_;
 }
 
-std::vector<ImageSource> SimpleComponent::getSrcs() const {
+std::vector<ImageSource> SimpleComponentState::getSrcs() const {
   return srcs_;
 }
 
-std::vector<Point> SimpleComponent::getPoints() const {
+std::vector<Point> SimpleComponentState::getPoints() const {
   return points_;
 }
 
-SimpleComponentSizesMask SimpleComponent::getSizes() const {
+SimpleComponentSizesMask SimpleComponentState::getSizes() const {
   return sizes_;
 }
 
-std::vector<SimpleComponentObjectStruct> SimpleComponent::getObject() const {
+std::vector<SimpleComponentObjectStruct> SimpleComponentState::getObject() const {
   return object_;
 }
 
-std::vector<SimpleComponentArrayStruct> SimpleComponent::getArray() const {
+std::vector<SimpleComponentArrayStruct> SimpleComponentState::getArray() const {
   return array_;
 }
 
-std::vector<std::vector<SimpleComponentArrayOfArrayOfObjectStruct>> SimpleComponent::getArrayOfArrayOfObject() const {
+std::vector<std::vector<SimpleComponentArrayOfArrayOfObjectStruct>> SimpleComponentState::getArrayOfArrayOfObject() const {
   return arrayOfArrayOfObject_;
 }
 
@@ -252,7 +252,7 @@ Map {
 namespace facebook {
 namespace react {
 
-bool SimpleComponent::getDisabled() const {
+bool SimpleComponentState::getDisabled() const {
   return disabled_;
 }
 
@@ -278,7 +278,7 @@ Map {
 namespace facebook {
 namespace react {
 
-SharedColor SimpleComponent::getTintColor() const {
+SharedColor SimpleComponentState::getTintColor() const {
   return tintColor_;
 }
 
@@ -304,15 +304,15 @@ Map {
 namespace facebook {
 namespace react {
 
-double SimpleComponent::getD_blurRadius() const {
+double SimpleComponentState::getD_blurRadius() const {
   return d_blurRadius_;
 }
 
-double SimpleComponent::getD_blurRadius2() const {
+double SimpleComponentState::getD_blurRadius2() const {
   return d_blurRadius2_;
 }
 
-double SimpleComponent::getD_blurRadius3() const {
+double SimpleComponentState::getD_blurRadius3() const {
   return d_blurRadius3_;
 }
 
@@ -338,7 +338,7 @@ Map {
 namespace facebook {
 namespace react {
 
-EdgeInsets SimpleComponent::getContentInset() const {
+EdgeInsets SimpleComponentState::getContentInset() const {
   return contentInset_;
 }
 
@@ -364,15 +364,15 @@ Map {
 namespace facebook {
 namespace react {
 
-Float SimpleComponent::getBlurRadius() const {
+Float SimpleComponentState::getBlurRadius() const {
   return blurRadius_;
 }
 
-Float SimpleComponent::getBlurRadius2() const {
+Float SimpleComponentState::getBlurRadius2() const {
   return blurRadius2_;
 }
 
-Float SimpleComponent::getBlurRadius3() const {
+Float SimpleComponentState::getBlurRadius3() const {
   return blurRadius3_;
 }
 
@@ -398,7 +398,7 @@ Map {
 namespace facebook {
 namespace react {
 
-ImageSource SimpleComponent::getThumbImage() const {
+ImageSource SimpleComponentState::getThumbImage() const {
   return thumbImage_;
 }
 
@@ -424,7 +424,7 @@ Map {
 namespace facebook {
 namespace react {
 
-SimpleComponentMaxInterval SimpleComponent::getMaxInterval() const {
+SimpleComponentMaxInterval SimpleComponentState::getMaxInterval() const {
   return maxInterval_;
 }
 
@@ -450,15 +450,15 @@ Map {
 namespace facebook {
 namespace react {
 
-int SimpleComponent::getProgress1() const {
+int SimpleComponentState::getProgress1() const {
   return progress1_;
 }
 
-int SimpleComponent::getProgress2() const {
+int SimpleComponentState::getProgress2() const {
   return progress2_;
 }
 
-int SimpleComponent::getProgress3() const {
+int SimpleComponentState::getProgress3() const {
   return progress3_;
 }
 
@@ -484,7 +484,7 @@ Map {
 namespace facebook {
 namespace react {
 
-SimpleComponentObjectPropStruct SimpleComponent::getObjectProp() const {
+SimpleComponentObjectPropStruct SimpleComponentState::getObjectProp() const {
   return objectProp_;
 }
 
@@ -510,7 +510,7 @@ Map {
 namespace facebook {
 namespace react {
 
-Point SimpleComponent::getStartPoint() const {
+Point SimpleComponentState::getStartPoint() const {
   return startPoint_;
 }
 
@@ -536,7 +536,7 @@ Map {
 namespace facebook {
 namespace react {
 
-SimpleComponentAlignment SimpleComponent::getAlignment() const {
+SimpleComponentAlignment SimpleComponentState::getAlignment() const {
   return alignment_;
 }
 
@@ -562,11 +562,11 @@ Map {
 namespace facebook {
 namespace react {
 
-std::string SimpleComponent::getAccessibilityHint() const {
+std::string SimpleComponentState::getAccessibilityHint() const {
   return accessibilityHint_;
 }
 
-std::string SimpleComponent::getAccessibilityRole() const {
+std::string SimpleComponentState::getAccessibilityRole() const {
   return accessibilityRole_;
 }
 
@@ -576,6 +576,36 @@ std::string SimpleComponent::getAccessibilityRole() const {
 }
 `;
 
+exports[`GenerateStateCpp can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "States.cpp" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateCpp.js
+ */
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/States.h>
+
+namespace facebook {
+namespace react {
+
+ImageSource SimpleComponentState::getImageSource() const {
+  return imageSource_;
+}
+
+ImageRequest const & SimpleComponentState::getImageRequest() const {
+  return *imageRequest_;
+}
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateStateCpp can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "States.cpp" => "

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

@@ -740,6 +740,55 @@ TEST(SimpleComponentProps_DoesNotDie, etc) {
 }
 `;
 
+exports[`GenerateTests can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "Tests.cpp" => "/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateTests.js
+ * */
+
+#include <gtest/gtest.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/components/COMPONENTS_WITH_IMAGES_IN_STATE/Props.h>
+#include <react/renderer/components/image/conversions.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/core/RawPropsParser.h>
+#include <react/renderer/core/propsConversions.h>
+
+using namespace facebook::react;
+
+TEST(SimpleComponentProps_DoesNotDie, etc) {
+  auto propParser = RawPropsParser();
+  propParser.prepare<SimpleComponentProps>();
+  auto const &sourceProps = SimpleComponentProps();
+  auto const &rawProps = RawProps(folly::dynamic::object(\\"xx_invalid_xx\\", \\"xx_invalid_xx\\"));
+
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+
+  rawProps.parse(propParser, parserContext);
+  SimpleComponentProps(parserContext, sourceProps, rawProps);
+}
+
+TEST(SimpleComponentProps_imageSource, etc) {
+  auto propParser = RawPropsParser();
+  propParser.prepare<SimpleComponentProps>();
+  auto const &sourceProps = SimpleComponentProps();
+  auto const &rawProps = RawProps(folly::dynamic::object(\\"imageSource\\", folly::dynamic::object(\\"url\\", \\"testurl\\")));
+
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+
+  rawProps.parse(propParser, parserContext);
+  SimpleComponentProps(parserContext, sourceProps, rawProps);
+}",
+}
+`;
+
 exports[`GenerateTests can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "Tests.cpp" => "/**

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

@@ -66,6 +66,7 @@ Class<RCTComponentViewProtocol> SimpleComponentCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> SimpleComponentCls(void) __attribute__((used)); // COMPONENT_WITH_ARRAY_OF_OBJECTS_STATE
 Class<RCTComponentViewProtocol> SimpleComponentCls(void) __attribute__((used)); // COMPONENT_WITH_STRING_ENUM_STATE_PROPS
 Class<RCTComponentViewProtocol> SimpleComponentCls(void) __attribute__((used)); // COMPONENT_WITH_INT_ENUM_STATE
+Class<RCTComponentViewProtocol> SimpleComponentCls(void) __attribute__((used)); // COMPONENTS_WITH_IMAGES_IN_STATE
 
 #ifdef __cplusplus
 }

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

@@ -104,6 +104,8 @@ Class<RCTComponentViewProtocol> RCTThirdPartyFabricComponentsProvider(const char
     {\\"SimpleComponent\\", SimpleComponentCls}, // COMPONENT_WITH_STRING_ENUM_STATE_PROPS
 
     {\\"SimpleComponent\\", SimpleComponentCls}, // COMPONENT_WITH_INT_ENUM_STATE
+
+    {\\"SimpleComponent\\", SimpleComponentCls}, // COMPONENTS_WITH_IMAGES_IN_STATE
   };
 
   auto p = sFabricComponentsClassMap.find(name);

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

@@ -673,6 +673,42 @@ export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL
 }
 `;
 
+exports[`GenerateViewConfigJs can generate fixture COMPONENTS_WITH_IMAGES_IN_STATE 1`] = `
+Map {
+  "COMPONENTS_WITH_IMAGES_IN_STATENativeViewConfig.js" => "
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @flow
+ *
+ * @generated by codegen project: GenerateViewConfigJs.js
+ */
+
+'use strict';
+
+const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry');
+
+let nativeComponentName = 'SimpleComponent';
+
+
+export const __INTERNAL_VIEW_CONFIG = {
+  uiViewClassName: 'SimpleComponent',
+
+  validAttributes: {
+    imageSource: {
+      process: require('react-native/Libraries/Image/resolveAssetSource'),
+    },
+  },
+};
+
+export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
+",
+}
+`;
+
 exports[`GenerateViewConfigJs can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "DOUBLE_PROPSNativeViewConfig.js" => "

packages/react-native-codegen/src/parsers/flow/components/__test_fixtures__/fixtures.js

@@ -1421,6 +1421,37 @@ export default (codegenNativeComponent<ModuleProps>(
 ): HostComponent<ModuleProps>);
 `;
 
+const STATE_WITH_IMAGES = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 strict-local
+ */
+
+'use strict';
+
+const codegenNativeComponent = require('codegenNativeComponent');
+import type {ImageSource} from 'ImageSource';
+
+type ModuleProps = $ReadOnly<{|
+  ...ViewProps,
+  imageSource: ImageSource,
+|}>;
+
+type ModuleNativeState = $ReadOnly<{|
+  imageSource: ImageSource,
+  imageRequest: ImageRequest,
+|}>;
+
+export default (codegenNativeComponent<ModuleProps>(
+  'Module',
+): HostComponent<ModuleProps>);
+`;
+
 //TODO: fix this. The code is the same as per the props, but it fails with the State.
 // const STATE_ALIASED_LOCALLY = `
 // /**
@@ -1488,5 +1519,6 @@ module.exports = {
   ARRAY_STATE_TYPES,
   OBJECT_STATE_TYPES,
   STATE_NEGATIVE_DEFAULTS,
+  STATE_WITH_IMAGES,
   // STATE_ALIASED_LOCALLY,
 };

packages/react-native-codegen/src/parsers/flow/components/__tests__/__snapshots__/component-parser-test.js.snap

@@ -11422,3 +11422,53 @@ exports[`RN Codegen Flow Parser can generate fixture STATE_NEGATIVE_DEFAULTS 1`]
   }
 }"
 `;
+
+exports[`RN Codegen Flow Parser can generate fixture STATE_WITH_IMAGES 1`] = `
+"{
+  'modules': {
+    'Module': {
+      'type': 'Component',
+      'components': {
+        'Module': {
+          'extendsProps': [
+            {
+              'type': 'ReactNativeBuiltInType',
+              'knownTypeName': 'ReactNativeCoreViewProps'
+            }
+          ],
+          'events': [],
+          'props': [
+            {
+              'name': 'imageSource',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'ImageSourcePrimitive'
+              }
+            }
+          ],
+          'commands': [],
+          'state': [
+            {
+              'name': 'imageSource',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'ImageSourcePrimitive'
+              }
+            },
+            {
+              'name': 'imageRequest',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'ImageRequestPrimitive'
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}"
+`;

packages/react-native-codegen/src/parsers/flow/components/componentsUtils.js

@@ -102,6 +102,11 @@ function getTypeAnnotationForArray<+T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'ImageSourcePrimitive',
       };
+    case 'ImageRequest':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'ImageRequestPrimitive',
+      };
     case 'ColorValue':
     case 'ProcessedColorValue':
       return {
@@ -269,6 +274,11 @@ function getTypeAnnotation<+T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'ImageSourcePrimitive',
       };
+    case 'ImageRequest':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'ImageRequestPrimitive',
+      };
     case 'ColorValue':
     case 'ProcessedColorValue':
       return {

packages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/fixtures.js

@@ -1701,6 +1701,36 @@ export default codegenNativeComponent<ModuleProps>(
 ) as HostComponent<ModuleProps>;
 `;
 
+const STATE_WITH_IMAGES = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 strict-local
+ */
+
+'use strict';
+
+const codegenNativeComponent = require('codegenNativeComponent');
+import type {ImageSource} from 'ImageSource';
+
+export interface ModuleProps extends ViewProps {
+  imageSource: ImageSource;
+}
+
+interface ModuleNativeState {
+  imageSource: ImageSource,
+  imageRequest: ImageRequest,
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
 module.exports = {
   ALL_PROP_TYPES_NO_EVENTS,
   ARRAY_PROP_TYPES_NO_EVENTS,
@@ -1723,4 +1753,5 @@ module.exports = {
   ARRAY2_STATE_TYPES,
   OBJECT_STATE_TYPES,
   STATE_NEGATIVE_DEFAULTS,
+  STATE_WITH_IMAGES,
 };

packages/react-native-codegen/src/parsers/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap

@@ -13052,3 +13052,53 @@ exports[`RN Codegen TypeScript Parser can generate fixture STATE_NEGATIVE_DEFAUL
   }
 }"
 `;
+
+exports[`RN Codegen TypeScript Parser can generate fixture STATE_WITH_IMAGES 1`] = `
+"{
+  'modules': {
+    'Module': {
+      'type': 'Component',
+      'components': {
+        'Module': {
+          'extendsProps': [
+            {
+              'type': 'ReactNativeBuiltInType',
+              'knownTypeName': 'ReactNativeCoreViewProps'
+            }
+          ],
+          'events': [],
+          'props': [
+            {
+              'name': 'imageSource',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'ImageSourcePrimitive'
+              }
+            }
+          ],
+          'commands': [],
+          'state': [
+            {
+              'name': 'imageSource',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'ImageSourcePrimitive'
+              }
+            },
+            {
+              'name': 'imageRequest',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'ImageRequestPrimitive'
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}"
+`;

packages/react-native-codegen/src/parsers/typescript/components/componentsUtils.js

@@ -233,6 +233,11 @@ function getTypeAnnotationForArray<T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'ImageSourcePrimitive',
       };
+    case 'ImageRequest':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'ImageRequestPrimitive',
+      };
     case 'ColorValue':
     case 'ProcessedColorValue':
       return {
@@ -336,6 +341,11 @@ function getTypeAnnotation<T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'ImageSourcePrimitive',
       };
+    case 'ImageRequest':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'ImageRequestPrimitive',
+      };
     case 'ColorValue':
     case 'ProcessedColorValue':
       return {