Text strings must be rendered within a <Text> component.

[ryuv]

React Native version:

Steps To Reproduce

1. 2.

Describe what you expected to happen:

Snack, code example, screenshot, or link to a repository:

[GreatAuk]

It is a bug?

[mechazod]

@sujea777 Do you have any other details, because I'm experiencing this too, but I have the crash report like this.

{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 5796,
  column: 18,
  name: null }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 5961,
  column: 45,
  name: 'nextUnitOfWork' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 6500,
  column: 21,
  name: 'root' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 6441,
  column: 22,
  name: 'nextFlushedRoot' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 7004,
  column: 18,
  name: null }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 26,
  column: 18,
  name: 'message' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 5925,
  column: 46,
  name: 'workInProgress' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 1013,
  column: 31,
  name: 'fn' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 1097,
  column: 30,
  name: 'index' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js',
  line: 1033,
  column: 17,
  name: null }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js',
  line: 366,
  column: 47,
  name: 'moduleMethods' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js',
  line: 106,
  column: 26,
  name: 'module' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js',
  line: 314,
  column: 8,
  name: 'fn' }
{ source: '/Users/mechazod/Desktop/<PROJ>/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js',
  line: 105,
  column: 17,
  name: null }

Then on line column 5796:18 i found out this Text strings must be rendered within a <Text> component. is throwing error.

I'll be checking all the source files if we don't follow the rendering of Strings. I hope this could help minmap.

Warm regards, -Mar

[stianjensen]

This can typically happen if you have conditions in your render function like {condition && <Text>Hello world</Text>}. If condition is sometimes equal to "", that will cause an empty string to render outside a text component, since "" is falsy in js.

See this thread for more information: https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.