NativeBase: Raw Text must be wrapped in an explicit component

Going through the documentation, most of the examples work except for the Input.

class nativeBase extends Component { render() { return ( <Container> <Content> <InputGroup borderType='underline' > <Icon name='ios-home' style={{color:'#384850'}}/> <Input placeholder='' /> </InputGroup> </Content> </Container> ); } }

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 13
Comments: 46 (12 by maintainers)

Most upvoted comments

Sometimes it’s hard to find such errors. For me the best solution is just disable (comment code blocks, remove imports and so on) the half of codebase. If error still exists, enable the first part and disable the second. Sometimes it’s something like this

{variableWithStringValue && (
  <View style={styles.results}>
    <Text>results</Text>
  </View>
)}

You expect variableWithStringValue to be bool but it can be string. For this situation just add !! before variable.

+56

megahertz on Dec 23, 2016

Got the same Error. Found an evil whitespace, deleted it and everything was fine again. Had to change this line: <ScrollView contentContainerStyle={styles.scrollView}> { to this: <ScrollView contentContainerStyle={styles.scrollView}>{

CaptAhak on May 24, 2017

I have found the reason why this happen, just remove “space” where <View> next to <Text>

Ex: 1.

 <View style={styles.container}> <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
   </View>

I have a space at …ntainer}> <Text sty… ==> this why this error, so all the time you should separate by a break like, it’s safer. ===> ERROR 2.

   <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
   </View>

mikenk2010 on Feb 27, 2017

in my case (simplified) {text && <Text>text</Text>} returns false and throws the error. Adding {text && <Text>text</Text> || null} fixed it.

laclance on Sep 12, 2017

It also happens if you pass a EMPTY value in a list item.

<ListItem
    key={index}
    onPress={() => navigate('EditEmployee', {employee})}
    title={<Text>{employee.name}</Text>}
/>

Put your value in to a Text component, this will solve the problem

serdarde on Jul 11, 2017

Comment of @serdarde helps me a lot… Indeed, I am using react-navigation , and I set headerTitle of navigationOptions to empty string. I put any string , and it works fine now

abdennour on Sep 26, 2017

everything worked well yesterday, but today when I turn on the laptop and run ios emulator (react-native run-ios), things changed. some pages show this error and really don’t know WHY…and …there is no error happened to android…so frustrated…

“react”: “16.0.0-alpha.12”, “react-native”: “0.46.4”, “native-base”: “2.3.0”,

soleilgl on Aug 15, 2017

Strangely, when I removed the outer tags, <Container/> and <Content/> and used only <InputGroup/> and …the error goes and everything renders as expected

tam-borine on Dec 26, 2016