Search code examples
javascriptreactjsreact-nativeexpoexpo-go

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

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 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.

Solution

  • 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)