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