Question 363196 in React native Question posted in
The official React Native documentation can be found here.

React native – Render Error on phone <Text> must be rendered within a <Text> component but on browser was fine

Hi I am learning React Native and this is an error when trying to setup the whole thing when using Expo Go on my iPhone.

I received this error when I ran npm start or expo-cli start --tunnel to start Metro Bundler. When I scan it and open Expo Go, I received this error on my VS Code

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

And this error was displayed on my Expo Go on iOs
enter image description here

The ONLY codes I have so far (because this is only setting up Expo and Metro Bundler before started coding the whole app)

    import { View, Text } from 'react-native-web';
    
    const Home = () => {
        return (
            <View>
                <Text>HELLO</Text>
            </View>
        )
    }
    
    export default Home;

in index.js

and

import { Stack } from 'expo-router';

const Layout = () => {
    return <Stack/>;
}

export default Layout;

in _layout.js

but when I open it on the browser, it appears the correct codes.

It would be really great if anyone can help resolve this!!! Especially with the error displayed on the phone because I really want to start coding ASAP and the setting up part is so annoying

For further reference, I am following the video here https://www.youtube.com/watch?v=mJ3bGvy0WAY&t=1227s and I am stuck at minute 21:00 because of this Render Error.

Tags:

2

Answers


  1. 0

    Your import is not right:
    import { View, Text } from 'react-native-web';
    It should be:
    import { View, Text } from 'react-native';

    Note: Not sure how the mistake happened, but be aware of autocomplete options, sometimes it can autocomplete with the wrong import (eg. same component name in different package)

    Login or Signup to reply.
  2. 0

    Make sure you have no spaces after the tag <View>.
    This usually happens when you copy something or just put a space by mistake, it’s invisible so you wouldn’t notice.

    To be sure I’d try to do this:

    <View><Text>HELLO</Text></View>

    If it doesn’t work you can delete and restore code until you find the problem. Most probably it will be a empty space

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search