I am building an app using React Native but I have an error saying "Text strings must be rendered within a component" error even though I don't have any texts rendered outside the component. This is the part the error occurs.
import React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import TopBar from "./Topbar";
import BottomNavBar from "./BottomNavbar";
const Layout = ({ children }) => {
console.log("Children prop:", children);
return (
<SafeAreaView style={styles.container}>
<TopBar />
<View style={styles.contentContainer}>
{children} {/* This is where the page-specific content will go */}
</View>
<BottomNavBar />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#000000",
},
contentContainer: {
flex: 1,
marginBottom: 60, // Adjust to ensure content isn't hidden behind the navbar
},
});
export default Layout;
import React from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ImageBackground,
Image,
Dimensions,
} from "react-native";
import Layout from "../layout/Layout"; // Import the Layout component
const { width, height } = Dimensions.get("window");
const Home = () => {
return (
<Layout>
<ImageBackground
source={require("../../../assets/home.jpg")}
style={styles.backgroundImage}
>
<View style={styles.overlay} />
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Enjoy The Game</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Find Your Match</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Plan Your Date</Text>
</TouchableOpacity>
</ImageBackground>
</Layout>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: "center",
alignItems: "center",
width: width,
height: height,
},
overlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.4)",
},
button: {
width: width * 0.8,
padding: 15,
borderRadius: 50,
borderWidth: 2,
borderColor: "#ffffff",
justifyContent: "center",
alignItems: "center",
marginVertical: 10,
backgroundColor: "rgba(255, 255, 255, 0.1)",
},
buttonText: {
fontSize: 20,
color: "#ffffff",
fontFamily: "Playfair",
},
cursorIcon: {
position: "absolute",
width: 30,
height: 30,
right: -35,
top: -10,
},
});
export default Home;
I tried to find out the source of error by commenting out each component in pages. The error seems to be in the childrens prop in the Navbar component. I don't have any texts rendered outside the component here. Could somebody help with this?
Can you remove "{/* This is where the page-specific content will go */}" the part? Then try it.