iosreact-nativevisual-studio-codetextreact-native-text

React Native - IOS - Text strings must be rendered within a <Text> component


Looking at my code for few hours, I was not able to understand the root cause for this exception

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

This error is located at:
in RCTView (created by View)
in View (created by Card)
in Card (created by StartGameScreen

Can anyone give me a hint? Where do I have to check analyzing? I have a Card component indeed. Is this the first place to check according to the error message?

Card

import {View, StyleSheet} from 'react-native'
import Colors from '../../constants/colors'

function Card({children}) {

   return (
     <View style = {styles.card}> {children} </View>
   )
}
export default Card; 

StartGameScreen

function StartGameScreen({onPickNumber}) {

const [enteredNumber, setEnteredNumber] = useState('')

function numberInputHandler(enteredText) {
    setEnteredNumber(enteredText)
}

function resetInputHandler() {
    setEnteredNumber('')
}

function confirmInputHandler() {
    const choseNumber = parseInt(enteredNumber)
    if (isNaN(choseNumber) || choseNumber <= 0 || choseNumber > 99) {
        Alert.alert('Invalid number', 'Number has to be a number between 1 and 99', [{text:'Okay', style:'destructive', onPress:resetInputHandler}]);

        return;
    }

    onPickNumber(choseNumber);
}

return (
   <View style={styles.rootContainer}>
       <Title>Guess my number</Title>
       <Card>
           <InstructionText>dsd</InstructionText>
            <View style={styles.textInputContainer}>
                <TextInput style={styles.numberInput} maxLength={2} keyboardType="number-pad" autoCapitalize='none' onChangeText={numberInputHandler} value={enteredNumber}/>
            </View>
   
            <View style = {styles.buttonsContainer}>
                <View style={styles.buttonContainer}>
                    <PrimaryButton onPress={resetInputHandler}>Reset</PrimaryButton>
                </View>

                <View style={styles.buttonContainer}>
                    <PrimaryButton onPress={confirmInputHandler}>Confirm</PrimaryButton>
                </View>     
            </View>
        </Card>
    </View>      
 )
}

InstructionText

function InstructionText({children}) {
     return (
         <Text style={styles.instructionText}>{children}</Text>     
    )
   }

Solution

  • const InstructionText = ({children}) => {
         return (
             <Text style={styles.instructionText}>{children}</Text>     
            )    
    }
    

    This should work !!

    if you have spaces in your return statement, you have to wrapping it in parenthesis () and using one line per each tag.