Pass props through function to flatten them

Author: sammy-SC

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -18,7 +18,10 @@ import type {
   TouchedViewDataAtPoint,
 } from './ReactNativeTypes';
 
-import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
+import {
+  mountSafeCallback_NOT_REALLY_SAFE,
+  warnForStyleProps,
+} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
@@ -208,9 +211,14 @@ class ReactFabricHostComponent {
   }
 
   setNativeProps(nativeProps: Object) {
+    if (__DEV__) {
+      warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
+    }
+    const updatePayload = create(nativeProps, this.viewConfig.validAttributes);
+
     const {stateNode} = this._internalInstanceHandle;
-    if (stateNode != null) {
-      setNativeProps(stateNode.node, nativeProps);
+    if (stateNode != null && updatePayload != null) {
+      setNativeProps(stateNode.node, updatePayload);
     }
   }
 

packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js

@@ -38,7 +38,7 @@ function mockRenderKeys(keyLists) {
 
   const mockContainerTag = 11;
   const MockView = createReactNativeComponentClass('RCTMockView', () => ({
-    validAttributes: {},
+    validAttributes: {foo: true},
     uiViewClassName: 'RCTMockView',
   }));
 
@@ -206,7 +206,7 @@ describe('setNativeProps', () => {
     } = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
 
     const [[fooRef]] = mockRenderKeys([['foo']]);
-    fooRef.setNativeProps({});
+    fooRef.setNativeProps({foo: 'baz'});
 
     expect(UIManager.updateView).not.toBeCalled();
     expect(nativeFabricUIManager.setNativeProps).toHaveBeenCalledTimes(1);