error "Text strings must be rendered within a <Text> component."

Question

I created a context for my app, but always when I put around my app, I get the error "Text strings must be rendered within a component". If I remove the provider around the app, it works. So I believe the problem is in my context file. My VSCode dont acuse errors in my code.

import {createContext, ReactNode, useState} from "react";

interface CityContext {
    AddCity: (name: string | undefined) => void
}

interface CitiesProvider {
    children: React.ReactNode
}

type Cities = {
        city: {
            name: string
        }
}

export const CitiesContext = createContext({} as CityContext);

export const CitiesProvider = ({children}: CitiesProvider) => {
    const [city, setCity] = useState({})

    
    function AddCity(name: any) {
        const city = {name};
    
        setCity({...city, city})

        return console.log(city)
    }

return   <CitiesContext.Provider value={{AddCity}}> {children}</CitiesContext.Provider>

}

App.tsx

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, SafeAreaView, ImageBackground} from 'react-native';
import { CitiesProvider } from './src/components/Context/SearchedCities';
import Nav from './src/components/Nav/Nav';
import Home from './src/screens/Home';


export default function App() {

  return (
    <SafeAreaView style={style.container}>
     <StatusBar hidden={true} backgroundColor='transparent'/>
   <CitiesProvider>
   <Nav/>
    <Home/>
   </CitiesProvider>
     </SafeAreaView>
  );
}


const style = StyleSheet.create({
  container: {
    backgroundColor: "#2C3333",
    flex: 1,
  },
})

I tried google it, but I didn't found nothing who help me.

Answer 1

Simply remove the space " " before rendering the {children}:

<CitiesContext.Provider value={{AddCity}}>{children}</CitiesContext.Provider>

Since spaces will be removed at build time and for readability, you can also render it as follow:

<CitiesContext.Provider value={{AddCity}}>
  {children}
</CitiesContext.Provider>