@samitouri / QOS-React / commits / 911dbd9e34

feat(ReactNative): prioritize attribute config `process` function to allow processing function props (#32119)

## Summary In react-native props that are passed as function get converted to a boolean (`true`). This is the default pattern for event handlers in react-native. However, there are reasons for why you might want to opt-out of this behavior, and instead, pass along the actual function as the prop. Right now, there is no way to do this, and props that are functions always get set to `true`. The `ViewConfig` attributes already have the API for a `process` function. I simply moved the check for the process function up, so if a ViewConfig's prop attribute configured a process function this is always called first. This provides an API to opt out of the default behavior. This is the accompanied PR for react-native: - https://github.com/facebook/react-native/pull/48777 ## How did you test this change?  I modified the code manually in a template react-native app and confirmed its working. This is a code path you only need in very special cases, thus it's a bit hard to provide a test for this. I recorded a video where you can see that the changes are active and the prop is being passed as native value. For this I created a custom native component with a view config that looked like this: ```js const viewConfig = { uiViewClassName: 'CustomView', bubblingEventTypes: {}, directEventTypes: {}, validAttributes: { nativeProp: { process: (nativeProp) => { // Identity function that simply returns the prop function callback // to opt out of this prop being set to `true` as its a function return nativeProp }, }, }, } ``` https://github.com/user-attachments/assets/493534b2-a508-4142-a760-0b1b24419e19 Additionally I made sure that this doesn't conflict with any existing view configs in react native. In general, this shouldn't be a breaking change, as for existing view configs it didn't made a difference if you simply set `myProp: true` or `myProp: { process: () => {...} }` because as soon as it was detected that the prop is a function the config wouldn't be used (which is what this PR fixes). Probably everyone, including the react-native core components use `myProp: true` for callback props, so this change should be fine.

Hanno J. Gödecke committed Jun 9, 2025 at 11:55 UTC 911dbd9e34048b21e96f24acb837b926687aa939

2 files changed +51 -19

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

+26 -19

@@ -254,14 +254,17 @@ function diffProperties(

254 prevProp = prevProps[propKey];

255 nextProp = nextProps[propKey];

256

257 - // functions are converted to booleans as markers that the associated

258 - // events should be sent from native.

257 if (typeof nextProp === 'function') {

260 - nextProp = (true: any);

261 - // If nextProp is not a function, then don't bother changing prevProp

262 - // since nextProp will win and go into the updatePayload regardless.

263 - if (typeof prevProp === 'function') {

264 - prevProp = (true: any);

258 + const attributeConfigHasProcess = typeof attributeConfig === 'object' && typeof attributeConfig.process === 'function';

259 + if (!attributeConfigHasProcess) {

260 + // functions are converted to booleans as markers that the associated

261 + // events should be sent from native.

262 + nextProp = (true: any);

263 + // If nextProp is not a function, then don't bother changing prevProp

264 + // since nextProp will win and go into the updatePayload regardless.

265 + if (typeof prevProp === 'function') {

266 + prevProp = (true: any);

267 + }

268 }

269 }

270

@@ -444,18 +447,22 @@ function addNestedProperty(

447 } else {

448 continue;

449 }

447 - } else if (typeof prop === 'function') {

448 - // A function prop. It represents an event handler. Pass it to native as 'true'.

449 - newValue = true;

450 - } else if (typeof attributeConfig !== 'object') {

451 - // An atomic prop. Doesn't need to be flattened.

452 - newValue = prop;

453 - } else if (typeof attributeConfig.process === 'function') {

454 - // An atomic prop with custom processing.

455 - newValue = attributeConfig.process(prop);

456 - } else if (typeof attributeConfig.diff === 'function') {

457 - // An atomic prop with custom diffing. We don't need to do diffing when adding props.

458 - newValue = prop;

450 + } else if (typeof attributeConfig === 'object') {

451 + if (typeof attributeConfig.process === 'function') {

452 + // An atomic prop with custom processing.

453 + newValue = attributeConfig.process(prop);

454 + } else if (typeof attributeConfig.diff === 'function') {

455 + // An atomic prop with custom diffing. We don't need to do diffing when adding props.

456 + newValue = prop;

457 + }

458 + } else {

459 + if (typeof prop === 'function') {

460 + // A function prop. It represents an event handler. Pass it to native as 'true'.

461 + newValue = true;

462 + } else {

463 + // An atomic prop. Doesn't need to be flattened.

464 + newValue = prop;

465 + }

466 }

467

468 if (newValue !== undefined) {

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

+25

@@ -102,6 +102,14 @@ describe('ReactNativeAttributePayloadFabric.create', () => {

102 expect(processA).toBeCalledWith(2);

103 });

104

105 + it('should use the process attribute for functions as well', () => {

106 + const process = x => x;

107 + const nextFunction = () => {};

108 + expect(create({a: nextFunction}, {a: {process}})).toEqual({

109 + a: nextFunction,

110 + });

111 + });

112 +

113 it('should work with undefined styles', () => {

114 expect(create({style: undefined}, {style: {b: true}})).toEqual(null);

115 expect(create({style: {a: '#ffffff', b: 1}}, {style: {b: true}})).toEqual({

@@ -452,4 +460,21 @@ describe('ReactNativeAttributePayloadFabric.diff', () => {

460 ),

461 ).toEqual(null);

462 });

463 +

464 + it('should use the process function config when prop is a function', () => {

465 + const process = jest.fn(a => a);

466 + const nextFunction = function () {};

467 + expect(

468 + diff(

469 + {

470 + a: function () {},

471 + },

472 + {

473 + a: nextFunction,

474 + },

475 + {a: {process}},

476 + ),

477 + ).toEqual({a: nextFunction});

478 + expect(process).toBeCalled();

479 + });

480 });