Raw text must be wrapped in explicit <Text> component

[xahon]

Is this a bug report?

yes

If you'll try to execute something like this

render () {
   let title = ""
   return (
    <View>
      { title &&
         <Text>{title}</Text>
      }
    </View>
   )
}

It will throw that error, because IMHO it parses text in quotes like boolean true and goes to the next chunk (View and Text) and renders it successfully, but if there if empty quotes it tries to set raw text in view element. Here if snack example https://snack.expo.io/BJnJJBg5Z

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.45.1

2. node -v:
   v7.10.1

3. npm -v:
   4.2.0

4. yarn --version:
   0.27.5

Then, specify:

• Target Platform: Android

• Development Operating System: Ubuntu 16.04

• Build tools: Expo

Steps to Reproduce

https://snack.expo.io/BJnJJBg5Z

(Write your steps here:)

1. just try this construction in render: <View>{ text && <Text>{text}</Text> }</View>, where text is empty string ""

Expected Behavior

wont render and no error occurs

(Write what you thought would happen.)

Actual Behavior

Error that is hard to discover

(Write what happened. Add screenshots!)

Reproducible Demo

https://snack.expo.io/BJnJJBg5Z

(Paste the link to an example project and exact instructions to reproduce the issue.)

I don't think it needs more explains :)

[chirag04]

this is expected behavior and the error you get is self explanatory. idk if there is anything to improve here. ("" && true) will return empty string in javascript which is why you see the error. you can do something like: { title ? <Text>{title}</Text> : null }

[xahon]

@chirag04 Yes, thanks, i already understood that. I solve my issue with this approach:
{ !!title && <Text>title</Text> }

[sujitpk-perennial]

For me, the issue raised because I forgot to close the tag properly.