react-nativereact-navigationstack-navigator

Function headerMode not working or dont seem to exist


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


Solution

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