I just got to this code:
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
headerMode="none"
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, }}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
And reports an error in "headerMode = "none", i already made some searchs but i couldnt find what exactly is wrong. Should it be defined in some other way? Or is there something i should have installed
What i already have installed : yarn add @react-navigation/native, npx expo install react-native-screens react-native-safe-area-context, yarn add @react-navigation/native-stack, yarn add @react-navigation/stack and npx expo install react-native-gesture-handler
I just made some changes and its working fine now, instead of using headerMode
I'm using headerShown
in the screenOptions
, so the code will look like this:
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
/*headerMode="none"*/
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, headerShown: false}}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
I don't know what was wrong, maybe with the new versions it changed, but it worked now.