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

Question

Error: Text strings must be rendered within a component. in RCTView (created by View) in View (created by App) in RCTView (created by View) in View (created by ImageBackground) in ImageBackground (created by App) in RCTView (created by View) in View (created by NativeLinearGradient) in NativeLinearGradient (created by LinearGradient) in LinearGradient (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes

An error occurred while listening to a lecture at Udemy.

**This is App.js **

import { useState } from "react";
import { StyleSheet, ImageBackground, SafeAreaView } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import StartGameScreen from "./screens/StartGameScreen";
import GameScreen from "./screens/GameScreen";
export default function App() {
 const [userNumber, setUserNumber] = useState(null);
 function pickedNumberHandler(pickedNumber) {
 setUserNumber(pickedNumber);
 }
 let screen = <StartGameScreen onPickNumber ={pickedNumberHandler}/>; 
 
 if (userNumber) {
 screen = <GameScreen />;
 }
 return (
 <LinearGradient colors={["#ddb52f", "#4e0329"]} style={styles.rootScreen}>
 <ImageBackground
 source={require("./assets/images/background.png")}
 resizeMode="cover"
 style={styles.rootScreen}
 imageStyle={styles.backgroundImage}
 >
 <SafeAreaView style={styles.rootScreen}> {screen} </SafeAreaView>
 </ImageBackground>
 </LinearGradient>
 );
}
const styles = StyleSheet.create({
 rootScreen: {
 flex: 1,
 },
 backgroundImage: {
 opacity: 0.2,
 },
});

The error does not appear in {screen} when the SafeAreaView component is not present, but the above error occurs when the screen is wrapped with the SafeAreaView component.

I made sure that all custom components fit text well into the text component.

I would appreciate it if you could let me know if there are any points of error or other errors

Answer 1

You can do the following and it will work.

import { useState } from "react";
import { StyleSheet, ImageBackground, SafeAreaView } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import StartGameScreen from "./screens/StartGameScreen";
import GameScreen from "./screens/GameScreen";
export default function App() {
 const [userNumber, setUserNumber] = useState(null);
 function pickedNumberHandler(pickedNumber) {
 setUserNumber(pickedNumber);
 }
 return (
 <LinearGradient colors={["#ddb52f", "#4e0329"]} style={styles.rootScreen}>
 <ImageBackground
 source={require("./assets/images/background.png")}
 resizeMode="cover"
 style={styles.rootScreen}
 imageStyle={styles.backgroundImage}
 >
 <SafeAreaView style={styles.rootScreen}> 
 {userNumber ? <GameScreen /> : 
 <StartGameScreen onPickNumber = {pickedNumberHandler}/>}
 </SafeAreaView>
 </ImageBackground>
 </LinearGradient>
 );
}
const styles = StyleSheet.create({
 rootScreen: {
 flex: 1,
 },
 backgroundImage: {
 opacity: 0.2,
 },
});

• user21519232: Thank you for your solution. Can you also tell me why the above error appears on the code I wrote?
• Shail Patel: @user21519232 did it work? did you test it?
• Shail Patel: @user21519232 you cannot store a component inside a variable
• user21519232: I saved the component in the variable and set it up as a parent and child relationship, and the operation was successful like this -><SafeAreaView style={styles.rootScreen}> {screen} </SafeAreaView> haha....
• Abe: @ShailPatel components are already variables - you can certainly store them inside another variable