-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Text strings must be rendered within a Text component" when && operator is used in JSX #20764
Comments
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@ATShiTou Here's the screenshot of what works on ios but crashes the app on android |
This comment has been minimized.
This comment has been minimized.
@ATShiTou btw interesting thing that I noticed. Let's say I have the state UPDATE: |
I know whats going wrong, The below code works without crashing in iOS whereas it crashes in Android.
Leaving aside the crash, you should not render a empty string without wrapping it in Text for now in React-Native.
By the way still this is a bug in RN, to maintain compatability either it should crash in both iOS and Android or it should emit omit empty string('') altogether. |
@ravirajn22 yes that's right. Thanks for clearing things up |
Using the ternary operator is the right approach here. |
Why was this bug closed? My team just got bit by this (surprising!) behavior today. At the bare minimum if this is desired behavior (I cannot imagine how it could be), make it consistent across platforms and document it. |
@jdiaz5513 it was closed as a workaround was provided. I think it's fair to aim for consistency across platforms, it's OK to open a new issue describing the desired behavior. |
Follow up to my last comment: My understanding is that this is now consistent across both platforms. Previously, if you were to only test on iOS but targeted Android as well, it would be possible to ship an app to production without catching this. We now crash on both iOS and Android. I do agree this behavior is surprising and leads to a bad DX, so I'm re-opening the issue. |
@hramos Would you expect an empty string and/or We got bit by this again last week due to the client's API switching to returning Exacerbating the problem was this ongoing issue with our exception handler, where this problem can just show a white screen and the handler doesn't actually catch the invariant exception: |
@jamonholmgren I would expect empty strings / 0 to not crash personally, I got bit by this too, only in release. |
For anyone that wants to see the errors in person
Will not crash
|
got hit by this today :/ Strange error message though. |
Got the same error today with React Native 0.58.4. Was able to make it work by adding !! before a boolean expression. Hope this bug will be fixed in later React Native releases. |
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. |
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. |
Environment:
[skip envinfo]
This issue only affected Android in older releases, but is now consistent across both iOS and Android platforms as of
0.57.8
.Description
Using JSX that conditionally renders a
Text
element can lead to a RedBox error, "Invariant Violation: Text strings must be rendered within a Text component", if the condition is "falsy", as in the following example:This can lead to a confusing development experience, as the pattern is documented in React's JSX docs.
Workaround
Use a ternary operator.
The text was updated successfully, but these errors were encountered: