Add support for setNativeProps to Fabric (#25737)
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
1d3fa40c59
.
It is still recommended to move away from `setNativeProps` because the
API will not work with future features.
This commit is contained in:
parent
1c7055ddbb
commit
b14d7fa4b8
|
@ -18,7 +18,10 @@ import type {
|
||||||
TouchedViewDataAtPoint,
|
TouchedViewDataAtPoint,
|
||||||
} from './ReactNativeTypes';
|
} from './ReactNativeTypes';
|
||||||
|
|
||||||
import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
|
import {
|
||||||
|
mountSafeCallback_NOT_REALLY_SAFE,
|
||||||
|
warnForStyleProps,
|
||||||
|
} from './NativeMethodsMixinUtils';
|
||||||
import {create, diff} from './ReactNativeAttributePayload';
|
import {create, diff} from './ReactNativeAttributePayload';
|
||||||
|
|
||||||
import {dispatchEvent} from './ReactFabricEventEmitter';
|
import {dispatchEvent} from './ReactFabricEventEmitter';
|
||||||
|
@ -52,6 +55,7 @@ const {
|
||||||
unstable_DefaultEventPriority: FabricDefaultPriority,
|
unstable_DefaultEventPriority: FabricDefaultPriority,
|
||||||
unstable_DiscreteEventPriority: FabricDiscretePriority,
|
unstable_DiscreteEventPriority: FabricDiscretePriority,
|
||||||
unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
|
unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
|
||||||
|
setNativeProps,
|
||||||
} = nativeFabricUIManager;
|
} = nativeFabricUIManager;
|
||||||
|
|
||||||
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
|
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
|
||||||
|
@ -208,12 +212,14 @@ class ReactFabricHostComponent {
|
||||||
|
|
||||||
setNativeProps(nativeProps: Object) {
|
setNativeProps(nativeProps: Object) {
|
||||||
if (__DEV__) {
|
if (__DEV__) {
|
||||||
console.error(
|
warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
|
||||||
'Warning: setNativeProps is not currently supported in Fabric',
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
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
|
// This API (addEventListener, removeEventListener) attempts to adhere to the
|
||||||
|
|
|
@ -117,6 +117,8 @@ const RCTFabricUIManager = {
|
||||||
|
|
||||||
dispatchCommand: jest.fn(),
|
dispatchCommand: jest.fn(),
|
||||||
|
|
||||||
|
setNativeProps: jest.fn(),
|
||||||
|
|
||||||
sendAccessibilityEvent: jest.fn(),
|
sendAccessibilityEvent: jest.fn(),
|
||||||
|
|
||||||
registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
|
registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
|
||||||
|
|
|
@ -38,7 +38,7 @@ function mockRenderKeys(keyLists) {
|
||||||
|
|
||||||
const mockContainerTag = 11;
|
const mockContainerTag = 11;
|
||||||
const MockView = createReactNativeComponentClass('RCTMockView', () => ({
|
const MockView = createReactNativeComponentClass('RCTMockView', () => ({
|
||||||
validAttributes: {},
|
validAttributes: {foo: true},
|
||||||
uiViewClassName: 'RCTMockView',
|
uiViewClassName: 'RCTMockView',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -200,21 +200,15 @@ describe('measureLayout', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setNativeProps', () => {
|
describe('setNativeProps', () => {
|
||||||
test('setNativeProps(...) emits a warning', () => {
|
test('setNativeProps(...) invokes setNativeProps on Fabric UIManager', () => {
|
||||||
const {
|
const {
|
||||||
UIManager,
|
UIManager,
|
||||||
} = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
|
} = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
|
||||||
|
|
||||||
const [[fooRef]] = mockRenderKeys([['foo']]);
|
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(UIManager.updateView).not.toBeCalled();
|
||||||
|
expect(nativeFabricUIManager.setNativeProps).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -186,7 +186,7 @@ declare var nativeFabricUIManager: {
|
||||||
payload: Object,
|
payload: Object,
|
||||||
) => void,
|
) => void,
|
||||||
) => void,
|
) => void,
|
||||||
|
setNativeProps: (node: Object, nativeProps: Object) => Object,
|
||||||
dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
|
dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
|
||||||
sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,
|
sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue