Why am I getting "Text strings must be rendered within a <Text> component"?

Question

I'm making an app with React Native and am getting this error:

Error: Text strings must be rendered within a <Text> component.

Code:

 const [childsName, setChildsName] = useState('');
 const [childsNameToBeLinked, setChildsNameToBeLinked] = useState('');
 const [email, setEmail] = useState('');
 const [code, setCode] = useState('');
 const [isParent, setParent] = useState(false);
 const [isChild, setChild] = useState(false);
 const [isLinked, setLinked] = useState(false);
 const [allDoneForParents, setAllDoneForParents] = useState(false);
 const [childsNameAddedNotif, setChildsNameAddedNotif] = useState('');
 const [uri, setUri] = useState('');
 return (
 <View style={styles.container}>
 {!isParent && !isChild && (
 <View>
 <View style={styles.buttonContainer}>
 <Button title="This Is Child's Phone" onPress={() => setChild(true)} />
 </View>
 <View style={styles.buttonContainer}>
 <Button title="This Is Parent's Phone" onPress={() => setParent(true)} />
 </View>
 </View>
 )}
 {isParent && (
 <View>
 <View style={styles.inputContainer}>
 <TextInput placeholder='@' onChangeText={(val) => setEmail(val)} value={email} />
 </View>
 <View style={styles.inputContainer}>
 <TextInput placeholder='Enter Code' onChangeText={(val) => setCode(val)} value={code} />
 </View>
 {childsNameAddedNotif && (
 <View>
 <Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>
 </View>
 )}
 {!childsNameAddedNotif && (
 <View style={styles.submitBtn}>
 <Button title='Submit' onPress={handleSubmit} />
 </View>
 )}
 <View style={styles.backBtnContainer}>
 <BackBtn onPress={() => setParent(false)} />
 </View>
 </View>
 )}
 {isChild && !isLinked && !code && (
 <View>
 <View style={styles.inputContainer}>
 <TextInput placeholder="Child's First Name" onChangeText={(val) => setChildsName(val)} value={childsName} />
 </View>
 <View style={styles.submitBtn}>
 <Button title='Submit' onPress={handleSubmit} />
 </View>
 <View style={styles.backBtnContainer}>
 <BackBtn onPress={() => setChild(false)} />
 </View>
 </View>
 )}
 {isChild && !isLinked && code && (
 <View>
 <Text>OK, now use your phone, tap on This Phone Parent's Phone, enter your email and {code}</Text>
 </View>
 )}
 {isLinked && !allDoneForParents && (
 <View>
 <View>
 <Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>
 <Text>Would You Like To Link More Children ?</Text>
 </View>
 <View>
 <Button title='Yes' onPress={() => setLinked(false)} />
 </View>
 <View>
 <Button title='No' onPress={() => setAllDoneForParents(true)} />
 </View>
 </View>
 )}
 {allDoneForParents && (
 <View>
 <Text>All Done For You Now. Little Angel Will Notify You If Needed.</Text>
 <Text>Have a Nice Day :) </Text>
 </View>
 )}
 <StatusBar style="auto" />
 </View>
 );
}

Can you see where my strings aren't within the Text component?

Answer 1

Okay, so this happens to me quite often and it's usually, imo, the text editor. I copied your code and didn't get this error. I also can't see where there is an inappropriate string outside of a Text component. Since I couldn't, here are a few different ways you can troubleshoot without having to send us all your code.

The quickest way I solve this is to comment out everything and slowly uncomment each section until I find where the error is coming from and go from there. Usually it's a space your can't see or improper conditional.

If you're using Visual Studio Code, sometimes if there is a space after a tag (example: <View>) when you press ctrl + s to save, it will take that space as a text string. Usually, however, it leaves {" "}.

If none of that works, you can try to convert your string conditionals to

childsNameAddedNotif !== ""

While it means the same thing, it's worth a try because sometimes this is my problem.

Adding the template strings to your Text component would make no difference the way you're using it.

Answer 2

The issue coming from this line

 <Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>

You need to add the template string and dollar sign for the variable.

<Text>{`${childsNameToBeLinked}'s Phone Is Now Linked`}</Text>

The same for

<Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>

It should be

<Text>{`${childsNameAddedNotif}'s Phone Has Been Linked`}</Text>

• Mark: It made no difference.
• Mina: @Mark, you still have another issue, I just update the answer.
• Mark: I've edited it in both instances. I figured you meant both instances.