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

Question

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:

The only code 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.

How can I resolve this (especially with the error displayed on the phone)?

For further reference, I am following the video here and I am stuck at minute 21:00 because of this Render Error.

Answer 1

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)

Answer 2

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