Skip to content

Commit

Permalink
Add support for setNativeProps to Fabric (#25737)
Browse files Browse the repository at this point in the history
Add support for `setNativeProps` in Fabric to make migration to the new
architecture easier. The React Native part of this has already landed in
the core and iOS in
facebook/react-native@1d3fa40.

It is still recommended to move away from `setNativeProps` because the
API will not work with future features.
  • Loading branch information
sammy-SC authored Dec 9, 2022
1 parent 1c7055d commit b14d7fa
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 16 deletions.
16 changes: 11 additions & 5 deletions packages/react-native-renderer/src/ReactFabricHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -52,6 +55,7 @@ const {
unstable_DefaultEventPriority: FabricDefaultPriority,
unstable_DiscreteEventPriority: FabricDiscretePriority,
unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
setNativeProps,
} = nativeFabricUIManager;

const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
Expand Down Expand Up @@ -208,12 +212,14 @@ class ReactFabricHostComponent {

setNativeProps(nativeProps: Object) {
if (__DEV__) {
console.error(
'Warning: setNativeProps is not currently supported in Fabric',
);
warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
}
const updatePayload = create(nativeProps, this.viewConfig.validAttributes);

return;
const {stateNode} = this._internalInstanceHandle;
if (stateNode != null && updatePayload != null) {
setNativeProps(stateNode.node, updatePayload);
}
}

// This API (addEventListener, removeEventListener) attempts to adhere to the
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,8 @@ const RCTFabricUIManager = {

dispatchCommand: jest.fn(),

setNativeProps: jest.fn(),

sendAccessibilityEvent: jest.fn(),

registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function mockRenderKeys(keyLists) {

const mockContainerTag = 11;
const MockView = createReactNativeComponentClass('RCTMockView', () => ({
validAttributes: {},
validAttributes: {foo: true},
uiViewClassName: 'RCTMockView',
}));

Expand Down Expand Up @@ -200,21 +200,15 @@ describe('measureLayout', () => {
});

describe('setNativeProps', () => {
test('setNativeProps(...) emits a warning', () => {
test('setNativeProps(...) invokes setNativeProps on Fabric UIManager', () => {
const {
UIManager,
} = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');

const [[fooRef]] = mockRenderKeys([['foo']]);
fooRef.setNativeProps({foo: 'baz'});

expect(() => {
fooRef.setNativeProps({});
}).toErrorDev(
['Warning: setNativeProps is not currently supported in Fabric'],
{
withoutStack: true,
},
);
expect(UIManager.updateView).not.toBeCalled();
expect(nativeFabricUIManager.setNativeProps).toHaveBeenCalledTimes(1);
});
});
2 changes: 1 addition & 1 deletion scripts/flow/react-native-host-hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ declare var nativeFabricUIManager: {
payload: Object,
) => void,
) => void,

setNativeProps: (node: Object, nativeProps: Object) => Object,
dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,

Expand Down

0 comments on commit b14d7fa

Please sign in to comment.