Skip to content

Commit 870214f

Browse files
elicwhiteelicwhite
authored
Deprecate ref.setNativeProps in favor of ReactNative.setNativeProps (#14912)
* Deprecate ref.setNativeProps in favor of ReactNative.setNativeProps * Using a feature flag for the setNativeProps warning * Removing extra line breaks * Set the FB native feature flag to true * Prettier
1 parent 3989c09 commit 870214f

13 files changed

+105
-5
lines changed

‎packages/react-native-renderer/src/NativeMethodsMixin.js

+14
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import {
2727
warnForStyleProps,
2828
} from './NativeMethodsMixinUtils';
2929

30+
import warningWithoutStack from 'shared/warningWithoutStack';
31+
import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
32+
3033
export default function(
3134
findNodeHandle: any => ?number,
3235
findHostInstance: any => any,
@@ -121,6 +124,17 @@ export default function(
121124
* Manipulation](docs/direct-manipulation.html)).
122125
*/
123126
setNativeProps: function(nativeProps: Object) {
127+
if (__DEV__) {
128+
if (warnAboutDeprecatedSetNativeProps) {
129+
warningWithoutStack(
130+
false,
131+
'Warning: Calling ref.setNativeProps(nativeProps) ' +
132+
'is deprecated and will be removed in a future release. ' +
133+
'Use the setNativeProps export from the react-native package instead.' +
134+
"\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
135+
);
136+
}
137+
}
124138
// Class components don't have viewConfig -> validateAttributes.
125139
// Nor does it make sense to set native props on a non-native component.
126140
// Instead, find the nearest host component and set props on it.

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

+11
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import {get as getViewConfigForType} from 'ReactNativeViewConfigRegistry';
3030

3131
import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
3232
import invariant from 'shared/invariant';
33+
import warningWithoutStack from 'shared/warningWithoutStack';
34+
import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
3335

3436
import {dispatchEvent} from './ReactFabricEventEmitter';
3537

@@ -140,6 +142,15 @@ class ReactFabricHostComponent {
140142

141143
setNativeProps(nativeProps: Object) {
142144
if (__DEV__) {
145+
if (warnAboutDeprecatedSetNativeProps) {
146+
warningWithoutStack(
147+
false,
148+
'Warning: Calling ref.setNativeProps(nativeProps) ' +
149+
'is deprecated and will be removed in a future release. ' +
150+
'Use the setNativeProps export from the react-native package instead.' +
151+
"\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
152+
);
153+
}
143154
warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
144155
}
145156

‎packages/react-native-renderer/src/ReactNativeComponent.js

+15
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ import UIManager from 'UIManager';
2424
import {create} from './ReactNativeAttributePayload';
2525
import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
2626

27+
import warningWithoutStack from 'shared/warningWithoutStack';
28+
import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
29+
2730
export default function(
2831
findNodeHandle: any => ?number,
2932
findHostInstance: any => any,
@@ -132,6 +135,18 @@ export default function(
132135
* Manipulation](docs/direct-manipulation.html)).
133136
*/
134137
setNativeProps(nativeProps: Object): void {
138+
if (__DEV__) {
139+
if (warnAboutDeprecatedSetNativeProps) {
140+
warningWithoutStack(
141+
false,
142+
'Warning: Calling ref.setNativeProps(nativeProps) ' +
143+
'is deprecated and will be removed in a future release. ' +
144+
'Use the setNativeProps export from the react-native package instead.' +
145+
"\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
146+
);
147+
}
148+
}
149+
135150
// Class components don't have viewConfig -> validateAttributes.
136151
// Nor does it make sense to set native props on a non-native component.
137152
// Instead, find the nearest host component and set props on it.

‎packages/react-native-renderer/src/ReactNativeFiberHostComponent.js

+12
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import {
2626
warnForStyleProps,
2727
} from './NativeMethodsMixinUtils';
2828

29+
import warningWithoutStack from 'shared/warningWithoutStack';
30+
import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
31+
2932
/**
3033
* This component defines the same methods as NativeMethodsMixin but without the
3134
* findNodeHandle wrapper. This wrapper is unnecessary for HostComponent views
@@ -81,6 +84,15 @@ class ReactNativeFiberHostComponent {
8184

8285
setNativeProps(nativeProps: Object) {
8386
if (__DEV__) {
87+
if (warnAboutDeprecatedSetNativeProps) {
88+
warningWithoutStack(
89+
false,
90+
'Warning: Calling ref.setNativeProps(nativeProps) ' +
91+
'is deprecated and will be removed in a future release. ' +
92+
'Use the setNativeProps export from the react-native package instead.' +
93+
"\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n",
94+
);
95+
}
8496
warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
8597
}
8698

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

+20-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,20 @@
1212

1313
let React;
1414
let ReactFabric;
15+
let ReactFeatureFlags;
1516
let createReactClass;
1617
let createReactNativeComponentClass;
1718
let UIManager;
1819
let FabricUIManager;
1920
let StrictMode;
2021
let NativeMethodsMixin;
2122

23+
const SET_NATIVE_PROPS_DEPRECATION_MESSAGE =
24+
'Warning: Calling ref.setNativeProps(nativeProps) ' +
25+
'is deprecated and will be removed in a future release. ' +
26+
'Use the setNativeProps export from the react-native package instead.' +
27+
"\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n";
28+
2229
jest.mock('shared/ReactFeatureFlags', () =>
2330
require('shared/forks/ReactFeatureFlags.native-oss'),
2431
);
@@ -29,6 +36,8 @@ describe('ReactFabric', () => {
2936

3037
React = require('react');
3138
StrictMode = React.StrictMode;
39+
ReactFeatureFlags = require('shared/ReactFeatureFlags');
40+
ReactFeatureFlags.warnAboutDeprecatedSetNativeProps = true;
3241
ReactFabric = require('react-native-renderer/fabric');
3342
FabricUIManager = require('FabricUIManager');
3443
UIManager = require('UIManager');
@@ -201,10 +210,19 @@ describe('ReactFabric', () => {
201210
);
202211
expect(UIManager.updateView).not.toBeCalled();
203212

204-
viewRef.setNativeProps({});
213+
expect(() => {
214+
viewRef.setNativeProps({});
215+
}).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
216+
withoutStack: true,
217+
});
218+
205219
expect(UIManager.updateView).not.toBeCalled();
206220

207-
viewRef.setNativeProps({foo: 'baz'});
221+
expect(() => {
222+
viewRef.setNativeProps({foo: 'baz'});
223+
}).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
224+
withoutStack: true,
225+
});
208226
expect(UIManager.updateView).toHaveBeenCalledTimes(1);
209227
expect(UIManager.updateView).toHaveBeenCalledWith(
210228
expect.any(Number),

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

+23-3
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,28 @@
1111
'use strict';
1212

1313
let React;
14+
let ReactFeatureFlags;
1415
let StrictMode;
1516
let ReactNative;
1617
let createReactClass;
1718
let createReactNativeComponentClass;
1819
let UIManager;
1920
let NativeMethodsMixin;
2021

22+
const SET_NATIVE_PROPS_DEPRECATION_MESSAGE =
23+
'Warning: Calling ref.setNativeProps(nativeProps) ' +
24+
'is deprecated and will be removed in a future release. ' +
25+
'Use the setNativeProps export from the react-native package instead.' +
26+
"\n\timport {setNativeProps} from 'react-native';\n\tsetNativeProps(ref, nativeProps);\n";
27+
2128
describe('ReactNative', () => {
2229
beforeEach(() => {
2330
jest.resetModules();
2431

2532
React = require('react');
2633
StrictMode = React.StrictMode;
34+
ReactFeatureFlags = require('shared/ReactFeatureFlags');
35+
ReactFeatureFlags.warnAboutDeprecatedSetNativeProps = true;
2736
ReactNative = require('react-native-renderer');
2837
UIManager = require('UIManager');
2938
createReactClass = require('create-react-class/factory')(
@@ -98,7 +107,7 @@ describe('ReactNative', () => {
98107
expect(UIManager.updateView).toHaveBeenCalledTimes(4);
99108
});
100109

101-
it('should not call UIManager.updateView from setNativeProps for properties that have not changed', () => {
110+
it('should not call UIManager.updateView from ref.setNativeProps for properties that have not changed', () => {
102111
const View = createReactNativeComponentClass('RCTView', () => ({
103112
validAttributes: {foo: true},
104113
uiViewClassName: 'RCTView',
@@ -132,10 +141,19 @@ describe('ReactNative', () => {
132141
);
133142
expect(UIManager.updateView).not.toBeCalled();
134143

135-
viewRef.setNativeProps({});
144+
expect(() => {
145+
viewRef.setNativeProps({});
146+
}).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
147+
withoutStack: true,
148+
});
136149
expect(UIManager.updateView).not.toBeCalled();
137150

138-
viewRef.setNativeProps({foo: 'baz'});
151+
expect(() => {
152+
viewRef.setNativeProps({foo: 'baz'});
153+
}).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
154+
withoutStack: true,
155+
});
156+
139157
expect(UIManager.updateView).toHaveBeenCalledTimes(1);
140158
expect(UIManager.updateView).toHaveBeenCalledWith(
141159
expect.any(Number),
@@ -164,7 +182,9 @@ describe('ReactNative', () => {
164182
11,
165183
);
166184

185+
ReactNative.setNativeProps(viewRef, {});
167186
expect(UIManager.updateView).not.toBeCalled();
187+
168188
ReactNative.setNativeProps(viewRef, {foo: 'baz'});
169189
expect(UIManager.updateView).toHaveBeenCalledTimes(1);
170190
expect(UIManager.updateView).toHaveBeenCalledWith(

‎packages/shared/ReactFeatureFlags.js

+4
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,7 @@ export const disableInputAttributeSyncing = false;
5151
export const enableStableConcurrentModeAPIs = false;
5252

5353
export const warnAboutShorthandPropertyCollision = false;
54+
55+
// See https://github.com/react-native-community/discussions-and-proposals/issues/72 for more information
56+
// This is a flag so we can fix warnings in RN core before turning it on
57+
export const warnAboutDeprecatedSetNativeProps = false;

‎packages/shared/forks/ReactFeatureFlags.native-fb.js

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = true;
2727
export const disableInputAttributeSyncing = false;
2828
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
2929
export const warnAboutDeprecatedLifecycles = true;
30+
export const warnAboutDeprecatedSetNativeProps = true;
3031

3132
// Only used in www builds.
3233
export function addUserTimingListener() {

‎packages/shared/forks/ReactFeatureFlags.native-oss.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const disableInputAttributeSyncing = false;
2424
export const enableStableConcurrentModeAPIs = false;
2525
export const warnAboutShorthandPropertyCollision = false;
2626
export const enableSchedulerDebugging = false;
27+
export const warnAboutDeprecatedSetNativeProps = false;
2728

2829
// Only used in www builds.
2930
export function addUserTimingListener() {

‎packages/shared/forks/ReactFeatureFlags.persistent.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const disableInputAttributeSyncing = false;
2424
export const enableStableConcurrentModeAPIs = false;
2525
export const warnAboutShorthandPropertyCollision = false;
2626
export const enableSchedulerDebugging = false;
27+
export const warnAboutDeprecatedSetNativeProps = false;
2728

2829
// Only used in www builds.
2930
export function addUserTimingListener() {

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const disableInputAttributeSyncing = false;
2424
export const enableStableConcurrentModeAPIs = false;
2525
export const warnAboutShorthandPropertyCollision = false;
2626
export const enableSchedulerDebugging = false;
27+
export const warnAboutDeprecatedSetNativeProps = false;
2728

2829
// Only used in www builds.
2930
export function addUserTimingListener() {

‎packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const enableSchedulerTracing = false;
2222
export const enableSuspenseServerRenderer = false;
2323
export const enableStableConcurrentModeAPIs = false;
2424
export const enableSchedulerDebugging = false;
25+
export const warnAboutDeprecatedSetNativeProps = false;
2526

2627
// Only used in www builds.
2728
export function addUserTimingListener() {

‎packages/shared/forks/ReactFeatureFlags.www.js

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const {
1818
warnAboutDeprecatedLifecycles,
1919
disableInputAttributeSyncing,
2020
warnAboutShorthandPropertyCollision,
21+
warnAboutDeprecatedSetNativeProps,
2122
} = require('ReactFeatureFlags');
2223

2324
// In www, we have experimental support for gathering data

0 commit comments

Comments
 (0)