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

Question

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>
)
}

Answer 1

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.