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
Eli White committed
Feb 25, 2019 at 15:00 UTC
870214f37ad63333e750f31ef0cc0bde5793aee5
13 files changed
+105
-5
packages/react-native-renderer/src/NativeMethodsMixin.js
+14
@@ -27,6 +27,9 @@ import {
27
warnForStyleProps,
28
} from './NativeMethodsMixinUtils';
29
30
+import warningWithoutStack from 'shared/warningWithoutStack';
31
+import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
32
+
33
export default function(
34
findNodeHandle: any => ?number,
35
findHostInstance: any => any,
@@ -121,6 +124,17 @@ export default function(
124
* Manipulation](docs/direct-manipulation.html)).
125
*/
126
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
+ }
138
// Class components don't have viewConfig -> validateAttributes.
139
// Nor does it make sense to set native props on a non-native component.
140
// Instead, find the nearest host component and set props on it.
packages/react-native-renderer/src/ReactFabricHostConfig.js
+11
@@ -30,6 +30,8 @@ import {get as getViewConfigForType} from 'ReactNativeViewConfigRegistry';
30
31
import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
32
import invariant from 'shared/invariant';
33
+import warningWithoutStack from 'shared/warningWithoutStack';
34
+import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
35
36
import {dispatchEvent} from './ReactFabricEventEmitter';
37
@@ -140,6 +142,15 @@ class ReactFabricHostComponent {
142
143
setNativeProps(nativeProps: Object) {
144
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
+ }
154
warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
155
}
156
packages/react-native-renderer/src/ReactNativeComponent.js
+15
@@ -24,6 +24,9 @@ import UIManager from 'UIManager';
24
import {create} from './ReactNativeAttributePayload';
25
import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
26
27
+import warningWithoutStack from 'shared/warningWithoutStack';
28
+import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
29
+
30
export default function(
31
findNodeHandle: any => ?number,
32
findHostInstance: any => any,
@@ -132,6 +135,18 @@ export default function(
135
* Manipulation](docs/direct-manipulation.html)).
136
*/
137
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
+
150
// Class components don't have viewConfig -> validateAttributes.
151
// Nor does it make sense to set native props on a non-native component.
152
// Instead, find the nearest host component and set props on it.
packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+12
@@ -26,6 +26,9 @@ import {
26
warnForStyleProps,
27
} from './NativeMethodsMixinUtils';
28
29
+import warningWithoutStack from 'shared/warningWithoutStack';
30
+import {warnAboutDeprecatedSetNativeProps} from 'shared/ReactFeatureFlags';
31
+
32
/**
33
* This component defines the same methods as NativeMethodsMixin but without the
34
* findNodeHandle wrapper. This wrapper is unnecessary for HostComponent views
@@ -81,6 +84,15 @@ class ReactNativeFiberHostComponent {
84
85
setNativeProps(nativeProps: Object) {
86
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
+ }
96
warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
97
}
98
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+20
-2
@@ -12,6 +12,7 @@
12
13
let React;
14
let ReactFabric;
15
+let ReactFeatureFlags;
16
let createReactClass;
17
let createReactNativeComponentClass;
18
let UIManager;
@@ -19,6 +20,12 @@ let FabricUIManager;
20
let StrictMode;
21
let NativeMethodsMixin;
22
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
+
29
jest.mock('shared/ReactFeatureFlags', () =>
30
require('shared/forks/ReactFeatureFlags.native-oss'),
31
);
@@ -29,6 +36,8 @@ describe('ReactFabric', () => {
36
37
React = require('react');
38
StrictMode = React.StrictMode;
39
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
40
+ ReactFeatureFlags.warnAboutDeprecatedSetNativeProps = true;
41
ReactFabric = require('react-native-renderer/fabric');
42
FabricUIManager = require('FabricUIManager');
43
UIManager = require('UIManager');
@@ -201,10 +210,19 @@ describe('ReactFabric', () => {
210
);
211
expect(UIManager.updateView).not.toBeCalled();
212
204
- viewRef.setNativeProps({});
213
+ expect(() => {
214
+ viewRef.setNativeProps({});
215
+ }).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
216
+ withoutStack: true,
217
+ });
218
+
219
expect(UIManager.updateView).not.toBeCalled();
220
207
- viewRef.setNativeProps({foo: 'baz'});
221
+ expect(() => {
222
+ viewRef.setNativeProps({foo: 'baz'});
223
+ }).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
224
+ withoutStack: true,
225
+ });
226
expect(UIManager.updateView).toHaveBeenCalledTimes(1);
227
expect(UIManager.updateView).toHaveBeenCalledWith(
228
expect.any(Number),
packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+23
-3
@@ -11,6 +11,7 @@
11
'use strict';
12
13
let React;
14
+let ReactFeatureFlags;
15
let StrictMode;
16
let ReactNative;
17
let createReactClass;
@@ -18,12 +19,20 @@ let createReactNativeComponentClass;
19
let UIManager;
20
let NativeMethodsMixin;
21
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
+
28
describe('ReactNative', () => {
29
beforeEach(() => {
30
jest.resetModules();
31
32
React = require('react');
33
StrictMode = React.StrictMode;
34
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
35
+ ReactFeatureFlags.warnAboutDeprecatedSetNativeProps = true;
36
ReactNative = require('react-native-renderer');
37
UIManager = require('UIManager');
38
createReactClass = require('create-react-class/factory')(
@@ -98,7 +107,7 @@ describe('ReactNative', () => {
107
expect(UIManager.updateView).toHaveBeenCalledTimes(4);
108
});
109
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', () => {
111
const View = createReactNativeComponentClass('RCTView', () => ({
112
validAttributes: {foo: true},
113
uiViewClassName: 'RCTView',
@@ -132,10 +141,19 @@ describe('ReactNative', () => {
141
);
142
expect(UIManager.updateView).not.toBeCalled();
143
135
- viewRef.setNativeProps({});
144
+ expect(() => {
145
+ viewRef.setNativeProps({});
146
+ }).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
147
+ withoutStack: true,
148
+ });
149
expect(UIManager.updateView).not.toBeCalled();
150
138
- viewRef.setNativeProps({foo: 'baz'});
151
+ expect(() => {
152
+ viewRef.setNativeProps({foo: 'baz'});
153
+ }).toWarnDev([SET_NATIVE_PROPS_DEPRECATION_MESSAGE], {
154
+ withoutStack: true,
155
+ });
156
+
157
expect(UIManager.updateView).toHaveBeenCalledTimes(1);
158
expect(UIManager.updateView).toHaveBeenCalledWith(
159
expect.any(Number),
@@ -164,7 +182,9 @@ describe('ReactNative', () => {
182
11,
183
);
184
185
+ ReactNative.setNativeProps(viewRef, {});
186
expect(UIManager.updateView).not.toBeCalled();
187
+
188
ReactNative.setNativeProps(viewRef, {foo: 'baz'});
189
expect(UIManager.updateView).toHaveBeenCalledTimes(1);
190
expect(UIManager.updateView).toHaveBeenCalledWith(
packages/shared/ReactFeatureFlags.js
+4
@@ -51,3 +51,7 @@ export const disableInputAttributeSyncing = false;
51
export const enableStableConcurrentModeAPIs = false;
52
53
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
@@ -27,6 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = true;
27
export const disableInputAttributeSyncing = false;
28
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
29
export const warnAboutDeprecatedLifecycles = true;
30
+export const warnAboutDeprecatedSetNativeProps = true;
31
32
// Only used in www builds.
33
export function addUserTimingListener() {
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -24,6 +24,7 @@ export const disableInputAttributeSyncing = false;
24
export const enableStableConcurrentModeAPIs = false;
25
export const warnAboutShorthandPropertyCollision = false;
26
export const enableSchedulerDebugging = false;
27
+export const warnAboutDeprecatedSetNativeProps = false;
28
29
// Only used in www builds.
30
export function addUserTimingListener() {
packages/shared/forks/ReactFeatureFlags.persistent.js
+1
@@ -24,6 +24,7 @@ export const disableInputAttributeSyncing = false;
24
export const enableStableConcurrentModeAPIs = false;
25
export const warnAboutShorthandPropertyCollision = false;
26
export const enableSchedulerDebugging = false;
27
+export const warnAboutDeprecatedSetNativeProps = false;
28
29
// Only used in www builds.
30
export function addUserTimingListener() {
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -24,6 +24,7 @@ export const disableInputAttributeSyncing = false;
24
export const enableStableConcurrentModeAPIs = false;
25
export const warnAboutShorthandPropertyCollision = false;
26
export const enableSchedulerDebugging = false;
27
+export const warnAboutDeprecatedSetNativeProps = false;
28
29
// Only used in www builds.
30
export function addUserTimingListener() {
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -22,6 +22,7 @@ export const enableSchedulerTracing = false;
22
export const enableSuspenseServerRenderer = false;
23
export const enableStableConcurrentModeAPIs = false;
24
export const enableSchedulerDebugging = false;
25
+export const warnAboutDeprecatedSetNativeProps = false;
26
27
// Only used in www builds.
28
export function addUserTimingListener() {
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -18,6 +18,7 @@ export const {
18
warnAboutDeprecatedLifecycles,
19
disableInputAttributeSyncing,
20
warnAboutShorthandPropertyCollision,
21
+ warnAboutDeprecatedSetNativeProps,
22
} = require('ReactFeatureFlags');
23
24
// In www, we have experimental support for gathering data