Allow third party react-native components to render strings

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -7,8 +7,9 @@
  * @flow
  */
 
-import * as Scheduler from 'scheduler';
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
 
+import * as Scheduler from 'scheduler';
 import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';
 import {
   createElement,
@@ -148,9 +149,10 @@ export function getRootHostContext(
 
 export function getChildHostContext(
   parentHostContext: HostContext,
-  type: string,
+  fiber: Fiber,
   rootContainerInstance: Container,
 ): HostContext {
+  const type = fiber.type;
   if (__DEV__) {
     const parentHostContextDev = ((parentHostContext: any): HostContextDev);
     const namespace = getChildNamespace(parentHostContextDev.namespace, type);

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

@@ -15,6 +15,8 @@ import type {
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
 
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+
 import {
   mountSafeCallback_NOT_REALLY_SAFE,
   warnForStyleProps,
@@ -264,16 +266,18 @@ export function getRootHostContext(
 
 export function getChildHostContext(
   parentHostContext: HostContext,
-  type: string,
+  fiber: Fiber,
   rootContainerInstance: Container,
 ): HostContext {
+  const type = fiber.type;
   const prevIsInAParentText = parentHostContext.isInAParentText;
   const isInAParentText =
     type === 'AndroidTextInput' || // Android
     type === 'RCTMultilineTextInputView' || // iOS
     type === 'RCTSinglelineTextInputView' || // iOS
     type === 'RCTText' ||
-    type === 'RCTVirtualText';
+    type === 'RCTVirtualText' ||
+    !!(fiber.return && fiber.return.type && fiber.return.type.canRenderString);
 
   if (prevIsInAParentText !== isInAParentText) {
     return {isInAParentText};

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

@@ -8,6 +8,7 @@
  */
 
 import type {ReactNativeBaseComponentViewConfig} from './ReactNativeTypes';
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
 
 import invariant from 'shared/invariant';
 
@@ -187,16 +188,18 @@ export function getRootHostContext(
 
 export function getChildHostContext(
   parentHostContext: HostContext,
-  type: string,
+  fiber: Fiber,
   rootContainerInstance: Container,
 ): HostContext {
+  const type = fiber.type;
   const prevIsInAParentText = parentHostContext.isInAParentText;
   const isInAParentText =
     type === 'AndroidTextInput' || // Android
     type === 'RCTMultilineTextInputView' || // iOS
     type === 'RCTSinglelineTextInputView' || // iOS
     type === 'RCTText' ||
-    type === 'RCTVirtualText';
+    type === 'RCTVirtualText' ||
+    !!(fiber.return && fiber.return.type && fiber.return.type.canRenderString);
 
   if (prevIsInAParentText !== isInAParentText) {
     return {isInAParentText};

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

@@ -518,6 +518,33 @@ describe('ReactFabric', () => {
     );
   });
 
+  it('should not throw for text inside of a component that has static property "canRenderString" set', () => {
+    const ICanRenderString = createReactNativeComponentClass(
+      'ICanRenderString',
+      () => ({
+        validAttributes: {},
+        uiViewClassName: 'ICanRenderString',
+      }),
+    );
+
+    class Text extends React.Component {
+      static canRenderString = true;
+
+      render() {
+        return <ICanRenderString {...this.props} />;
+      }
+    }
+
+    const Indirection = () => 'Hi';
+
+    ReactFabric.render(
+      <Text>
+        <Indirection />
+      </Text>,
+      11,
+    );
+  });
+
   it('dispatches events to the last committed props', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {},

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

@@ -387,6 +387,33 @@ describe('ReactNative', () => {
     );
   });
 
+  it('should not throw for text inside of a component that has static property "canRenderString" set', () => {
+    const ICanRenderString = createReactNativeComponentClass(
+      'ICanRenderString',
+      () => ({
+        validAttributes: {},
+        uiViewClassName: 'ICanRenderString',
+      }),
+    );
+
+    class Text extends React.Component {
+      static canRenderString = true;
+
+      render() {
+        return <ICanRenderString {...this.props} />;
+      }
+    }
+
+    const Indirection = () => 'Hi';
+
+    ReactNative.render(
+      <Text>
+        <Indirection />
+      </Text>,
+      11,
+    );
+  });
+
   it('findNodeHandle should warn if used to find a host component inside StrictMode', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},

packages/react-noop-renderer/src/createReactNoop.js

@@ -240,10 +240,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     getChildHostContext(
       parentHostContext: HostContext,
-      type: string,
+      fiber: Fiber,
       rootcontainerInstance: Container,
     ) {
-      if (type === 'uppercase') {
+      if (fiber.type === 'uppercase') {
         return UPPERCASE_CONTEXT;
       }
       return NO_CONTEXT;

packages/react-reconciler/src/ReactFiberHostContext.js

@@ -79,7 +79,7 @@ function pushHostContext(fiber: Fiber): void {
     rootInstanceStackCursor.current,
   );
   const context: HostContext = requiredContext(contextStackCursor.current);
-  const nextContext = getChildHostContext(context, fiber.type, rootInstance);
+  const nextContext = getChildHostContext(context, fiber, rootInstance);
 
   // Don't push this Fiber's context unless it's unique.
   if (context === nextContext) {

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+
 import warning from 'shared/warning';
 
 export type Type = string;
@@ -109,7 +111,7 @@ export function getRootHostContext(
 
 export function getChildHostContext(
   parentHostContext: HostContext,
-  type: string,
+  fiber: Fiber,
   rootContainerInstance: Container,
 ): HostContext {
   return NO_CONTEXT;