Process font variation settings in native view configs

Author: cipolleschi

packages/react-native/Libraries/ReactNative/__tests__/getNativeComponentAttributes-test.js

@@ -0,0 +1,48 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+jest.mock('../UIManager', () => ({
+  __esModule: true,
+  default: {
+    getConstants: () => ({ViewManagerNames: []}),
+    getDefaultEventTypes: () => ({}),
+    getViewManagerConfig: name =>
+      name === 'TestView'
+        ? {
+            NativeProps: {fontVariationSettings: 'String'},
+            bubblingEventTypes: {},
+            directEventTypes: {},
+          }
+        : null,
+  },
+}));
+
+const getNativeComponentAttributes =
+  require('../getNativeComponentAttributes').default;
+const {
+  fontVariationSettingsAttribute,
+} = require('../../Components/View/ReactNativeStyleAttributes');
+
+describe('getNativeComponentAttributes', () => {
+  it('processes object font variation settings from native view configs', () => {
+    const viewConfig = getNativeComponentAttributes('TestView');
+
+    expect(viewConfig.validAttributes.fontVariationSettings).toEqual(
+      fontVariationSettingsAttribute,
+    );
+    expect(
+      viewConfig.validAttributes.fontVariationSettings.process({
+        wght: 552.5,
+        opsz: 17.25,
+      }),
+    ).toBe("'opsz' 17.25, 'wght' 552.5");
+  });
+});

packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -26,6 +26,8 @@ const processBackgroundSize =
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray').default;
 const processFilter = require('../StyleSheet/processFilter').default;
+const processFontVariationSettings =
+  require('../StyleSheet/processFontVariationSettings').default;
 const insetsDiffer = require('../Utilities/differ/insetsDiffer').default;
 const matricesDiffer = require('../Utilities/differ/matricesDiffer').default;
 const pointsDiffer = require('../Utilities/differ/pointsDiffer').default;
@@ -74,7 +76,7 @@ function getNativeComponentAttributes(uiViewClassName: string): any {
   for (const key in nativeProps) {
     const typeName = nativeProps[key];
     const diff = getDifferForType(typeName);
-    const process = getProcessorForType(typeName);
+    const process = getProcessorForAttribute(key, typeName);
 
     // If diff or process == null, omit the corresponding property from the Attribute
     // Why:
@@ -183,7 +185,14 @@ function getDifferForType(
   return null;
 }
 
-function getProcessorForType(typeName: string): ?(nextProp: any) => any {
+function getProcessorForAttribute(
+  attributeName: string,
+  typeName: string,
+): ?(nextProp: any) => any {
+  if (attributeName === 'fontVariationSettings') {
+    return processFontVariationSettings;
+  }
+
   switch (typeName) {
     // iOS Types
     case 'CGColor':