React-native: [0.56.0] Text strings must be rendered within a <Text> component

[jayporta]

• [ x] Review the documentation: https://facebook.github.io/react-native
• [ x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x ] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 33.70 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.2 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
SDKs:

  iOS SDK:
    Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
  Android SDK:
    Build Tools: 23.0.1, 26.0.1, 26.0.2, 28.0.0
    API Levels: 21, 23, 25, 26, 28
IDEs:
  Android Studio: 3.1 AI-173.4819257
  Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
  react: ^16.4.1 => 16.4.1
  react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
  react-native-cli: 2.0.1
  react-native-git-upgrade: 0.2.7

Description

Reproducible Demo

I uploaded from 0.55 to 0.56 resolved dependencies, and then this happened when I started the app again. This issue did not exist in 0.55, and I can't seem to find the cause of this error since there is no text outside of a Text component in any of the recognizable locations listed in the error screen.

[mrfair]

Delete space between components outside <Text></Text>
Ex. Don't use <Button> <Text>hi</Text></Button> But use <Button><Text>hi</Text></Button>

[jayporta]

There are no spaces between components.

On Sat, Jul 7, 2018 at 12:27 PM mrfair [e-mail] wrote:

Delete space between components outside

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/20084#issuecomment-403226848,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOi1lDmBOIZSRDLhhW_OuBYaGivoPwAZks5uEOFzgaJpZM4VGL3f
.

[dulmandakh]

This usually happens when you do inline conditional rendering like {var &&
} which will render MyComponent if var is true. But it tried
to render value of var. The fix is change conditions to make sure it's
Boolean expression like {var !== 0 &&

[jayporta]

That was it. Thanks. This is a new problem as of React Native 0.56.

On Sat, Jul 7, 2018 at 5:13 PM Dulmandakh [e-mail] wrote:

This usually happens when you do inline conditional rendering like {var &&
} which will render MyComponent if var is true. But it tried
to render value of var. The fix is change conditions to make sure it's
Boolean expression like {var !== 0 &&

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/20084#issuecomment-403243162,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOi1lL3Gkd0l2OINqNxhuUcW3AVxfqgdks5uESSHgaJpZM4VGL3f
.

[ravirajn22]

@jayporta this is not a new problem, this is how it's working for a long time.Please Close this issue.

[jayporta]

But the app I’m building ran perfectly fine until I upgraded to 0.56. So
obviously it’s related.

On Mon, Jul 9, 2018 at 1:47 AM raviraj [e-mail] wrote:

@jayporta https://github.com/jayporta this is not a new problem, this
is how it's working for a long time.Please Close this issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/20084#issuecomment-403366145,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOi1lBbG7HPVBfB9eQbbIfWhCXlWKJO_ks5uEu5bgaJpZM4VGL3f
.

[radko93]

Just don't pass values instead of components/false/null when rendering, why do you think it's a bug in RN?

[radko93]

@facebook-github-bot expected

[facebook-github-bot]

The comment above tells me this is expected behavior. If you'd like to change how this feature works, please submit a feature request on Canny so that other people can vote on it.

_{How to Contribute • What to Expect from Maintainers}

[Zohaibmalikdev]

@jayporta i got the same issue today, and i don't understand your solution since you mention it's solved. can you give a detail answer on what exactly is causing this issue to occur.

[radko93]

@dulmandakh posted a solution. Don't pass values to render function and you will be ok. The behaviour was there all the time, but maybe RN got more sensitive for that in the latest version.

[jayporta]

@Zohaibmalikdev @radko93

Here’s an example of what broke the majority of my components in React Native 0.56 but never in previous versions:
{ truthyValue ? <View>...</View> : null }

(The null is there as a fallback for Android, which will crash without it when rendering a Text component. That error is notoriously difficult to track down if you’ve been working on iOS and test on Android hours or days later, but that’s irrelevant... OR IS IT?! 😐)

I’ve been building React and React Native apps for my employer for a year now and have never run into this issue, which is what leads me to believe that it’s a new issue with React Native 0.56.

To answer your question, @radko93 (why do you think it’s a bug in RN?):

If a problem never occurred before and it suddenly began to occur immediately after upgrading, then common sense tells me that the error was introduced when upgrading.

If this is intended, then you're right, it's not a bug. If it's a breaking change, then either I missed it when I read the release notes or it's not mentioned. I will inform my employer that we must refactor all components to use functional components instead of conditional rendering.

[mrfair]

@Zohaibmalikdev Don't return string value outside <Text></Text>

[radko93]

@jayporta I can understand your frustration, I will reopen this for now for more investigation.

[kelset]

So, the error clearly states that "Text strings must be rendered within a component", but in this small snippet by @jayporta I can't see any text.

My guess is that that snippet has some Text somewhere (?) without a Text tag. In the changelog there are clear mentions to Text related cleanup/fixes/refactors (like these two 1 2), so until proven otherwise via a repo with a repro of a bug, I have to assume that the bug was in fact pre-exisiting in your code and this refactoring simply "bubbled it up".

[xtrycatchx]

I encountered the same, and in my case the cause was wrapping a component with an View containing spaces

encountered the problem (notice the spaces):

<View> <ActivityIndicator size="large"/> </View>

simple fix was to remove the spaces:

<View><ActivityIndicator size="large"/></View>

its quite tricky because if I wrote like this way, i wont encounter the problem:

<View>
  <ActivityIndicator size="large"/>
</View>

[radko93]

@xtrycatchx probably the errors is the same, but the reason is different. At least for @jayporta

[xtrycatchx]

yes, i agree you are right @radko93 thanks. Im just adding the comment here in case there will be others who experienced the same like i do.

[tezahzulueta]

Hi,

I'm having the same issues. I tried the solutions in the comment but nothing works. Please help. I'm stuck.

[kelset]

@tezahzulueta please create a small repo with the repro of the issue and link it.

By the way, the stacktrace says that your issue is in the Header file.

[tezahzulueta]

Hi @kelset

Here's the repo

https://github.com/tezahzulueta/authentication

[kelset]

@tezahzulueta you had in Header a ; after the Text component, here. Remove it and the code will work.

Since OP is not replying I'll assume it was actually a non bug. Closing this until further evidences that there is actually a bug.