How to resolve the error of "Text strings must be rendered within a <Text> component" in React native?

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.