Why is the same component working in some cases in react native and other times is giving me "Text strings must be rendered within a <Text> component?

Question

EDIT: I have found the problem, I had a ; laying there after my icon in both cases where it didn't work.

As title says, I literally have the same thing in various places, in some cases it works without any problem, in other it keeps giving me this error.

e.g. This is a working code:

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, ScrollView, Image } from 'react-native'; import StoreItem from '../../components/StoreItem';

export default function StoreScreen({navigation}) {

return (
    <ScrollView style={styles.container}>
                <ScrollView horizontal={true} showsVerticalScrollIndicator={false}>
                    <StoreItem imageUri={require('../../../assets/favicon.png')} name="Salad" price="50"/>
                    <StoreItem imageUri={require('../../../assets/favicon.png')} name="Salad" price="50"/>
                </ScrollView>
    </ScrollView>
);

}

StoreItem component:

import React, { Component } from 'react';

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, ScrollView, Image } from 'react-native';

class StoreItem extends Component {

render() {
    return (
        <View style={{ height: 120, with: 20, marginLeft: 20, borderColor: '#EFEFEF', borderWidth: 1, padding: 8, borderRadius: 10, backgroundColor: '#F5F5F5'}}>
            <View style={{flex: 2}}>
                {
                    this.props.isLocked ? 
                    <Image
                        style={{flex:1, width:null, height:null, resizeMode: 'cover'}}
                        source={{
                        uri: 'https://cdn-icons-png.flaticon.com/512/641/641693.png',
                     }}
                    />
                   :  <Image
                        style={{flex:1, width:null, height:null, resizeMode: 'cover'}}
                        source={this.props.imageUri}
                      /> 
                }
                
            </View>
            <View style={{flex: 1, padding: 10}}>
                <Text>{this.props.name}</Text>
                {
                    this.props.isLocked ? 
                    <Text>{this.props.price}</Text> : null
                }
            </View>
        </View>
    );
}

}

export default StoreItem;

However, this is not working:

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, Button } from 'react-native'; import AvailableGoalCard from '../components/AvailableGoalCard';

export default function SetgoalScreen() { return (

        <AvailableGoalCard name="title"/>
        <Button title="Set a goal now!" />
    </View>
);

}

Goalcard component:

import React, {Component} from 'react';

import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native'; import { TextInput } from 'react-native'; import IonIcons from 'react-native-vector-icons/Ionicons';

class AvailableGoalCard extends Component {

render() {
    return (
<View>
   <View>
   <Text>{this.props.name}</Text>
   <IonIcons name = "arrow-forward-outline" />;
   </View>
</View>
);

}

}

const styles = StyleSheet.create({

});

export default AvailableGoalCard;

All follow the same template and logic and everything and it is mindblowing for me to see one work and the other not. What could be the cause? I have double checked if the imports and names are correct and all seemed right. Am I missing a small detail maybe?

Answer 1

The issue we found is explained more below but to point it out was a semicolon at the end of a JSX line the parser sees this as ";" and tries to render that to the string resulting in the error "text must be rendered in a Text component":

render() {
    return (
<View>
   <View>
   <Text>{this.props.name}</Text>
   <IonIcons name = "arrow-forward-outline" />; <—-- HERE IS THE ISSUE
   </View>
</View>
);

Regardless from my experience the only time you get the error you are saying you are getting is from the following:

I answered a similar question the other day. Linking below:

https://stackoverflow.com/a/75722900/11729637

But to explain a little here most likely your issue or problem is because this.props.isLocked can be something other then a boolean. So when the parser comes along and parses your component it works as long as 'isLocked' is a boolean. If its not a boolean then it parses something like:

render() {
            <View style={{flex: 1, padding: 10}}>
                <Text>{this.props.name}</Text>
                {
                    "undefined" ? 
                    <Text>{this.props.price}</Text> : null
                }
            </View>
}

The "undefined" string is being read by the layout as a string and thus giving you the error strings must be rendered in a text component.

Solution most likely:

            <View style={{flex: 1, padding: 10}}>
                <Text>{this.props.name}</Text>
                {
                    !!this.props.isLocked ? 
                    <Text>{this.props.price}</Text> : null
                }
            </View>

Doing the !! casts the value to a boolean so even undefined will be false.