Show a soft error when a text string or number is supplied as a child to non text wrappers (#21953)
* Show soft errors when a text string or number is supplied as a child instead of throwing an error * bring __DEV__ check first so that things inside get removed in prod. * fix lint
Sota committed
Aug 10, 2021 at 13:14 UTC
e9b2028b3280c15138bd92b0d27ffa066de3d5ca
4 files changed
+18
-19
packages/react-native-renderer/src/ReactFabricHostConfig.js
+5
-6
@@ -22,8 +22,6 @@ import type {
22
import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
23
import {create, diff} from './ReactNativeAttributePayload';
24
25
-import invariant from 'shared/invariant';
26
-
25
import {dispatchEvent} from './ReactFabricEventEmitter';
26
27
import {
@@ -264,10 +262,11 @@ export function createTextInstance(
262
hostContext: HostContext,
263
internalInstanceHandle: Object,
264
): TextInstance {
267
- invariant(
268
- hostContext.isInAParentText,
269
- 'Text strings must be rendered within a <Text> component.',
270
- );
265
+ if (__DEV__) {
266
+ if (!hostContext.isInAParentText) {
267
+ console.error('Text strings must be rendered within a <Text> component.');
268
+ }
269
+ }
270
271
const tag = nextReactTag;
272
nextReactTag += 2;
packages/react-native-renderer/src/ReactNativeHostConfig.js
+5
-5
@@ -147,11 +147,11 @@ export function createTextInstance(
147
hostContext: HostContext,
148
internalInstanceHandle: Object,
149
): TextInstance {
150
- invariant(
151
- hostContext.isInAParentText,
152
- 'Text strings must be rendered within a <Text> component.',
153
- );
154
-
150
+ if (__DEV__) {
151
+ if (!hostContext.isInAParentText) {
152
+ console.error('Text strings must be rendered within a <Text> component.');
153
+ }
154
+ }
155
const tag = allocateTag();
156
157
UIManager.createView(
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+3
-3
@@ -524,7 +524,7 @@ describe('ReactFabric', () => {
524
});
525
});
526
527
- it('should throw for text not inside of a <Text> ancestor', () => {
527
+ it('should console error for text not inside of a <Text> ancestor', () => {
528
const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
529
validAttributes: {},
530
uiViewClassName: 'RCTScrollView',
@@ -542,7 +542,7 @@ describe('ReactFabric', () => {
542
act(() => {
543
ReactFabric.render(<View>this should warn</View>, 11);
544
});
545
- }).toThrow('Text strings must be rendered within a <Text> component.');
545
+ }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
546
547
expect(() => {
548
act(() => {
@@ -553,7 +553,7 @@ describe('ReactFabric', () => {
553
11,
554
);
555
});
556
- }).toThrow('Text strings must be rendered within a <Text> component.');
556
+ }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
557
});
558
559
it('should not throw for text inside of an indirect <Text> ancestor', () => {
packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+5
-5
@@ -473,7 +473,7 @@ describe('ReactNative', () => {
473
);
474
});
475
476
- it('should throw for text not inside of a <Text> ancestor', () => {
476
+ it('should console error for text not inside of a <Text> ancestor', () => {
477
const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
478
validAttributes: {},
479
uiViewClassName: 'RCTScrollView',
@@ -487,9 +487,9 @@ describe('ReactNative', () => {
487
uiViewClassName: 'RCTView',
488
}));
489
490
- expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
491
- 'Text strings must be rendered within a <Text> component.',
492
- );
490
+ expect(() =>
491
+ ReactNative.render(<View>this should warn</View>, 11),
492
+ ).toErrorDev(['Text strings must be rendered within a <Text> component.']);
493
494
expect(() =>
495
ReactNative.render(
@@ -498,7 +498,7 @@ describe('ReactNative', () => {
498
</Text>,
499
11,
500
),
501
- ).toThrow('Text strings must be rendered within a <Text> component.');
501
+ ).toErrorDev(['Text strings must be rendered within a <Text> component.']);
502
});
503
504
it('should not throw for text inside of an indirect <Text> ancestor', () => {