CODEWITHSUNDEEP
react-nativetextexponative
Octa28
Octa28

Reputation: 1

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

Im just starting a new react native projet with expo, I created my different screens, and added the navigation to the app,js. But my expo is already showing an error that says "Error: Text strings must be rendered within a component.". It also says:

This error is located at: in div (created by Text) in LocaleProvider (created by Text) in Text (at Inicio.js:6) in Inicio (at SceneView.tsx:132) in StaticContainer in EnsureSingleNavigator (at SceneView.tsx:124)

So im not sure what to do, the little text I have in my pages is between the Text component (Like this "Page Name")

Here is the App.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';
import Inicio from './pages/Inicio';
import Instrucciones from './pages/Instrucciones';
import Juego from './pages/Juego';
import Puntaje from './pages/Puntaje';


const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name='Inicio'
          component={Inicio}
          options={{
            headerShown: false,
          }}
        />
         <Stack.Screen
          name='Instrucciones'
          component={Instrucciones}
          options={{
            headerShown: false,
          }}
        />
         <Stack.Screen
          name='Juego'
          component={Juego}
          options={{
            headerShown: false,
          }}
        />
         <Stack.Screen
          name='Puntaje'
          component={Puntaje}
          options={{
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And every page is written like this:

import React from 'react'
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native-web'

export default function Inicio() {
  return (
    <Text>Inicio</Text>
  )
}


const styles = StyleSheet.create({

})

I tried changing the pages layout, using Text, using View, tried re installing Expo, restarting VSC, but it keeps showing that error

Upvotes: 0

Views: 178

Answers (1)

mainak
mainak

Reputation: 2311

simple buddy, replace 'react-native-web' with 'react-native'

explanation: StyleSheet, TouchableOpacity, Text, View these are react native's core library component, so need to import correctly

And all set!

Upvotes: 0

Related Questions