Nativebase: Raw Text must be wrapped in an explicit <Text> 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>
);
}
}
skyride99
All 46 comments
Me too, I'm having same problem here
yogieputra8
on 25 Sep 2016
@skyride99 @yogieputra8 My package.json file includes:
"native-base": "^0.5.8",
"react": "15.3.2",
"react-native": "0.33.0"
The above code snippet works fine for me.
What version of RN and NB are you working with
SupriyaKalghatgi
on 28 Sep 2016
@skyride99 @yogieputra8 Working with latest versions?
sankhadeeproy007
on 29 Sep 2016
nb 0.5.8
rn 0.32.0
skyride99
on 30 Sep 2016
Could be that you have a rogue space character somewhere, I've had that problem before.
Make sure that everything is separated with line breaks (\n) and tabs (\t), see if that helps?
jakewtaylor
on 4 Oct 2016
Also, I don't have a clue why it would be this, but try using double quotes instead of single?
jakewtaylor
on 4 Oct 2016
@skyride99 @yogieputra8 Did it work for you?
SupriyaKalghatgi
on 6 Oct 2016
I have got the same issue, but i think the real issue is in the content component.
stranbury
on 7 Oct 2016
Anybody make any progress on this? I'm getting the error as well.
CodyLee117
on 27 Oct 2016
The Icon components have some issue for fix that, i use react-native-vector-icons directly
stranbury
on 27 Oct 2016
i also got this error any soluton please :)
nicely
on 2 Nov 2016
@skyride99 @yogieputra8 @stranbury @CodyLee117 @nicely Working with latest versions?
SupriyaKalghatgi
on 18 Nov 2016
Parts of my package.json:
"native-base": "0.5.18",
"react": "15.4.1",
"react-native": "0.39.2",
Component code:
<Container>
<Content>​
<InputGroup borderType='underline'>
<Icon name='ios-home' style={{color:'#384850'}}/>
<Input placeholder='Type your text here'/>
</InputGroup>
</Content>
</Container>
I get the same error as everyone else.
alexpanov
on 20 Dec 2016
Same error
5ynatra
on 22 Dec 2016
I had to use the starter project to get around the issue. Now that I have adapted it to basically the same state, the error is gone.
alexpanov
on 22 Dec 2016
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.
megahertz
on 23 Dec 2016
@alexpanov @Vikaton Still stuck on this?
SupriyaKalghatgi
on 26 Dec 2016
Haven't tried, Will get back to you when I get around back to it
5ynatra
on 26 Dec 2016
@SupriyaKalghatgi
Using a starter made the error go away. So, technically not, but I had to wipe out my project in order to get around it and I am unaware of the fix.
alexpanov
on 26 Dec 2016
Same problem
tam-borine
on 26 Dec 2016
Strangely, when I removed the outer tags,
tam-borine
on 26 Dec 2016
@alexpanov In that case you could had removed node_modules and installed your package.json again
SupriyaKalghatgi
on 27 Dec 2016
@tam-borine Could you please elaborate?
SupriyaKalghatgi
on 27 Dec 2016
Like, so I extracted the native-base components into a small custom one without putting the rendered stuff in Container or Content tags like this... then invoked it elsewhere.
class InputBox extends Component {
render() {
return (
<InputGroup borderType='regular' >
<Input placeholder={this.props.plac}/>
</InputGroup>
)
}
}
Turns out, this wasn't really a tricky issue. Due to the copy pasting mechanism of the docs example, a few stray characters were littered around here and there. Type the example from scratch and that should do it. Took me 10 minutes figure this out. Will soon migrate to gitbook for the docs so that is one thing less to worry about!
sankhadeeproy007
on 29 Dec 2016
@sankhadeeproy007
It is true, that some unsupported characters were copied along with the code. However, even after removing them and having the code clean, the issue persisted for me.
alexpanov
on 29 Dec 2016
In that case it's best that you follow the approach suggested by @megahertz . Remove all your components and add them one by one. Start off with react-native components like ScrollView and TextInput and then replace by native-base components like Content and InputGroup. It's hard for us to help you further because we can't reproduce it on our end. Still I'm reopening this issue as there are quite a few +1's.
sankhadeeproy007
on 30 Dec 2016
@megahertz 's comment helped me solve the same issue in a completely unrelated component. It's kinda frustrating when the solution to a crash is a couple characters, though 🤣
vspedr
on 25 Jan 2017
I have faced the similar problem. This kind of issue happens when your tags are not closed properly.
Below is the code snippet that caused the issue for me
renderRow={(rowData) =>
/>
Resolution: I had the closing tag for ListView twice. So removed it.
renderRow={(rowData) =>
/>
vjcoder33
on 21 Feb 2017
I have found the reason why this happen, just remove "space" where
Ex:
1.
<View style={styles.container}> <Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
I have a space at ...ntainer}>
2.
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
mikenk2010
on 27 Feb 2017
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 24 May 2017
Got the same Error. deleted the annotation was OK!
<TouchableWithoutFeedback style={{flex:1}} onPress={dismissKeyboard}>
<View style={{flex:1}}>
<WrappedComponent {...this.props}/>
// <WrappedComponent />
</View>
</TouchableWithoutFeedback>
wangdetong
on 24 May 2017
Probably the reason of error is annotation...there are many annotations in native base templates..you must delete it...
RasadHasanzada
on 21 Jun 2017
usually this error shows up when you import Text component from react-native without using it in your component
paranoia5
on 10 Jul 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 11 Jul 2017
In my case the problem was caused by an single quote after _TouchableHighlight_ tag.
<TouchableHighlight onPress={() => this.handleKeyBoardButtonsPress('1')} style={btnKeyboard}>
<Text style={txtKeyboard}>1</Text>
</TouchableHighlight>'
ismayilmalik
on 5 Aug 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 15 Aug 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 12 Sep 2017
@laclance Maybe use {text ? <Text>{text}</Text> : null} instead of {text && <Text>{text}</Text> || null}, I'm assuming you're trying to output the text if it's truthy, and null if it's falsey, but using the ternary if operator is much clearer (imo at least).
jakewtaylor
on 12 Sep 2017
Thanks, i was just using it to avoid no-confusing-arrow eslint warning but && is more confusing.
laclance
on 13 Sep 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 26 Sep 2017
The real problem here is that this error doesn't show the name of the file the error occurs in. Which is ridiculous and one of the many reasons why developing in React Native is not the huge timesaver it proposes to be.
Anyways, depending on your editor settings, one way to check for this is to search for {' '} that may replace spaces in the render function
mschipperheyn
on 29 Sep 2017
I have the same erro!!!!
"dependencies": {
"mobx": "^3.3.1",
"mobx-react": "^4.3.3",
"native-base": "^2.3.2",
"react": "16.0.0-alpha.12",
"react-native": "0.48.4",
"react-native-router-flux": "^4.0.0-beta.22",
"react-native-vector-icons": "^4.4.0"
},
luisnunosantos
on 11 Oct 2017
@abdennour You saved my day :)
namnv04
on 5 Nov 2017
I had the same error.
I had nested components inside of the same type of parent component
(like this for example)
<view>
<view>
</view>
</view>
I solved the error by simply removing the parent component
like this:
<view>
</view>
joshkmartinez
on 26 Dec 2017
in XCode it sometimes put a blank part to:
{""}
search above bracket string and make sure you don't have that in your code~
(it worked for me cuz i had samething happened due to the above stuff......
markmoomoo
on 23 Mar 2018
Related issues
eggybot
·
3Comments
inv2004
·
3Comments
nschurmann
·
3Comments
sihemhssine
·
3Comments
agersoncgps
·
3Comments
Most helpful comment
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
You expect variableWithStringValue to be bool but it can be string. For this situation just add !! before variable.