{"commit":{"authoredAt":"2018-05-14T15:34:01-07:00","subject":"Use HostContext to warn about invalid View\/Text nesting (#12766)","authorName":"Brian Vaughn","shortRevision":"c802d29bd1","authorEmail":"brian.david.vaughn@gmail.com","revision":"c802d29bd16753aef15863db8fb3f338c0067c75"},"body":"","files":[{"path":"packages\/react-native-renderer\/src\/ReactFabricRenderer.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeFiberRenderer.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabricAndNative-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactNativeMount-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactFabric-test.internal.js.snap","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactNativeMount-test.internal.js.snap","status":"M"}],"patch":"diff --git a\/packages\/react-native-renderer\/src\/ReactFabricRenderer.js b\/packages\/react-native-renderer\/src\/ReactFabricRenderer.js\nindex fa2fabef64..9c597c2e53 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricRenderer.js\n@@ -22,7 +22,7 @@ import * as ReactNativeViewConfigRegistry from 'ReactNativeViewConfigRegistry';\n import ReactFiberReconciler from 'react-reconciler';\n \n import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';\n-import emptyObject from 'fbjs\/lib\/emptyObject';\n+import invariant from 'fbjs\/lib\/invariant';\n \n \/\/ Modules provided by RN:\n import TextInputState from 'TextInputState';\n@@ -35,6 +35,10 @@ import UIManager from 'UIManager';\n \/\/ This means that they never overlap.\n let nextReactTag = 2;\n \n+type HostContext = $ReadOnly<{|\n+ isInAParentText: boolean,\n+|}>;\n+\n \/**\n * This is used for refs on host components.\n *\/\n@@ -135,7 +139,7 @@ const ReactFabricRenderer = ReactFiberReconciler({\n type: string,\n props: Props,\n rootContainerInstance: Container,\n- hostContext: {},\n+ hostContext: HostContext,\n internalInstanceHandle: Object,\n ): Instance {\n const tag = nextReactTag;\n@@ -151,6 +155,11 @@ const ReactFabricRenderer = ReactFiberReconciler({\n }\n }\n \n+ invariant(\n+ type !== 'RCTView' || !hostContext.isInAParentText,\n+ 'Nesting of within is not currently supported.',\n+ );\n+\n const updatePayload = ReactNativeAttributePayload.create(\n props,\n viewConfig.validAttributes,\n@@ -175,9 +184,14 @@ const ReactFabricRenderer = ReactFiberReconciler({\n createTextInstance(\n text: string,\n rootContainerInstance: Container,\n- hostContext: {},\n+ hostContext: HostContext,\n internalInstanceHandle: Object,\n ): TextInstance {\n+ invariant(\n+ hostContext.isInAParentText,\n+ 'Text strings must be rendered within a component.',\n+ );\n+\n const tag = nextReactTag;\n nextReactTag += 2;\n \n@@ -203,12 +217,27 @@ const ReactFabricRenderer = ReactFiberReconciler({\n return false;\n },\n \n- getRootHostContext(): {} {\n- return emptyObject;\n+ getRootHostContext(rootContainerInstance: Container): HostContext {\n+ return {isInAParentText: false};\n },\n \n- getChildHostContext(): {} {\n- return emptyObject;\n+ getChildHostContext(\n+ parentHostContext: HostContext,\n+ type: string,\n+ ): HostContext {\n+ const prevIsInAParentText = parentHostContext.isInAParentText;\n+ const isInAParentText =\n+ type === 'AndroidTextInput' || \/\/ Android\n+ type === 'RCTMultilineTextInputView' || \/\/ iOS\n+ type === 'RCTSinglelineTextInputView' || \/\/ iOS\n+ type === 'RCTText' ||\n+ type === 'RCTVirtualText';\n+\n+ if (prevIsInAParentText !== isInAParentText) {\n+ return {isInAParentText};\n+ } else {\n+ return parentHostContext;\n+ }\n },\n \n getPublicInstance(instance) {\n@@ -230,7 +259,7 @@ const ReactFabricRenderer = ReactFiberReconciler({\n oldProps: Props,\n newProps: Props,\n rootContainerInstance: Container,\n- hostContext: {},\n+ hostContext: HostContext,\n ): null | Object {\n const viewConfig = instance.canonical.viewConfig;\n const updatePayload = ReactNativeAttributePayload.diff(\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeFiberRenderer.js b\/packages\/react-native-renderer\/src\/ReactNativeFiberRenderer.js\nindex 2854f6488f..01fe4816b4 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeFiberRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeFiberRenderer.js\n@@ -12,6 +12,7 @@ import type {ReactNativeBaseComponentViewConfig} from '.\/ReactNativeTypes';\n import ReactFiberReconciler from 'react-reconciler';\n import emptyObject from 'fbjs\/lib\/emptyObject';\n import invariant from 'fbjs\/lib\/invariant';\n+\n \/\/ Modules provided by RN:\n import UIManager from 'UIManager';\n import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';\n@@ -35,6 +36,10 @@ export type Instance = {\n type Props = Object;\n type TextInstance = number;\n \n+type HostContext = $ReadOnly<{|\n+ isInAParentText: boolean,\n+|}>;\n+\n \/\/ Counter for uniquely identifying views.\n \/\/ % 10 === 1 means it is a rootTag.\n \/\/ % 2 === 0 means it is a Fabric tag.\n@@ -71,7 +76,7 @@ const NativeRenderer = ReactFiberReconciler({\n type: string,\n props: Props,\n rootContainerInstance: Container,\n- hostContext: {},\n+ hostContext: HostContext,\n internalInstanceHandle: Object,\n ): Instance {\n const tag = allocateTag();\n@@ -85,6 +90,11 @@ const NativeRenderer = ReactFiberReconciler({\n }\n }\n \n+ invariant(\n+ type !== 'RCTView' || !hostContext.isInAParentText,\n+ 'Nesting of within is not currently supported.',\n+ );\n+\n const updatePayload = ReactNativeAttributePayload.create(\n props,\n viewConfig.validAttributes,\n@@ -110,9 +120,14 @@ const NativeRenderer = ReactFiberReconciler({\n createTextInstance(\n text: string,\n rootContainerInstance: Container,\n- hostContext: {},\n+ hostContext: HostContext,\n internalInstanceHandle: Object,\n ): TextInstance {\n+ invariant(\n+ hostContext.isInAParentText,\n+ 'Text strings must be rendered within a component.',\n+ );\n+\n const tag = allocateTag();\n \n UIManager.createView(\n@@ -155,12 +170,27 @@ const NativeRenderer = ReactFiberReconciler({\n return false;\n },\n \n- getRootHostContext(): {} {\n- return emptyObject;\n+ getRootHostContext(rootContainerInstance: Container): HostContext {\n+ return {isInAParentText: false};\n },\n \n- getChildHostContext(): {} {\n- return emptyObject;\n+ getChildHostContext(\n+ parentHostContext: HostContext,\n+ type: string,\n+ ): HostContext {\n+ const prevIsInAParentText = parentHostContext.isInAParentText;\n+ const isInAParentText =\n+ type === 'AndroidTextInput' || \/\/ Android\n+ type === 'RCTMultilineTextInputView' || \/\/ iOS\n+ type === 'RCTSinglelineTextInputView' || \/\/ iOS\n+ type === 'RCTText' ||\n+ type === 'RCTVirtualText';\n+\n+ if (prevIsInAParentText !== isInAParentText) {\n+ return {isInAParentText};\n+ } else {\n+ return parentHostContext;\n+ }\n },\n \n getPublicInstance(instance) {\n@@ -181,7 +211,7 @@ const NativeRenderer = ReactFiberReconciler({\n oldProps: Props,\n newProps: Props,\n rootContainerInstance: Container,\n- hostContext: {},\n+ hostContext: HostContext,\n ): null | Object {\n return emptyObject;\n },\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\nindex a1741f7dc4..cc697f4ddb 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n@@ -33,9 +33,9 @@ describe('ReactFabric', () => {\n });\n \n it('should be able to create and render a native component', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n ReactFabric.render(, 1);\n@@ -45,9 +45,9 @@ describe('ReactFabric', () => {\n });\n \n it('should be able to create and update a native component', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n const firstNode = {};\n@@ -67,9 +67,9 @@ describe('ReactFabric', () => {\n });\n \n it('should not call FabricUIManager.cloneNode after render for properties that have not changed', () => {\n- const Text = createReactNativeComponentClass('Text', () => ({\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'Text',\n+ uiViewClassName: 'RCTText',\n }));\n \n ReactFabric.render(1<\/Text>, 11);\n@@ -110,15 +110,15 @@ describe('ReactFabric', () => {\n });\n \n it('should only pass props diffs to FabricUIManager.cloneNode', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n validAttributes: {foo: true, bar: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTText',\n }));\n \n ReactFabric.render(\n- \n+ \n 1\n- <\/View>,\n+ <\/Text>,\n 11,\n );\n expect(FabricUIManager.cloneNode).not.toBeCalled();\n@@ -127,9 +127,9 @@ describe('ReactFabric', () => {\n expect(FabricUIManager.cloneNodeWithNewChildrenAndProps).not.toBeCalled();\n \n ReactFabric.render(\n- \n+ \n 1\n- <\/View>,\n+ <\/Text>,\n 11,\n );\n expect(FabricUIManager.cloneNodeWithNewProps.mock.calls[0][1]).toEqual({\n@@ -138,9 +138,9 @@ describe('ReactFabric', () => {\n expect(FabricUIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();\n \n ReactFabric.render(\n- \n+ \n 2\n- <\/View>,\n+ <\/Text>,\n 11,\n );\n expect(\n@@ -152,9 +152,9 @@ describe('ReactFabric', () => {\n });\n \n it('should not call UIManager.updateView from setNativeProps for properties that have not changed', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n class Subclass extends ReactFabric.NativeComponent {\n@@ -187,9 +187,9 @@ describe('ReactFabric', () => {\n });\n \n it('returns the correct instance and calls it in the callback', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n let a;\n@@ -208,9 +208,9 @@ describe('ReactFabric', () => {\n });\n \n it('renders and reorders children', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {title: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n class Component extends React.Component {\n@@ -249,9 +249,9 @@ describe('ReactFabric', () => {\n });\n \n it('should call complete after inserting children', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n const snapshots = [];\n@@ -272,4 +272,80 @@ describe('ReactFabric', () => {\n );\n expect(snapshots).toMatchSnapshot();\n });\n+\n+ it('should throw when is used inside of a ancestor', () => {\n+ const Image = createReactNativeComponentClass('RCTImage', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTImage',\n+ }));\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTText',\n+ }));\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ expect(() =>\n+ ReactFabric.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ ),\n+ ).toThrow('Nesting of within is not currently supported.');\n+\n+ \/\/ Non-View things (e.g. Image) are fine\n+ ReactFabric.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n+\n+ it('should throw for text not inside of a ancestor', () => {\n+ const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTScrollView',\n+ }));\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTText',\n+ }));\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ expect(() => ReactFabric.render(this should warn<\/View>, 11)).toThrow(\n+ 'Text strings must be rendered within a component.',\n+ );\n+\n+ expect(() =>\n+ ReactFabric.render(\n+ \n+ hi hello hi<\/ScrollView>\n+ <\/Text>,\n+ 11,\n+ ),\n+ ).toThrow('Text strings must be rendered within a component.');\n+ });\n+\n+ it('should not throw for text inside of an indirect ancestor', () => {\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTText',\n+ }));\n+\n+ const Indirection = () => 'Hi';\n+\n+ ReactFabric.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n });\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricAndNative-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricAndNative-test.internal.js\nindex a78dd5d228..faaa82f3ef 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricAndNative-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricAndNative-test.internal.js\n@@ -31,9 +31,9 @@ describe('ReactFabric', () => {\n });\n \n it('find Fabric nodes with the RN renderer', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {title: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n let ref = React.createRef();\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js\nindex 07fbe1692a..13fce4d77d 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js\n@@ -153,7 +153,7 @@ it('handles events', () => {\n it('handles events on text nodes', () => {\n expect(RCTEventEmitter.register.mock.calls.length).toBe(1);\n const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];\n- const Text = fakeRequireNativeComponent('Text', {});\n+ const Text = fakeRequireNativeComponent('RCTText', {});\n \n class ContextHack extends React.Component {\n static childContextTypes = {isInAParentText: PropTypes.bool};\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeMount-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeMount-test.internal.js\nindex f93a369d87..60b5d79f5d 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeMount-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeMount-test.internal.js\n@@ -27,9 +27,9 @@ describe('ReactNative', () => {\n });\n \n it('should be able to create and render a native component', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n ReactNative.render(, 1);\n@@ -40,9 +40,9 @@ describe('ReactNative', () => {\n });\n \n it('should be able to create and update a native component', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n ReactNative.render(, 11);\n@@ -57,13 +57,13 @@ describe('ReactNative', () => {\n expect(UIManager.createView.mock.calls.length).toBe(1);\n expect(UIManager.setChildren.mock.calls.length).toBe(1);\n expect(UIManager.manageChildren).not.toBeCalled();\n- expect(UIManager.updateView).toBeCalledWith(3, 'View', {foo: 'bar'});\n+ expect(UIManager.updateView).toBeCalledWith(3, 'RCTView', {foo: 'bar'});\n });\n \n it('should not call UIManager.updateView after render for properties that have not changed', () => {\n- const Text = createReactNativeComponentClass('Text', () => ({\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'Text',\n+ uiViewClassName: 'RCTText',\n }));\n \n ReactNative.render(1<\/Text>, 11);\n@@ -87,9 +87,9 @@ describe('ReactNative', () => {\n });\n \n it('should not call UIManager.updateView from setNativeProps for properties that have not changed', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n class Subclass extends ReactNative.NativeComponent {\n@@ -122,9 +122,9 @@ describe('ReactNative', () => {\n });\n \n it('returns the correct instance and calls it in the callback', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n let a;\n@@ -143,9 +143,9 @@ describe('ReactNative', () => {\n });\n \n it('renders and reorders children', () => {\n- const View = createReactNativeComponentClass('View', () => ({\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {title: true},\n- uiViewClassName: 'View',\n+ uiViewClassName: 'RCTView',\n }));\n \n class Component extends React.Component {\n@@ -182,4 +182,80 @@ describe('ReactNative', () => {\n ReactNative.render(, 11);\n expect(mockArgs.length).toEqual(0);\n });\n+\n+ it('should throw when is used inside of a ancestor', () => {\n+ const Image = createReactNativeComponentClass('RCTImage', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTImage',\n+ }));\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTText',\n+ }));\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ expect(() =>\n+ ReactNative.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ ),\n+ ).toThrow('Nesting of within is not currently supported.');\n+\n+ \/\/ Non-View things (e.g. Image) are fine\n+ ReactNative.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n+\n+ it('should throw for text not inside of a ancestor', () => {\n+ const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTScrollView',\n+ }));\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTText',\n+ }));\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTView',\n+ }));\n+\n+ expect(() => ReactNative.render(this should warn<\/View>, 11)).toThrow(\n+ 'Text strings must be rendered within a component.',\n+ );\n+\n+ expect(() =>\n+ ReactNative.render(\n+ \n+ hi hello hi<\/ScrollView>\n+ <\/Text>,\n+ 11,\n+ ),\n+ ).toThrow('Text strings must be rendered within a component.');\n+ });\n+\n+ it('should not throw for text inside of an indirect ancestor', () => {\n+ const Text = createReactNativeComponentClass('RCTText', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTText',\n+ }));\n+\n+ const Indirection = () => 'Hi';\n+\n+ ReactNative.render(\n+ \n+ \n+ <\/Text>,\n+ 11,\n+ );\n+ });\n });\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactFabric-test.internal.js.snap b\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactFabric-test.internal.js.snap\nindex 6e190e635d..4a0f4d8cf5 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactFabric-test.internal.js.snap\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactFabric-test.internal.js.snap\n@@ -2,69 +2,69 @@\n \n exports[`ReactFabric renders and reorders children 1`] = `\n \"11\n- View null\n- View {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"b\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"d\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"j\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"n\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"q\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"t\\\\\"}\"\n+ RCTView null\n+ RCTView {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"b\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"d\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"j\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"n\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"q\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"t\\\\\"}\"\n `;\n \n exports[`ReactFabric renders and reorders children 2`] = `\n \"11\n- View null\n- View {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"x\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"w\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"v\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"t\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"z\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"y\\\\\"}\"\n+ RCTView null\n+ RCTView {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"x\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"w\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"v\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"t\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"z\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"y\\\\\"}\"\n `;\n \n exports[`ReactFabric should call complete after inserting children 1`] = `\n Array [\n- \"View {\\\\\"foo\\\\\":\\\\\"a\\\\\"}\n- View {\\\\\"foo\\\\\":\\\\\"b\\\\\"}\",\n+ \"RCTView {\\\\\"foo\\\\\":\\\\\"a\\\\\"}\n+ RCTView {\\\\\"foo\\\\\":\\\\\"b\\\\\"}\",\n ]\n `;\n \n exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 1`] = `\n \"11\n- View {\\\\\"foo\\\\\":\\\\\"a\\\\\",\\\\\"bar\\\\\":\\\\\"b\\\\\"}\n+ RCTText {\\\\\"foo\\\\\":\\\\\"a\\\\\",\\\\\"bar\\\\\":\\\\\"b\\\\\"}\n RCTRawText {\\\\\"text\\\\\":\\\\\"1\\\\\"}\"\n `;\n \n exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 2`] = `\n \"11\n- View {\\\\\"foo\\\\\":\\\\\"b\\\\\",\\\\\"bar\\\\\":\\\\\"b\\\\\"}\n+ RCTText {\\\\\"foo\\\\\":\\\\\"b\\\\\",\\\\\"bar\\\\\":\\\\\"b\\\\\"}\n RCTRawText {\\\\\"text\\\\\":\\\\\"2\\\\\"}\"\n `;\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactNativeMount-test.internal.js.snap b\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactNativeMount-test.internal.js.snap\nindex 5225479968..9cf7df9217 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactNativeMount-test.internal.js.snap\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/__snapshots__\/ReactNativeMount-test.internal.js.snap\n@@ -2,50 +2,50 @@\n \n exports[`ReactNative renders and reorders children 1`] = `\n \" {}\n- View null\n- View {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"b\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"d\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"j\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"n\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"q\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"t\\\\\"}\"\n+ RCTView null\n+ RCTView {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"b\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"d\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"j\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"n\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"q\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"t\\\\\"}\"\n `;\n \n exports[`ReactNative renders and reorders children 2`] = `\n \" {}\n- View null\n- View {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"x\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"w\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"v\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"t\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"z\\\\\"}\n- View {\\\\\"title\\\\\":\\\\\"y\\\\\"}\"\n+ RCTView null\n+ RCTView {\\\\\"title\\\\\":\\\\\"m\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"x\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"h\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"p\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"g\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"w\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"f\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"r\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"a\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"l\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"k\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"e\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"o\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"i\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"v\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"c\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"s\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"t\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"z\\\\\"}\n+ RCTView {\\\\\"title\\\\\":\\\\\"y\\\\\"}\"\n `;\n","parents":["c5d3104fc0958027820972f3416ec572ded89f28"]}

dillon1000/react

Files changed