Add codegen support for DimensionValue for components (#35953)

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

DimensionValue is a reserved prop type that can be a number or string (such as '50%'). On Java, it will get converted to a YogaValue (converter added to this diff); on C++ it will get converted to a YGValue (converter already exists as it's used in Fabric).

Changelog:
[Internal][Added] - Add codegen support for DimensionValue for components

Reviewed By: cipolleschi

Differential Revision: D42650799

fbshipit-source-id: 1d2bc30bbd93837dedbbb4c74f814963c8140957

ReactAndroid/src/main/java/com/facebook/react/bridge/BUCK

@@ -1,4 +1,4 @@
-load("//tools/build_defs/oss:rn_defs.bzl", "IS_OSS_BUILD", "react_native_dep", "react_native_target", "react_native_tests_target", "rn_android_library")
+load("//tools/build_defs/oss:rn_defs.bzl", "IS_OSS_BUILD", "YOGA_TARGET", "react_native_dep", "react_native_target", "react_native_tests_target", "rn_android_library")
 
 INTERFACES = [
     "Dynamic.java",
@@ -34,6 +34,7 @@ rn_android_library(
         "PUBLIC",
     ],
     deps = [
+        YOGA_TARGET,
         react_native_dep("java/com/facebook/debug/debugoverlay/model:model"),
         react_native_dep("java/com/facebook/systrace:systrace"),
         react_native_dep("libraries/fbcore/src/main/java/com/facebook/common/logging:logging"),

ReactAndroid/src/main/java/com/facebook/react/bridge/DimensionPropConverter.java

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.bridge;
+
+import androidx.annotation.Nullable;
+import com.facebook.yoga.YogaUnit;
+import com.facebook.yoga.YogaValue;
+
+public class DimensionPropConverter {
+
+  @Nullable
+  public static YogaValue getDimension(@Nullable Object value) {
+    if (value == null) {
+      return null;
+    }
+
+    if (value instanceof Double) {
+      return new YogaValue(((Double) value).floatValue(), YogaUnit.POINT);
+    }
+
+    if (value instanceof String) {
+      return YogaValue.parse((String) value);
+    }
+
+    throw new JSApplicationCausedNativeException(
+        "DimensionValue: the value must be a number or string.");
+  }
+}

ReactAndroid/src/main/java/com/facebook/react/processing/BUCK

@@ -1,4 +1,4 @@
-load("//tools/build_defs/oss:rn_defs.bzl", "react_native_dep", "react_native_target", "rn_java_annotation_processor", "rn_java_library")
+load("//tools/build_defs/oss:rn_defs.bzl", "YOGA_TARGET", "react_native_dep", "react_native_target", "rn_java_annotation_processor", "rn_java_library")
 
 rn_java_annotation_processor(
     name = "processing",
@@ -21,6 +21,7 @@ rn_java_library(
     source = "7",
     target = "7",
     deps = [
+        YOGA_TARGET,
         react_native_dep("third-party/java/infer-annotations:infer-annotations"),
         react_native_dep("third-party/java/javapoet:javapoet"),
         react_native_dep("third-party/java/jsr-305:jsr-305"),

ReactAndroid/src/main/java/com/facebook/react/processing/ReactPropertyProcessor.java

@@ -21,6 +21,7 @@ import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
 import com.facebook.react.uimanager.annotations.ReactPropertyHolder;
+import com.facebook.yoga.YogaValue;
 import com.squareup.javapoet.ClassName;
 import com.squareup.javapoet.CodeBlock;
 import com.squareup.javapoet.JavaFile;
@@ -69,14 +70,13 @@ public class ReactPropertyProcessor extends AbstractProcessor {
   private static final Map<TypeName, String> DEFAULT_TYPES;
   private static final Set<TypeName> BOXED_PRIMITIVES;
 
-  private static final TypeName PROPS_TYPE =
-      ClassName.get("com.facebook.react.uimanager", "ReactStylesDiffMap");
   private static final TypeName OBJECT_TYPE = TypeName.get(Object.class);
   private static final TypeName STRING_TYPE = TypeName.get(String.class);
   private static final TypeName READABLE_MAP_TYPE = TypeName.get(ReadableMap.class);
   private static final TypeName READABLE_ARRAY_TYPE = TypeName.get(ReadableArray.class);
   private static final TypeName DYNAMIC_TYPE = TypeName.get(Dynamic.class);
   private static final TypeName DYNAMIC_FROM_OBJECT_TYPE = TypeName.get(DynamicFromObject.class);
+  private static final TypeName YOGA_VALUE_TYPE = TypeName.get(YogaValue.class);
 
   private static final TypeName VIEW_MANAGER_TYPE =
       ClassName.get("com.facebook.react.uimanager", "ViewManager");
@@ -120,6 +120,7 @@ public class ReactPropertyProcessor extends AbstractProcessor {
     DEFAULT_TYPES.put(READABLE_ARRAY_TYPE, "Array");
     DEFAULT_TYPES.put(READABLE_MAP_TYPE, "Map");
     DEFAULT_TYPES.put(DYNAMIC_TYPE, "Dynamic");
+    DEFAULT_TYPES.put(YOGA_VALUE_TYPE, "YogaValue");
 
     BOXED_PRIMITIVES = new HashSet<>();
     BOXED_PRIMITIVES.add(TypeName.BOOLEAN.box());
@@ -369,6 +370,9 @@ public class ReactPropertyProcessor extends AbstractProcessor {
       return builder.add("($L)value", READABLE_MAP_TYPE);
     } else if (propertyType.equals(DYNAMIC_TYPE)) {
       return builder.add("new $L(value)", DYNAMIC_FROM_OBJECT_TYPE);
+    } else if (propertyType.equals(YOGA_VALUE_TYPE)) {
+      return builder.add(
+          "$T.getDimension(value)", com.facebook.react.bridge.DimensionPropConverter.class);
     }
 
     if (BOXED_PRIMITIVES.contains(propertyType)) {
@@ -420,7 +424,7 @@ public class ReactPropertyProcessor extends AbstractProcessor {
     CodeBlock.Builder builder = CodeBlock.builder();
     for (PropertyInfo propertyInfo : properties) {
       try {
-        String typeName = getPropertypTypeName(propertyInfo.mProperty, propertyInfo.propertyType);
+        String typeName = getPropertyTypeName(propertyInfo.mProperty, propertyInfo.propertyType);
         builder.addStatement("props.put($S, $S)", propertyInfo.mProperty.name(), typeName);
       } catch (IllegalArgumentException e) {
         throw new ReactPropertyException(e.getMessage(), propertyInfo);
@@ -430,7 +434,7 @@ public class ReactPropertyProcessor extends AbstractProcessor {
     return builder.build();
   }
 
-  private static String getPropertypTypeName(Property property, TypeName propertyType) {
+  private static String getPropertyTypeName(Property property, TypeName propertyType) {
     String defaultType = DEFAULT_TYPES.get(propertyType);
     String useDefaultType =
         property instanceof RegularProperty

ReactCommon/react/renderer/components/view/conversions.h

@@ -409,6 +409,15 @@ inline void fromRawValue(
   result = YGValueUndefined;
 }
 
+inline void fromRawValue(
+    const PropsParserContext &context,
+    const RawValue &value,
+    YGValue &result) {
+  YGStyle::ValueRepr ygValue{};
+  fromRawValue(context, value, ygValue);
+  result = ygValue;
+}
+
 inline void fromRawValue(
     const PropsParserContext &context,
     const RawValue &value,

packages/react-native-codegen/BUCK

@@ -1,5 +1,5 @@
 load("//tools/build_defs:fb_native_wrapper.bzl", "fb_native")
-load("//tools/build_defs/oss:rn_defs.bzl", "ANDROID", "APPLE", "IOS", "IS_OSS_BUILD", "react_native_root_target", "react_native_target", "rn_android_library", "rn_xplat_cxx_library")
+load("//tools/build_defs/oss:rn_defs.bzl", "ANDROID", "APPLE", "IOS", "IS_OSS_BUILD", "YOGA_TARGET", "react_native_root_target", "react_native_target", "rn_android_library", "rn_xplat_cxx_library")
 load("//tools/build_defs/third_party:yarn_defs.bzl", "yarn_workspace")
 load(":DEFS.bzl", "rn_codegen_cli", "rn_codegen_components", "rn_codegen_modules")
 
@@ -44,6 +44,7 @@ rn_android_library(
         "PUBLIC",
     ],
     deps = [
+        YOGA_TARGET,
         react_native_target("java/com/facebook/react/bridge:bridge"),
         react_native_target("java/com/facebook/react/common:common"),
         react_native_target("java/com/facebook/react/views/view:view"),

packages/react-native-codegen/DEFS.bzl

@@ -15,6 +15,7 @@ load(
     "MACOSX",
     "WINDOWS",
     "YOGA_CXX_TARGET",
+    "YOGA_TARGET",
     "fb_xplat_cxx_test",
     "get_apple_compiler_flags",
     "get_apple_inspector_flags",
@@ -40,19 +41,19 @@ def rn_codegen_cli():
             name = "write_to_json",
             main = "src/cli/combine/combine-js-to-schema-cli.js",
             root = "//xplat/js:workspace",
+            visibility = ["PUBLIC"],
             deps = [
                 ":yarn-workspace",
             ],
-            visibility = ["PUBLIC"],
         )
         yarn_workspace_binary(
             name = "generate_all_from_schema",
             main = "src/cli/generators/generate-all.js",
             root = "//xplat/js:workspace",
+            visibility = ["PUBLIC"],
             deps = [
                 ":yarn-workspace",
             ],
-            visibility = ["PUBLIC"],
         )
     else:
         # OSS setup, assumes yarn and node (v12.0.0+) are installed.
@@ -114,14 +115,14 @@ def rn_codegen_modules(
     fb_native.genrule(
         name = generate_fixtures_rule_name,
         srcs = native.glob(["src/generators/**/*.js"]),
-        cmd = "$(exe {generator_script}) $(location {schema_target}) {library_name} $OUT {android_package_name} {ios_assume_nonnull}".format(
-            generator_script = react_native_root_target("packages/react-native-codegen:generate_all_from_schema"),
-            schema_target = schema_target,
-            library_name = name,
-            android_package_name = android_package_name,
-            ios_assume_nonnull = ios_assume_nonnull,
-        ),
         out = "codegenfiles-{}".format(name),
+        cmd = "$(exe {generator_script}) $(location {schema_target}) {library_name} $OUT {android_package_name} {ios_assume_nonnull}".format(
+            android_package_name = android_package_name,
+            generator_script = react_native_root_target("packages/react-native-codegen:generate_all_from_schema"),
+            ios_assume_nonnull = ios_assume_nonnull,
+            library_name = name,
+            schema_target = schema_target,
+        ),
         labels = ["codegen_rule", "uses_local_filesystem_abspaths"],
     )
 
@@ -130,11 +131,11 @@ def rn_codegen_modules(
     ##################
     fb_native.genrule(
         name = generate_module_java_name,
-        cmd = "mkdir -p $OUT/{spec_path} && cp -r $(location {generator_target})/java/{spec_path}/* $OUT/{spec_path}/".format(
-            spec_path = android_package_name.replace(".", "/"),
-            generator_target = ":" + generate_fixtures_rule_name,
-        ),
         out = "src",
+        cmd = "mkdir -p $OUT/{spec_path} && cp -r $(location {generator_target})/java/{spec_path}/* $OUT/{spec_path}/".format(
+            generator_target = ":" + generate_fixtures_rule_name,
+            spec_path = android_package_name.replace(".", "/"),
+        ),
         labels = ["codegen_rule"],
     )
 
@@ -147,15 +148,15 @@ def rn_codegen_modules(
 
     fb_native.genrule(
         name = generate_module_jni_h_name,
-        cmd = "cp $(location :{})/jni/{}.h $OUT".format(generate_fixtures_rule_name, name),
         out = "{}.h".format(name),
+        cmd = "cp $(location :{})/jni/{}.h $OUT".format(generate_fixtures_rule_name, name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_module_jni_cpp_name,
-        cmd = "cp $(location :{})/jni/{}-generated.cpp $OUT".format(generate_fixtures_rule_name, name),
         out = "{}-generated.cpp".format(name),
+        cmd = "cp $(location :{})/jni/{}-generated.cpp $OUT".format(generate_fixtures_rule_name, name),
         labels = ["codegen_rule"],
     )
 
@@ -185,14 +186,16 @@ def rn_codegen_modules(
         srcs = [
             ":{}".format(generate_module_jni_cpp_name),
         ],
-        header_namespace = "",
         headers = [
             ":{}".format(generate_module_jni_h_name),
         ],
+        header_namespace = "",
         exported_headers = {
             "{}/{}.h".format(name, name): ":{}".format(generate_module_jni_h_name),
         },
         force_static = True,
+        labels = library_labels + ["codegen_rule"],
+        platforms = (ANDROID,),
         preprocessor_flags = [
             "-DLOG_TAG=\"ReactNative\"",
             "-DWITH_FBSYSTRACE=1",
@@ -205,8 +208,6 @@ def rn_codegen_modules(
             react_native_xplat_shared_library_target("jsi:jsi"),
             react_native_xplat_target("react/nativemodule/core:core"),
         ],
-        platforms = (ANDROID,),
-        labels = library_labels + ["codegen_rule"],
     )
 
     ##############
@@ -216,48 +217,48 @@ def rn_codegen_modules(
         # iOS Buck build isn't fully working in OSS, so let's skip it for OSS for now.
         fb_native.genrule(
             name = generate_module_hobjcpp_name,
-            cmd = "cp $(location :{})/{}/{}.h $OUT".format(generate_fixtures_rule_name, name, name),
             out = "{}.h".format(name),
+            cmd = "cp $(location :{})/{}/{}.h $OUT".format(generate_fixtures_rule_name, name, name),
             labels = ["codegen_rule"],
         )
 
         fb_native.genrule(
             name = generate_module_mm_name,
-            cmd = "cp $(location :{})/{}/{}-generated.mm $OUT".format(generate_fixtures_rule_name, name, name),
             out = "{}-generated.mm".format(name),
+            cmd = "cp $(location :{})/{}/{}-generated.mm $OUT".format(generate_fixtures_rule_name, name, name),
             labels = ["codegen_rule"],
         )
 
         rn_apple_library(
             name = "{}Apple".format(name),
-            extension_api_only = True,
-            header_namespace = "",
-            sdks = (IOS, MACOSX),
-            compiler_flags = [
-                "-Wno-unused-private-field",
-            ],
-            exported_headers = {
-                "{}/{}.h".format(name, name): ":{}".format(generate_module_hobjcpp_name),
-            },
-            headers = [
-                ":{}".format(generate_module_hobjcpp_name),
-            ],
             srcs = [
                 ":{}".format(generate_module_mm_name),
             ],
+            headers = [
+                ":{}".format(generate_module_hobjcpp_name),
+            ],
+            header_namespace = "",
+            exported_headers = {
+                "{}/{}.h".format(name, name): ":{}".format(generate_module_hobjcpp_name),
+            },
             autoglob = False,
-            labels = library_labels + ["codegen_rule"],
-            visibility = ["PUBLIC"],
+            compiler_flags = [
+                "-Wno-unused-private-field",
+            ],
+            extension_api_only = True,
             ios_exported_deps = [
                 "//xplat/js/react-native-github:RCTTypeSafety",
                 "//xplat/js/react-native-github/Libraries/RCTRequired:RCTRequired",
                 react_native_xplat_target_apple("react/nativemodule/core:core"),
             ],
+            labels = library_labels + ["codegen_rule"],
             macosx_exported_deps = [
                 react_native_desktop_root_target(":RCTTypeSafetyAppleMac"),
                 react_native_desktop_root_target(":RCTRequiredAppleMac"),
                 react_native_desktop_root_target(":nativemoduleAppleMac"),
             ],
+            sdks = (IOS, MACOSX),
+            visibility = ["PUBLIC"],
         )
 
 def rn_codegen_components(
@@ -284,88 +285,88 @@ def rn_codegen_components(
     fb_native.genrule(
         name = generate_fixtures_rule_name,
         srcs = native.glob(["src/generators/**/*.js"]),
-        cmd = "$(exe {}) $(location {}) {} $OUT".format(react_native_root_target("packages/react-native-codegen:generate_all_from_schema"), schema_target, name),
         out = "codegenfiles-{}".format(name),
+        cmd = "$(exe {}) $(location {}) {} $OUT".format(react_native_root_target("packages/react-native-codegen:generate_all_from_schema"), schema_target, name),
         labels = ["codegen_rule", "uses_local_filesystem_abspaths"],
     )
 
     fb_native.genrule(
         name = generate_component_descriptor_h_name,
-        cmd = "cp $(location :{})/ComponentDescriptors.h $OUT".format(generate_fixtures_rule_name),
         out = "ComponentDescriptors.h",
+        cmd = "cp $(location :{})/ComponentDescriptors.h $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_component_hobjcpp_name,
-        cmd = "cp $(location :{})/RCTComponentViewHelpers.h $OUT".format(generate_fixtures_rule_name),
         out = "RCTComponentViewHelpers.h",
+        cmd = "cp $(location :{})/RCTComponentViewHelpers.h $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_event_emitter_cpp_name,
-        cmd = "cp $(location :{})/EventEmitters.cpp $OUT".format(generate_fixtures_rule_name),
         out = "EventEmitters.cpp",
+        cmd = "cp $(location :{})/EventEmitters.cpp $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_event_emitter_h_name,
-        cmd = "cp $(location :{})/EventEmitters.h $OUT".format(generate_fixtures_rule_name),
         out = "EventEmitters.h",
+        cmd = "cp $(location :{})/EventEmitters.h $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_props_cpp_name,
-        cmd = "cp $(location :{})/Props.cpp $OUT".format(generate_fixtures_rule_name),
         out = "Props.cpp",
+        cmd = "cp $(location :{})/Props.cpp $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_state_cpp_name,
-        cmd = "cp $(location :{})/States.cpp $OUT".format(generate_fixtures_rule_name),
         out = "States.cpp",
+        cmd = "cp $(location :{})/States.cpp $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_tests_cpp_name,
-        cmd = "cp $(location :{})/Tests.cpp $OUT".format(generate_fixtures_rule_name),
         out = "Tests.cpp",
+        cmd = "cp $(location :{})/Tests.cpp $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_props_h_name,
-        cmd = "cp $(location :{})/Props.h $OUT".format(generate_fixtures_rule_name),
         out = "Props.h",
+        cmd = "cp $(location :{})/Props.h $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_state_h_name,
-        cmd = "cp $(location :{})/States.h $OUT".format(generate_fixtures_rule_name),
         out = "States.h",
+        cmd = "cp $(location :{})/States.h $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = copy_generated_java_files,
+        out = "java",
         # TODO: support different package name internally.
         # Right now, it's hardcoded to `com.facebook.react.viewmanagers`.
         cmd = "mkdir -p $OUT/com/facebook/react/viewmanagers && cp -R $(location :{})/java/com/facebook/react/viewmanagers/* $OUT/com/facebook/react/viewmanagers".format(generate_fixtures_rule_name),
-        out = "java",
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = copy_generated_cxx_files,
+        out = "cxx",
         # The command below is filtering C++ iOS files, this will be refactored when C++ codegen is finished.
         cmd = "mkdir -p $OUT && find $(location :{}) -not -path '*/rncore*' -not -path '*Tests*' -not -path '*NativeModules*' -not -path '*RCTComponentViewHelpers*' -type f \\( -iname \\*.h -o -iname \\*.cpp \\) -print0 -exec cp {{}} $OUT \\;".format(generate_fixtures_rule_name),
-        out = "cxx",
         labels = ["codegen_rule"],
     )
 
@@ -373,29 +374,29 @@ def rn_codegen_components(
         name = zip_generated_cxx_files,
         srcs = [":{}".format(copy_generated_cxx_files)],
         out = "{}.src.zip".format(zip_generated_cxx_files),
-        visibility = ["PUBLIC"],
         labels = ["codegen_rule"],
+        visibility = ["PUBLIC"],
     )
 
     fb_native.zip_file(
         name = zip_generated_java_files,
         srcs = [":{}".format(copy_generated_java_files)],
         out = "{}.src.zip".format(zip_generated_java_files),
-        visibility = ["PUBLIC"],
         labels = ["codegen_rule"],
+        visibility = ["PUBLIC"],
     )
 
     fb_native.genrule(
         name = generate_shadow_node_cpp_name,
-        cmd = "cp $(location :{})/ShadowNodes.cpp $OUT".format(generate_fixtures_rule_name),
         out = "ShadowNodes.cpp",
+        cmd = "cp $(location :{})/ShadowNodes.cpp $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_shadow_node_h_name,
-        cmd = "cp $(location :{})/ShadowNodes.h $OUT".format(generate_fixtures_rule_name),
         out = "ShadowNodes.h",
+        cmd = "cp $(location :{})/ShadowNodes.h $OUT".format(generate_fixtures_rule_name),
         labels = ["codegen_rule"],
     )
 
@@ -465,7 +466,6 @@ def rn_codegen_components(
                 ":{}".format(generate_tests_cpp_name),
             ],
             apple_sdks = (IOS, MACOSX),
-            fbandroid_use_instrumentation_test = True,
             compiler_flags = [
                 "-fexceptions",
                 "-frtti",
@@ -473,6 +473,7 @@ def rn_codegen_components(
                 "-Wall",
             ],
             contacts = ["oncall+react_native@xmail.facebook.com"],
+            fbandroid_use_instrumentation_test = True,
             labels = library_labels + ["codegen_rule"],
             platforms = (ANDROID, APPLE, CXX),
             deps = [
@@ -494,11 +495,12 @@ def rn_codegen_components(
             srcs = [
                 ":{}".format(zip_generated_java_files),
             ],
-            language = "JAVA",
             autoglob = False,
             labels = library_labels + ["codegen_rule"],
+            language = "JAVA",
             visibility = ["PUBLIC"],
             deps = [
+                YOGA_TARGET,
                 react_native_dep("third-party/android/androidx:annotation"),
                 react_native_target("java/com/facebook/react/bridge:bridge"),
                 react_native_target("java/com/facebook/react/uimanager:interfaces"),
@@ -510,9 +512,9 @@ def rn_codegen_components(
             srcs = [
                 ":{}".format(zip_generated_cxx_files),
             ],
-            language = "JAVA",
             autoglob = False,
             labels = library_labels + ["codegen_rule"],
+            language = "JAVA",
             visibility = ["PUBLIC"],
             deps = [
                 react_native_dep("third-party/android/androidx:annotation"),
@@ -534,24 +536,24 @@ def rn_codegen_cxx_modules(
     fb_native.genrule(
         name = generate_fixtures_rule_name,
         srcs = native.glob(["src/generators/**/*.js"]),
-        cmd = "$(exe {}) $(location {}) {} $OUT {}".format(react_native_root_target("packages/react-native-codegen:generate_all_from_schema"), schema_target, name, name),
         out = "codegenfiles-{}".format(name),
+        cmd = "$(exe {}) $(location {}) {} $OUT {}".format(react_native_root_target("packages/react-native-codegen:generate_all_from_schema"), schema_target, name, name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_module_h_name,
+        out = "{}JSI.h".format(name),
         cmd = "cp $(location :{})/{}JSI.h $OUT".format(generate_fixtures_rule_name, name),
         cmd_exe = "copy $(location :{})\\{}JSI.h $OUT".format(generate_fixtures_rule_name, name),
-        out = "{}JSI.h".format(name),
         labels = ["codegen_rule"],
     )
 
     fb_native.genrule(
         name = generate_module_cpp_name,
+        out = "{}JSI-generated.cpp".format(name),
         cmd = "cp $(location :{})/{}JSI-generated.cpp $OUT".format(generate_fixtures_rule_name, name),
         cmd_exe = "copy $(location :{})\\{}JSI-generated.cpp $OUT".format(generate_fixtures_rule_name, name),
-        out = "{}JSI-generated.cpp".format(name),
         labels = ["codegen_rule"],
     )
 
@@ -570,24 +572,24 @@ def rn_codegen_cxx_modules(
             exported_headers = {
                 "{}/{}JSI.h".format(name, name): ":{}".format(generate_module_h_name),
             },
+            fbandroid_exported_deps = [
+                react_native_xplat_target("react/nativemodule/core:core"),
+            ],
             fbobjc_compiler_flags = get_apple_compiler_flags(),
             fbobjc_preprocessor_flags = get_preprocessor_flags_for_build_mode() + get_apple_inspector_flags(),
+            ios_exported_deps = [
+                react_native_xplat_target("react/nativemodule/core:core"),
+            ],
             labels = library_labels + ["codegen_rule"],
+            macosx_exported_deps = [
+                react_native_desktop_root_target(":bridging"),
+            ],
             platforms = (ANDROID, APPLE, CXX, WINDOWS),
             preprocessor_flags = [
                 "-DLOG_TAG=\"ReactNative\"",
                 "-DWITH_FBSYSTRACE=1",
             ],
             visibility = ["PUBLIC"],
-            fbandroid_exported_deps = [
-                react_native_xplat_target("react/nativemodule/core:core"),
-            ],
-            ios_exported_deps = [
-                react_native_xplat_target("react/nativemodule/core:core"),
-            ],
-            macosx_exported_deps = [
-                react_native_desktop_root_target(":bridging"),
-            ],
             windows_exported_deps = [
                 react_native_desktop_root_target(":bridging"),
             ],

packages/react-native-codegen/buck_tests/java/ArrayPropsNativeComponentViewManager.java

@@ -56,6 +56,9 @@ public class ArrayPropsNativeComponentViewManager extends SimpleViewManager<View
   @Override
   public void setEdgeInsets(ViewGroup view, ReadableArray value) {}
 
+  @Override
+  public void setDimensions(ViewGroup view, ReadableArray value) {}
+
   @Override
   public void setSizes(ViewGroup view, ReadableArray value) {}
 

packages/react-native-codegen/buck_tests/java/DimensionPropNativeComponentViewManager.java

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.uimanager;
+
+import android.view.ViewGroup;
+import com.facebook.react.viewmanagers.DimensionPropNativeComponentViewManagerDelegate;
+import com.facebook.react.viewmanagers.DimensionPropNativeComponentViewManagerInterface;
+import com.facebook.yoga.YogaValue;
+
+public class DimensionPropNativeComponentViewManager extends SimpleViewManager<ViewGroup>
+    implements DimensionPropNativeComponentViewManagerInterface<ViewGroup> {
+
+  public static final String REACT_CLASS = "DimensionPropNativeComponentView";
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  private void test() {
+    DimensionPropNativeComponentViewManagerDelegate<
+            ViewGroup, DimensionPropNativeComponentViewManager>
+        delegate = new DimensionPropNativeComponentViewManagerDelegate<>(this);
+  }
+
+  @Override
+  public ViewGroup createViewInstance(ThemedReactContext context) {
+    throw new IllegalStateException();
+  }
+
+  @Override
+  public void setMarginBack(ViewGroup view, YogaValue value) {}
+}

packages/react-native-codegen/e2e/__test_fixtures__/components/ArrayPropsNativeComponent.js

@@ -9,6 +9,7 @@
  */
 
 import type {
+  DimensionValue,
   EdgeInsetsValue,
   PointValue,
 } from '../../../../../Libraries/StyleSheet/StyleSheetTypes';
@@ -35,6 +36,7 @@ type NativeProps = $ReadOnly<{|
   srcs?: $ReadOnlyArray<ImageSource>,
   points?: $ReadOnlyArray<PointValue>,
   edgeInsets?: $ReadOnlyArray<EdgeInsetsValue>,
+  dimensions?: $ReadOnlyArray<DimensionValue>,
   sizes?: WithDefault<$ReadOnlyArray<'small' | 'large'>, 'small'>,
   object?: $ReadOnlyArray<$ReadOnly<{|prop: string|}>>,
 |}>;

packages/react-native-codegen/e2e/__test_fixtures__/components/DimensionPropNativeComponent.js

@@ -0,0 +1,25 @@
+/**
+ * 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
+ */
+
+import type {DimensionValue} from '../../../../../Libraries/StyleSheet/StyleSheetTypes';
+import type {ViewProps} from '../../../../../Libraries/Components/View/ViewPropTypes';
+import codegenNativeComponent from '../../../../../Libraries/Utilities/codegenNativeComponent';
+import type {HostComponent} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+
+  // Props
+  marginBack?: DimensionValue,
+|}>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'DimensionPropNativeComponentView',
+): HostComponent<NativeProps>);

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

@@ -84,6 +84,34 @@ using ColorPropNativeComponentViewComponentDescriptor = ConcreteComponentDescrip
 }
 `;
 
+exports[`GenerateComponentDescriptorH can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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/RNCodegenModuleFixtures/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using DimensionPropNativeComponentViewComponentDescriptor = ConcreteComponentDescriptor<DimensionPropNativeComponentViewShadowNode>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateComponentDescriptorH can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "ComponentDescriptors.h": "

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

@@ -75,6 +75,31 @@ NS_ASSUME_NONNULL_END",
 }
 `;
 
+exports[`GenerateComponentHObjCpp can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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 RCTDimensionPropNativeComponentViewViewProtocol <NSObject>
+
+@end
+
+NS_ASSUME_NONNULL_END",
+}
+`;
+
 exports[`GenerateComponentHObjCpp can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "RCTComponentViewHelpers.h": "/**

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

@@ -69,6 +69,31 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterCpp can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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/RNCodegenModuleFixtures/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",

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

@@ -94,6 +94,40 @@ class JSI_EXPORT ColorPropNativeComponentViewEventEmitter : public ViewEventEmit
   
 
   
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterH can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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 DimensionPropNativeComponentViewEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  
+
+  
 };
 
 } // namespace react

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

@@ -14,6 +14,7 @@ Object {
 
 #include <react/renderer/components/RNCodegenModuleFixtures/Props.h>
 #include <react/renderer/components/image/conversions.h>
+#include <react/renderer/components/view/conversions.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/propsConversions.h>
 
@@ -33,6 +34,7 @@ ArrayPropsNativeComponentViewProps::ArrayPropsNativeComponentViewProps(
     srcs(convertRawProp(context, rawProps, \\"srcs\\", sourceProps.srcs, {})),
     points(convertRawProp(context, rawProps, \\"points\\", sourceProps.points, {})),
     edgeInsets(convertRawProp(context, rawProps, \\"edgeInsets\\", sourceProps.edgeInsets, {})),
+    dimensions(convertRawProp(context, rawProps, \\"dimensions\\", sourceProps.dimensions, {})),
     sizes(convertRawProp(context, rawProps, \\"sizes\\", sourceProps.sizes, {static_cast<ArrayPropsNativeComponentViewSizesMask>(ArrayPropsNativeComponentViewSizes::Small)})),
     object(convertRawProp(context, rawProps, \\"object\\", sourceProps.object, {}))
       {}
@@ -110,6 +112,40 @@ ColorPropNativeComponentViewProps::ColorPropNativeComponentViewProps(
 }
 `;
 
+exports[`GeneratePropsCpp can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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/RNCodegenModuleFixtures/Props.h>
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+DimensionPropNativeComponentViewProps::DimensionPropNativeComponentViewProps(
+    const PropsParserContext &context,
+    const DimensionPropNativeComponentViewProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    marginBack(convertRawProp(context, rawProps, \\"marginBack\\", sourceProps.marginBack, {}))
+      {}
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsCpp can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "Props.cpp": "

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

@@ -22,6 +22,7 @@ Object {
 #include <react/renderer/graphics/RectangleEdges.h>
 #include <react/renderer/imagemanager/primitives.h>
 #include <vector>
+#include <yoga/Yoga.h>
 
 namespace facebook {
 namespace react {
@@ -122,6 +123,7 @@ class JSI_EXPORT ArrayPropsNativeComponentViewProps final : public ViewProps {
   std::vector<ImageSource> srcs{};
   std::vector<Point> points{};
   std::vector<EdgeInsets> edgeInsets{};
+  std::vector<YGValue> dimensions{};
   ArrayPropsNativeComponentViewSizesMask sizes{static_cast<ArrayPropsNativeComponentViewSizesMask>(ArrayPropsNativeComponentViewSizes::Small)};
   std::vector<ArrayPropsNativeComponentViewObjectStruct> object{};
 };
@@ -206,6 +208,43 @@ class JSI_EXPORT ColorPropNativeComponentViewProps final : public ViewProps {
 }
 `;
 
+exports[`GeneratePropsH can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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 <yoga/Yoga.h>
+
+namespace facebook {
+namespace react {
+
+class JSI_EXPORT DimensionPropNativeComponentViewProps final : public ViewProps {
+ public:
+  DimensionPropNativeComponentViewProps() = default;
+  DimensionPropNativeComponentViewProps(const PropsParserContext& context, const DimensionPropNativeComponentViewProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  YGValue marginBack{};
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsH can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "Props.h": "

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

@@ -50,6 +50,9 @@ public class ArrayPropsNativeComponentViewManagerDelegate<T extends View, U exte
       case \\"edgeInsets\\":
         mViewManager.setEdgeInsets(view, (ReadableArray) value);
         break;
+      case \\"dimensions\\":
+        mViewManager.setDimensions(view, (ReadableArray) value);
+        break;
       case \\"sizes\\":
         mViewManager.setSizes(view, (ReadableArray) value);
         break;
@@ -143,6 +146,44 @@ public class ColorPropNativeComponentViewManagerDelegate<T extends View, U exten
 }
 `;
 
+exports[`GeneratePropsJavaDelegate can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "java/com/facebook/react/viewmanagers/DimensionPropNativeComponentViewManagerDelegate.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.DimensionPropConverter;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.BaseViewManagerInterface;
+
+public class DimensionPropNativeComponentViewManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & DimensionPropNativeComponentViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public DimensionPropNativeComponentViewManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case \\"marginBack\\":
+        mViewManager.setMarginBack(view, DimensionPropConverter.getDimension(value));
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}
+",
+}
+`;
+
 exports[`GeneratePropsJavaDelegate can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "java/com/facebook/react/viewmanagers/EdgeInsetsPropNativeComponentViewManagerDelegate.java": "/**

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

@@ -26,6 +26,7 @@ public interface ArrayPropsNativeComponentViewManagerInterface<T extends View> {
   void setSrcs(T view, @Nullable ReadableArray value);
   void setPoints(T view, @Nullable ReadableArray value);
   void setEdgeInsets(T view, @Nullable ReadableArray value);
+  void setDimensions(T view, @Nullable ReadableArray value);
   void setSizes(T view, @Nullable ReadableArray value);
   void setObject(T view, @Nullable ReadableArray value);
 }
@@ -80,6 +81,30 @@ public interface ColorPropNativeComponentViewManagerInterface<T extends View> {
 }
 `;
 
+exports[`GeneratePropsJavaInterface can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "java/com/facebook/react/viewmanagers/DimensionPropNativeComponentViewManagerInterface.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.yoga.YogaValue;
+
+public interface DimensionPropNativeComponentViewManagerInterface<T extends View> {
+  void setMarginBack(T view, @Nullable YogaValue value);
+}
+",
+}
+`;
+
 exports[`GeneratePropsJavaInterface can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "java/com/facebook/react/viewmanagers/EdgeInsetsPropNativeComponentViewManagerInterface.java": "/**

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

@@ -75,6 +75,31 @@ extern const char ColorPropNativeComponentViewComponentName[] = \\"ColorPropNati
 }
 `;
 
+exports[`GenerateShadowNodeCpp can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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/RNCodegenModuleFixtures/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char DimensionPropNativeComponentViewComponentName[] = \\"DimensionPropNativeComponentView\\";
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeCpp can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "ShadowNodes.cpp": "

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

@@ -120,6 +120,46 @@ using ColorPropNativeComponentViewShadowNode = ConcreteViewShadowNode<
 }
 `;
 
+exports[`GenerateShadowNodeH can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Object {
+  "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/RNCodegenModuleFixtures/EventEmitters.h>
+#include <react/renderer/components/RNCodegenModuleFixtures/Props.h>
+#include <react/renderer/components/RNCodegenModuleFixtures/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char DimensionPropNativeComponentViewComponentName[];
+
+/*
+ * \`ShadowNode\` for <DimensionPropNativeComponentView> component.
+ */
+using DimensionPropNativeComponentViewShadowNode = ConcreteViewShadowNode<
+    DimensionPropNativeComponentViewComponentName,
+    DimensionPropNativeComponentViewProps,
+    DimensionPropNativeComponentViewEventEmitter,
+    DimensionPropNativeComponentViewState>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeH can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Object {
   "ShadowNodes.h": "

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

@@ -37,6 +37,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     srcs: true,
     points: true,
     edgeInsets: true,
+    dimensions: true,
     sizes: true,
     object: true,
   },
@@ -118,6 +119,40 @@ export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL
 }
 `;
 
+exports[`GenerateViewConfigJs can generate for 'DimensionPropNativeComponent.js' 1`] = `
+Map {
+  "RNCodegenModuleFixturesNativeViewConfig.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 = 'DimensionPropNativeComponentView';
+
+
+export const __INTERNAL_VIEW_CONFIG = {
+  uiViewClassName: 'DimensionPropNativeComponentView',
+
+  validAttributes: {
+    marginBack: true,
+  },
+};
+
+export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
+",
+}
+`;
+
 exports[`GenerateViewConfigJs can generate for 'EdgeInsetsPropNativeComponent.js' 1`] = `
 Map {
   "RNCodegenModuleFixturesNativeViewConfig.js" => "

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

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

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

@@ -78,6 +78,8 @@ function getNativeTypeFromAnnotation(
           return 'Point';
         case 'EdgeInsetsPrimitive':
           return 'EdgeInsets';
+        case 'DimensionPrimitive':
+          return 'YGValue';
         default:
           (typeAnnotation.name: empty);
           throw new Error('Received unknown ReservedPropTypeAnnotation');
@@ -221,7 +223,8 @@ function getLocalImports(
       | 'EdgeInsetsPrimitive'
       | 'ImageSourcePrimitive'
       | 'PointPrimitive'
-      | 'ImageRequestPrimitive',
+      | 'ImageRequestPrimitive'
+      | 'DimensionPrimitive',
   ) {
     switch (name) {
       case 'ColorPrimitive':
@@ -239,6 +242,9 @@ function getLocalImports(
       case 'EdgeInsetsPrimitive':
         imports.add('#include <react/renderer/graphics/RectangleEdges.h>');
         return;
+      case 'DimensionPrimitive':
+        imports.add('#include <yoga/Yoga.h>');
+        return;
       default:
         (name: empty);
         throw new Error(`Invalid ReservedPropTypeAnnotation name, got ${name}`);

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

@@ -63,7 +63,8 @@ function getImports(
       | 'EdgeInsetsPrimitive'
       | 'ImageRequestPrimitive'
       | 'ImageSourcePrimitive'
-      | 'PointPrimitive',
+      | 'PointPrimitive'
+      | 'DimensionPrimitive',
   ) {
     switch (name) {
       case 'ColorPrimitive':
@@ -77,6 +78,9 @@ function getImports(
       case 'ImageSourcePrimitive':
         imports.add('#include <react/renderer/components/image/conversions.h>');
         return;
+      case 'DimensionPrimitive':
+        imports.add('#include <react/renderer/components/view/conversions.h>');
+        return;
       default:
         (name: empty);
         throw new Error(`Invalid name, got ${name}`);
@@ -172,6 +176,8 @@ function convertDefaultTypeToString(
           return '';
         case 'EdgeInsetsPrimitive':
           return '';
+        case 'DimensionPrimitive':
+          return '';
         default:
           (typeAnnotation.name: empty);
           throw new Error(

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

@@ -128,6 +128,8 @@ function getJavaValueForProp(
           return '(ReadableMap) value';
         case 'EdgeInsetsPrimitive':
           return '(ReadableMap) value';
+        case 'DimensionPrimitive':
+          return 'DimensionPropConverter.getDimension(value)';
         default:
           (typeAnnotation.name: empty);
           throw new Error('Received unknown ReservedPropTypeAnnotation');

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

@@ -106,6 +106,9 @@ function getJavaValueForProp(
         case 'EdgeInsetsPrimitive':
           addNullable(imports);
           return '@Nullable ReadableMap value';
+        case 'DimensionPrimitive':
+          addNullable(imports);
+          return '@Nullable YogaValue value';
         default:
           (typeAnnotation.name: empty);
           throw new Error('Received unknown ReservedPropTypeAnnotation');

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

@@ -23,6 +23,7 @@ function toJavaType(
   const importReadableMap = () =>
     addImport('com.facebook.react.bridge.ReadableMap');
   const importArrayList = () => addImport('java.util.ArrayList');
+  const importYogaValue = () => addImport('com.facebook.yoga.YogaValue');
   switch (typeAnnotation.type) {
     /**
      * Primitives
@@ -98,6 +99,12 @@ function toJavaType(
           importNullable();
           importReadableMap();
           return '@Nullable ReadableMap';
+
+        case 'DimensionPrimitive':
+          importNullable();
+          importYogaValue();
+          return '@Nullable YogaValue';
+
         default:
           (typeAnnotation.name: empty);
           throw new Error(
@@ -182,6 +189,11 @@ function toJavaType(
               case 'EdgeInsetsPrimitive':
                 importReadableMap();
                 return 'ReadableMap';
+
+              case 'DimensionPrimitive':
+                importYogaValue();
+                return 'YogaValue';
+
               default:
                 (elementType.name: empty);
                 throw new Error(

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

@@ -77,6 +77,8 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
         case 'EdgeInsetsPrimitive':
           return j.template
             .expression`{ diff: require('react-native/Libraries/Utilities/differ/insetsDiffer') }`;
+        case 'DimensionPrimitive':
+          return j.literal(true);
         default:
           (typeAnnotation.name: empty);
           throw new Error(
@@ -90,10 +92,9 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
             return j.template
               .expression`{ process: require('react-native/Libraries/StyleSheet/processColorArray') }`;
           case 'ImageSourcePrimitive':
-            return j.literal(true);
           case 'PointPrimitive':
-            return j.literal(true);
           case 'EdgeInsetsPrimitive':
+          case 'DimensionPrimitive':
             return j.literal(true);
           default:
             throw new Error(

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

@@ -66,10 +66,12 @@ function getImports(
       | 'EdgeInsetsPrimitive'
       | 'ImageSourcePrimitive'
       | 'PointPrimitive'
+      | 'DimensionPrimitive'
       | $TEMPORARY$string<'ColorPrimitive'>
       | $TEMPORARY$string<'EdgeInsetsPrimitive'>
       | $TEMPORARY$string<'ImageSourcePrimitive'>
-      | $TEMPORARY$string<'PointPrimitive'>,
+      | $TEMPORARY$string<'PointPrimitive'>
+      | $TEMPORARY$string<'DimensionPrimitive'>,
   ) {
     switch (name) {
       case 'ColorPrimitive':
@@ -86,6 +88,15 @@ function getImports(
       case 'EdgeInsetsPrimitive':
         imports.add('import com.facebook.react.bridge.ReadableMap;');
         return;
+      case 'DimensionPrimitive':
+        if (type === 'delegate') {
+          imports.add(
+            'import com.facebook.react.bridge.DimensionPropConverter;',
+          );
+        } else {
+          imports.add('import com.facebook.yoga.YogaValue;');
+        }
+        return;
       default:
         (name: empty);
         throw new Error(`Invalid ReservedPropTypeAnnotation name, got ${name}`);

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

@@ -526,6 +526,36 @@ const INSETS_PROP: SchemaType = {
   },
 };
 
+const DIMENSION_PROP: SchemaType = {
+  modules: {
+    CustomView: {
+      type: 'Component',
+      components: {
+        DimensionPropNativeComponent: {
+          extendsProps: [
+            {
+              type: 'ReactNativeBuiltInType',
+              knownTypeName: 'ReactNativeCoreViewProps',
+            },
+          ],
+          events: [],
+          props: [
+            {
+              name: 'marginBack',
+              optional: true,
+              typeAnnotation: {
+                type: 'ReservedPropTypeAnnotation',
+                name: 'DimensionPrimitive',
+              },
+            },
+          ],
+          commands: [],
+        },
+      },
+    },
+  },
+};
+
 const ARRAY_PROPS: SchemaType = {
   modules: {
     Slider: {
@@ -613,6 +643,17 @@ const ARRAY_PROPS: SchemaType = {
                 },
               },
             },
+            {
+              name: 'dimensions',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'ReservedPropTypeAnnotation',
+                  name: 'DimensionPrimitive',
+                },
+              },
+            },
             {
               name: 'sizes',
               optional: true,
@@ -1653,6 +1694,7 @@ module.exports = {
   IMAGE_PROP,
   POINT_PROP,
   INSETS_PROP,
+  DIMENSION_PROP,
   ARRAY_PROPS,
   ARRAY_PROPS_WITH_NESTED_OBJECT,
   OBJECT_PROPS,

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

@@ -168,6 +168,34 @@ using CommandNativeComponentComponentDescriptor = ConcreteComponentDescriptor<Co
 }
 `;
 
+exports[`GenerateComponentDescriptorH can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using DimensionPropNativeComponentComponentDescriptor = ConcreteComponentDescriptor<DimensionPropNativeComponentShadowNode>;
+
+} // 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

@@ -286,6 +286,31 @@ NS_ASSUME_NONNULL_END",
 }
 `;
 
+exports[`GenerateComponentHObjCpp can generate fixture DIMENSION_PROP 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 RCTDimensionPropNativeComponentViewProtocol <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

@@ -144,6 +144,31 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterCpp can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",

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

@@ -196,6 +196,40 @@ class JSI_EXPORT CommandNativeComponentEventEmitter : public ViewEventEmitter {
   
 
   
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateEventEmitterH can generate fixture DIMENSION_PROP 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 DimensionPropNativeComponentEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  
+
+  
 };
 
 } // namespace react

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

@@ -14,6 +14,7 @@ Map {
 
 #include <react/renderer/components/ARRAY_PROPS/Props.h>
 #include <react/renderer/components/image/conversions.h>
+#include <react/renderer/components/view/conversions.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/propsConversions.h>
 
@@ -32,6 +33,7 @@ ArrayPropsNativeComponentProps::ArrayPropsNativeComponentProps(
     colors(convertRawProp(context, rawProps, \\"colors\\", sourceProps.colors, {})),
     srcs(convertRawProp(context, rawProps, \\"srcs\\", sourceProps.srcs, {})),
     points(convertRawProp(context, rawProps, \\"points\\", sourceProps.points, {})),
+    dimensions(convertRawProp(context, rawProps, \\"dimensions\\", sourceProps.dimensions, {})),
     sizes(convertRawProp(context, rawProps, \\"sizes\\", sourceProps.sizes, {static_cast<ArrayPropsNativeComponentSizesMask>(ArrayPropsNativeComponentSizes::Small)})),
     object(convertRawProp(context, rawProps, \\"object\\", sourceProps.object, {})),
     array(convertRawProp(context, rawProps, \\"array\\", sourceProps.array, {})),
@@ -209,6 +211,40 @@ CommandNativeComponentProps::CommandNativeComponentProps(
 }
 `;
 
+exports[`GeneratePropsCpp can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/Props.h>
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+DimensionPropNativeComponentProps::DimensionPropNativeComponentProps(
+    const PropsParserContext &context,
+    const DimensionPropNativeComponentProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    marginBack(convertRawProp(context, rawProps, \\"marginBack\\", sourceProps.marginBack, {}))
+      {}
+
+} // 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

@@ -21,6 +21,7 @@ Map {
 #include <react/renderer/graphics/Point.h>
 #include <react/renderer/imagemanager/primitives.h>
 #include <vector>
+#include <yoga/Yoga.h>
 
 namespace facebook {
 namespace react {
@@ -205,6 +206,7 @@ class JSI_EXPORT ArrayPropsNativeComponentProps final : public ViewProps {
   std::vector<SharedColor> colors{};
   std::vector<ImageSource> srcs{};
   std::vector<Point> points{};
+  std::vector<YGValue> dimensions{};
   ArrayPropsNativeComponentSizesMask sizes{static_cast<ArrayPropsNativeComponentSizesMask>(ArrayPropsNativeComponentSizes::Small)};
   std::vector<ArrayPropsNativeComponentObjectStruct> object{};
   std::vector<ArrayPropsNativeComponentArrayStruct> array{};
@@ -439,6 +441,43 @@ class JSI_EXPORT CommandNativeComponentProps final : public ViewProps {
 }
 `;
 
+exports[`GeneratePropsH can generate fixture DIMENSION_PROP 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 <yoga/Yoga.h>
+
+namespace facebook {
+namespace react {
+
+class JSI_EXPORT DimensionPropNativeComponentProps final : public ViewProps {
+ public:
+  DimensionPropNativeComponentProps() = default;
+  DimensionPropNativeComponentProps(const PropsParserContext& context, const DimensionPropNativeComponentProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  YGValue marginBack{};
+};
+
+} // 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

@@ -47,6 +47,9 @@ public class ArrayPropsNativeComponentManagerDelegate<T extends View, U extends
       case \\"points\\":
         mViewManager.setPoints(view, (ReadableArray) value);
         break;
+      case \\"dimensions\\":
+        mViewManager.setDimensions(view, (ReadableArray) value);
+        break;
       case \\"sizes\\":
         mViewManager.setSizes(view, (ReadableArray) value);
         break;
@@ -275,6 +278,44 @@ public class CommandNativeComponentManagerDelegate<T extends View, U extends Bas
 }
 `;
 
+exports[`GeneratePropsJavaDelegate can generate fixture DIMENSION_PROP 1`] = `
+Map {
+  "java/com/facebook/react/viewmanagers/DimensionPropNativeComponentManagerDelegate.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.DimensionPropConverter;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.BaseViewManagerInterface;
+
+public class DimensionPropNativeComponentManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & DimensionPropNativeComponentManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public DimensionPropNativeComponentManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case \\"marginBack\\":
+        mViewManager.setMarginBack(view, DimensionPropConverter.getDimension(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

@@ -25,6 +25,7 @@ public interface ArrayPropsNativeComponentManagerInterface<T extends View> {
   void setColors(T view, @Nullable ReadableArray value);
   void setSrcs(T view, @Nullable ReadableArray value);
   void setPoints(T view, @Nullable ReadableArray value);
+  void setDimensions(T view, @Nullable ReadableArray value);
   void setSizes(T view, @Nullable ReadableArray value);
   void setObject(T view, @Nullable ReadableArray value);
   void setArray(T view, @Nullable ReadableArray value);
@@ -152,6 +153,30 @@ public interface CommandNativeComponentManagerInterface<T extends View> {
 }
 `;
 
+exports[`GeneratePropsJavaInterface can generate fixture DIMENSION_PROP 1`] = `
+Map {
+  "java/com/facebook/react/viewmanagers/DimensionPropNativeComponentManagerInterface.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.yoga.YogaValue;
+
+public interface DimensionPropNativeComponentManagerInterface<T extends View> {
+  void setMarginBack(T view, @Nullable YogaValue 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

@@ -107,6 +107,7 @@ package com.facebook.react.viewmanagers.Slider;
 
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.yoga.YogaValue;
 import java.util.ArrayList;
 
 @DoNotStrip
@@ -118,6 +119,7 @@ public class ArrayPropsNativeComponentProps {
   private ArrayList<Integer> mColors;
   private ArrayList<ReadableMap> mSrcs;
   private ArrayList<ReadableMap> mPoints;
+  private ArrayList<YogaValue> mDimensions;
   private ArrayList<String> mSizes;
   private ArrayList<ArrayPropsNativeComponentPropsObjectElement> mObject;
   private ArrayList<ArrayPropsNativeComponentPropsArrayElement> mArray;
@@ -151,6 +153,10 @@ public class ArrayPropsNativeComponentProps {
     return mPoints;
   }
   @DoNotStrip
+  public ArrayList<YogaValue> getDimensions() {
+    return mDimensions;
+  }
+  @DoNotStrip
   public ArrayList<String> getSizes() {
     return mSizes;
   }
@@ -340,6 +346,35 @@ public class CommandNativeComponentProps {
 }
 `;
 
+exports[`GeneratePropsJavaPojo can generate fixture DIMENSION_PROP 1`] = `
+Map {
+  "java/com/facebook/react/viewmanagers/CustomView/DimensionPropNativeComponentProps.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.CustomView;
+
+import androidx.annotation.Nullable;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.yoga.YogaValue;
+
+@DoNotStrip
+public class DimensionPropNativeComponentProps {
+  private @Nullable YogaValue mMarginBack;
+  @DoNotStrip
+  public @Nullable YogaValue getMarginBack() {
+    return mMarginBack;
+  }
+}
+",
+}
+`;
+
 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

@@ -150,6 +150,31 @@ extern const char CommandNativeComponentComponentName[] = \\"CommandNativeCompon
 }
 `;
 
+exports[`GenerateShadowNodeCpp can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char DimensionPropNativeComponentComponentName[] = \\"DimensionPropNativeComponent\\";
+
+} // 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

@@ -240,6 +240,46 @@ using CommandNativeComponentShadowNode = ConcreteViewShadowNode<
 }
 `;
 
+exports[`GenerateShadowNodeH can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/EventEmitters.h>
+#include <react/renderer/components/DIMENSION_PROP/Props.h>
+#include <react/renderer/components/DIMENSION_PROP/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char DimensionPropNativeComponentComponentName[];
+
+/*
+ * \`ShadowNode\` for <DimensionPropNativeComponent> component.
+ */
+using DimensionPropNativeComponentShadowNode = ConcreteViewShadowNode<
+    DimensionPropNativeComponentComponentName,
+    DimensionPropNativeComponentProps,
+    DimensionPropNativeComponentEventEmitter,
+    DimensionPropNativeComponentState>;
+
+} // 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

@@ -138,6 +138,30 @@ namespace react {
 
 
 
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
+exports[`GenerateStateCpp can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/States.h>
+
+namespace facebook {
+namespace react {
+
+
+
 } // namespace react
 } // namespace facebook
 ",

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

@@ -246,6 +246,47 @@ public:
 }
 `;
 
+exports[`GenerateStateH can generate fixture DIMENSION_PROP 1`] = `
+Map {
+  "States.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: GenerateStateH.js
+ */
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook {
+namespace react {
+
+class DimensionPropNativeComponentState {
+public:
+  DimensionPropNativeComponentState() = default;
+
+#ifdef ANDROID
+  DimensionPropNativeComponentState(DimensionPropNativeComponentState const &previousState, folly::dynamic data){};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
+#endif
+};
+
+} // namespace react
+} // namespace facebook",
+}
+`;
+
 exports[`GenerateStateH can generate fixture DOUBLE_PROPS 1`] = `
 Map {
   "States.h" => "/**

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

@@ -15,6 +15,7 @@ Map {
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/components/ARRAY_PROPS/Props.h>
 #include <react/renderer/components/image/conversions.h>
+#include <react/renderer/components/view/conversions.h>
 #include <react/renderer/core/RawProps.h>
 #include <react/renderer/core/RawPropsParser.h>
 #include <react/renderer/core/propsConversions.h>
@@ -250,6 +251,42 @@ TEST(CommandNativeComponentProps_accessibilityHint, etc) {
 }
 `;
 
+exports[`GenerateTests can generate fixture DIMENSION_PROP 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/DIMENSION_PROP/Props.h>
+#include <react/renderer/components/view/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(DimensionPropNativeComponentProps_DoesNotDie, etc) {
+  auto propParser = RawPropsParser();
+  propParser.prepare<DimensionPropNativeComponentProps>();
+  auto const &sourceProps = DimensionPropNativeComponentProps();
+  auto const &rawProps = RawProps(folly::dynamic::object(\\"xx_invalid_xx\\", \\"xx_invalid_xx\\"));
+
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+
+  rawProps.parse(propParser, parserContext);
+  DimensionPropNativeComponentProps(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

@@ -34,6 +34,7 @@ Class<RCTComponentViewProtocol> ColorPropNativeComponentCls(void) __attribute__(
 Class<RCTComponentViewProtocol> ImagePropNativeComponentCls(void) __attribute__((used)); // IMAGE_PROP
 Class<RCTComponentViewProtocol> PointPropNativeComponentCls(void) __attribute__((used)); // POINT_PROP
 Class<RCTComponentViewProtocol> InsetsPropNativeComponentCls(void) __attribute__((used)); // INSETS_PROP
+Class<RCTComponentViewProtocol> DimensionPropNativeComponentCls(void) __attribute__((used)); // DIMENSION_PROP
 Class<RCTComponentViewProtocol> ArrayPropsNativeComponentCls(void) __attribute__((used)); // ARRAY_PROPS
 Class<RCTComponentViewProtocol> ArrayPropsNativeComponentCls(void) __attribute__((used)); // ARRAY_PROPS_WITH_NESTED_OBJECT
 Class<RCTComponentViewProtocol> ObjectPropsCls(void) __attribute__((used)); // OBJECT_PROPS

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

@@ -44,6 +44,8 @@ Class<RCTComponentViewProtocol> RCTThirdPartyFabricComponentsProvider(const char
 
     {\\"InsetsPropNativeComponent\\", InsetsPropNativeComponentCls}, // INSETS_PROP
 
+    {\\"DimensionPropNativeComponent\\", DimensionPropNativeComponentCls}, // DIMENSION_PROP
+
     {\\"ArrayPropsNativeComponent\\", ArrayPropsNativeComponentCls}, // ARRAY_PROPS
 
     {\\"ArrayPropsNativeComponent\\", ArrayPropsNativeComponentCls}, // ARRAY_PROPS_WITH_NESTED_OBJECT

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

@@ -36,6 +36,7 @@ export const __INTERNAL_VIEW_CONFIG = {
 
     srcs: true,
     points: true,
+    dimensions: true,
     sizes: true,
     object: true,
     array: true,
@@ -239,6 +240,40 @@ export const Commands = {
 }
 `;
 
+exports[`GenerateViewConfigJs can generate fixture DIMENSION_PROP 1`] = `
+Map {
+  "DIMENSION_PROPNativeViewConfig.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 = 'DimensionPropNativeComponent';
+
+
+export const __INTERNAL_VIEW_CONFIG = {
+  uiViewClassName: 'DimensionPropNativeComponent',
+
+  validAttributes: {
+    marginBack: true,
+  },
+};
+
+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

@@ -211,7 +211,7 @@ const codegenNativeComponent = require('codegenNativeComponent');
 
 import type {Int32, Double, Float, WithDefault} from 'CodegenTypes';
 import type {ImageSource} from 'ImageSource';
-import type {ColorValue, ColorArrayValue, PointValue, EdgeInsetsValue} from 'StyleSheetTypes';
+import type {ColorValue, ColorArrayValue, PointValue, EdgeInsetsValue, DimensionValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
 
@@ -311,6 +311,12 @@ type ModuleProps = $ReadOnly<{|
   insets_optional_key?: EdgeInsetsValue,
   insets_optional_value: ?EdgeInsetsValue,
   insets_optional_both?: ?EdgeInsetsValue,
+
+  // DimensionValue props
+  dimension_required: DimensionValue,
+  dimension_optional_key?: DimensionValue,
+  dimension_optional_value: ?DimensionValue,
+  dimension_optional_both?: ?DimensionValue,
 |}>;
 
 export default (codegenNativeComponent<ModuleProps, Options>(
@@ -335,7 +341,7 @@ const codegenNativeComponent = require('codegenNativeComponent');
 
 import type {Int32, Double, Float, WithDefault} from 'CodegenTypes';
 import type {ImageSource} from 'ImageSource';
-import type {ColorValue, PointValue, ProcessColorValue, EdgeInsetsValue} from 'StyleSheetTypes';
+import type {ColorValue, PointValue, ProcessColorValue, EdgeInsetsValue, DimensionValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
 
@@ -410,6 +416,12 @@ type ModuleProps = $ReadOnly<{|
   array_insets_optional_value: ?$ReadOnlyArray<EdgeInsetsValue>,
   array_insets_optional_both?: ?$ReadOnlyArray<EdgeInsetsValue>,
 
+  // DimensionValue props
+  array_dimension_required: $ReadOnlyArray<DimensionValue>,
+  array_dimension_optional_key?: $ReadOnlyArray<DimensionValue>,
+  array_dimension_optional_value: ?$ReadOnlyArray<DimensionValue>,
+  array_dimension_optional_both?: ?$ReadOnlyArray<DimensionValue>,
+
   // Object props
   array_object_required: $ReadOnlyArray<$ReadOnly<{| prop: string |}>>,
   array_object_optional_key?: $ReadOnlyArray<$ReadOnly<{| prop: string |}>>,
@@ -551,6 +563,12 @@ type ModuleProps = $ReadOnly<{|
   insets_optional_value: $ReadOnly<{|prop: ?EdgeInsetsValue|}>,
   insets_optional_both: $ReadOnly<{|prop?: ?EdgeInsetsValue|}>,
 
+  // DimensionValue props
+  dimension_required: $ReadOnly<{|prop: DimensionValue|}>,
+  dimension_optional_key: $ReadOnly<{|prop?: DimensionValue|}>,
+  dimension_optional_value: $ReadOnly<{|prop: ?DimensionValue|}>,
+  dimension_optional_both: $ReadOnly<{|prop?: ?DimensionValue|}>,
+
   // Nested object props
   object_required: $ReadOnly<{|prop: $ReadOnly<{nestedProp: string}>|}>,
   object_optional_key?: $ReadOnly<{|prop: $ReadOnly<{nestedProp: string}>|}>,

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

@@ -539,6 +539,38 @@ exports[`RN Codegen Flow Parser can generate fixture ALL_PROP_TYPES_NO_EVENTS 1`
                 'type': 'ReservedPropTypeAnnotation',
                 'name': 'EdgeInsetsPrimitive'
               }
+            },
+            {
+              'name': 'dimension_required',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
+            },
+            {
+              'name': 'dimension_optional_key',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
+            },
+            {
+              'name': 'dimension_optional_value',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
+            },
+            {
+              'name': 'dimension_optional_both',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
             }
           ],
           'commands': []
@@ -970,6 +1002,50 @@ exports[`RN Codegen Flow Parser can generate fixture ARRAY_PROP_TYPES_NO_EVENTS
                 }
               }
             },
+            {
+              'name': 'array_dimension_required',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
+            {
+              'name': 'array_dimension_optional_key',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
+            {
+              'name': 'array_dimension_optional_value',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
+            {
+              'name': 'array_dimension_optional_both',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
             {
               'name': 'array_object_required',
               'optional': false,
@@ -7506,6 +7582,74 @@ exports[`RN Codegen Flow Parser can generate fixture OBJECT_PROP_TYPES_NO_EVENTS
                 ]
               }
             },
+            {
+              'name': 'dimension_required',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              'name': 'dimension_optional_key',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': true,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              'name': 'dimension_optional_value',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': true,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              'name': 'dimension_optional_both',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': true,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
             {
               'name': 'object_required',
               'optional': false,

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

@@ -123,6 +123,11 @@ function getTypeAnnotationForArray<+T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'EdgeInsetsPrimitive',
       };
+    case 'DimensionValue':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'DimensionPrimitive',
+      };
     case 'Stringish':
       return {
         type: 'StringTypeAnnotation',
@@ -303,6 +308,11 @@ function getTypeAnnotation<+T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'EdgeInsetsPrimitive',
       };
+    case 'DimensionValue':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'DimensionPrimitive',
+      };
     case 'Int32':
       return {
         type: 'Int32TypeAnnotation',

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

@@ -204,6 +204,7 @@ import type {
   ColorArrayValue,
   PointValue,
   EdgeInsetsValue,
+  DimensionValue,
 } from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
@@ -302,6 +303,13 @@ export interface ModuleProps extends ViewProps {
   insets_optional_key?: EdgeInsetsValue;
   insets_optional_value: EdgeInsetsValue | null | undefined;
   insets_optional_both?: EdgeInsetsValue | null | undefined;
+
+
+  // DimensionValue props
+  dimension_required: DimensionValue;
+  dimension_optional_key?: DimensionValue;
+  dimension_optional_value: DimensionValue | null | undefined;
+  dimension_optional_both?: DimensionValue | null | undefined;
 }
 
 export default codegenNativeComponent<ModuleProps>(
@@ -330,6 +338,7 @@ import type {
   ColorArrayValue,
   PointValue,
   EdgeInsetsValue,
+  DimensionValue,
 } from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
@@ -403,6 +412,12 @@ export interface ModuleProps extends ViewProps {
   array_insets_optional_value: ReadonlyArray<EdgeInsetsValue> | null | undefined;
   array_insets_optional_both?: ReadonlyArray<EdgeInsetsValue> | null | undefined;
 
+  // DimensionValue props
+  array_dimension_required: ReadonlyArray<DimensionValue>;
+  array_dimension_optional_key?: ReadonlyArray<DimensionValue>;
+  array_dimension_optional_value: ReadonlyArray<DimensionValue> | null | undefined;
+  array_dimension_optional_both?: ReadonlyArray<DimensionValue> | null | undefined;
+
   // Object props
   array_object_required: ReadonlyArray<Readonly<{prop: string}>>;
   array_object_optional_key?: ReadonlyArray<Readonly<{prop: string}>>;
@@ -622,6 +637,7 @@ import type {
   ColorArrayValue,
   PointValue,
   EdgeInsetsValue,
+  DimensionValue,
 } from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {HostComponent} from 'react-native';
@@ -687,6 +703,12 @@ export interface ModuleProps extends ViewProps {
   insets_optional_value: Readonly<{prop: EdgeInsetsValue | null | undefined}>;
   insets_optional_both: Readonly<{prop?: EdgeInsetsValue | null | undefined}>;
 
+  // DimensionValue props
+  dimension_required: Readonly<{prop: DimensionValue}>;
+  dimension_optional_key: Readonly<{prop?: DimensionValue}>;
+  dimension_optional_value: Readonly<{prop: DimensionValue | null | undefined}>;
+  dimension_optional_both: Readonly<{prop?: DimensionValue | null | undefined}>;
+
   // Nested object props
   object_required: Readonly<{prop: Readonly<{nestedProp: string}>}>;
   object_optional_key?: Readonly<{prop: Readonly<{nestedProp: string}>}>;

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

@@ -537,6 +537,38 @@ exports[`RN Codegen TypeScript Parser can generate fixture ALL_PROP_TYPES_NO_EVE
                 'type': 'ReservedPropTypeAnnotation',
                 'name': 'EdgeInsetsPrimitive'
               }
+            },
+            {
+              'name': 'dimension_required',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
+            },
+            {
+              'name': 'dimension_optional_key',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
+            },
+            {
+              'name': 'dimension_optional_value',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
+            },
+            {
+              'name': 'dimension_optional_both',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ReservedPropTypeAnnotation',
+                'name': 'DimensionPrimitive'
+              }
             }
           ],
           'commands': []
@@ -968,6 +1000,50 @@ exports[`RN Codegen TypeScript Parser can generate fixture ARRAY_PROP_TYPES_NO_E
                 }
               }
             },
+            {
+              'name': 'array_dimension_required',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
+            {
+              'name': 'array_dimension_optional_key',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
+            {
+              'name': 'array_dimension_optional_value',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
+            {
+              'name': 'array_dimension_optional_both',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'ArrayTypeAnnotation',
+                'elementType': {
+                  'type': 'ReservedPropTypeAnnotation',
+                  'name': 'DimensionPrimitive'
+                }
+              }
+            },
             {
               'name': 'array_object_required',
               'optional': false,
@@ -8211,6 +8287,74 @@ exports[`RN Codegen TypeScript Parser can generate fixture OBJECT_PROP_TYPES_NO_
                 ]
               }
             },
+            {
+              'name': 'dimension_required',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              'name': 'dimension_optional_key',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': true,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              'name': 'dimension_optional_value',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': true,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              'name': 'dimension_optional_both',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'ObjectTypeAnnotation',
+                'properties': [
+                  {
+                    'name': 'prop',
+                    'optional': true,
+                    'typeAnnotation': {
+                      'type': 'ReservedPropTypeAnnotation',
+                      'name': 'DimensionPrimitive'
+                    }
+                  }
+                ]
+              }
+            },
             {
               'name': 'object_required',
               'optional': false,

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

@@ -228,6 +228,11 @@ function getCommonTypeAnnotation<T>(
         type: 'ReservedPropTypeAnnotation',
         name: 'EdgeInsetsPrimitive',
       };
+    case 'DimensionValue':
+      return {
+        type: 'ReservedPropTypeAnnotation',
+        name: 'DimensionPrimitive',
+      };
     case 'TSUnionType':
       return getUnionOfLiterals(
         name,