I was a little bored of react-js recently and wanted to try react native, I followed a tutorial on youtube which used react navigation, and I got an error at the very beggining of creating my app (while creating my first component actually)
First I got an error saying Text strings must be rendered within a <Text> component. but my string was in a text component
Then I tried doing a component which just return en empty <View></View> but got an error :
variant Violation: View config getter callback for component `div` must be a function (received `undefined`)
I concluded the error was coming from the component itself and not the text
Here is my code :
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer} from "@react-navigation/native";
import { View } from "react-native-web";
const Stack = createStackNavigator();
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
In the tutorial I was following the guy used react navigation 6 but called the function createStackNavigator()
In the official documentation https://reactnavigation.org/docs/hello-react-navigation they use createNativeStackNavigator instead of createStackNavigator (which is for v5), I tried deleting my node modules, installing the correct npm package, verified the versions, and then followed this documentation but I still get the same errors
You should be using createNativeStackNavigator instead, and you also need to import Text since you only have View. Be sure to import React Native components from 'react-native' instead of 'react-native-web'. Doing all of this fixed your issue and I can now see the text displayed:
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import { View, Text } from "react-native";
const Stack = createNativeStackNavigator();
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;