react-native: How to hide an element in createStackNavigator

Question

I have a stackNavigator is displayed in my menu with my configuration

const ProfileStack = createStackNavigator();

function ProfileNavigator() {
  return (
    <ProfileStack.Navigator
      drawerStyle={{ width: '100%', color: 'red' }} // not work
    >
      <ProfileStack.Screen
        name="ProfileScreen"
        component={ProfileScreen}
        options={{
          headerBackTitleVisible: false, // not work
          headerMode: 'none',
          headerShown: true // work
        }}
      />
    </ProfileStack.Navigator>
  )
}

( I have profile in menu ( red border ) and button profile ( icon ) And i want to keep the button, hide in the menu and keep the header in the webpage/view.

I try many conf with the documentation ( https://reactnavigation.org/docs/4.x/stack-navigator-1.0#navigationoptions-for-screens-inside-of-the-navigator )

I would like hide the element of the menu. Because the page/view is accessible from a button. I check many configurations of createStackNavigator. headerBackTitleVisible and others didn't work.

Do you know how to hide an element bevcause i'm lost :( ?

thanks

Answer 1

Take a look at this React Navigation Github issue. The person who posted that wanted to hide an item in the drawer menu, but still be able to access the drawer from that page. The following workaround was provided:

I found the following workaround :

• Create a component returning null
• Pass the component to the drawerLabel navigationOptions of the screen you want the item to be hidden

Hope this helps.

Here is an example below, which you can copy, paste, and run if you would like:

App.js:

import React from 'react';

import TestAppContainer from "./TestAppContainer";


export default function App() {
    return (
        <TestAppContainer/>
    );
}

TestAppContainer.js:

import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import {DrawerNavigatorTest} from "./NavigatorTest";

const TestAppContainer = props => {

    return (
        <NavigationContainer>
            <DrawerNavigatorTest />
        </NavigationContainer>
    );
}

export default TestAppContainer;

NavigatorTest.js:

import React from "react";
import {createDrawerNavigator} from "@react-navigation/drawer";

import TestScreen from "./TestScreen";
import TestScreenTwo from "./TestScreenTwo";
import NullComponent from "./NullComponent";


const TestDrawerNavigator = createDrawerNavigator();

export const DrawerNavigatorTest = () => {
    return(
        <TestDrawerNavigator.Navigator drawerContentOptions={{activeBackgroundColor: "transparent"}}>
            <TestDrawerNavigator.Screen name={"Test"} component={TestScreen} />
            <TestDrawerNavigator.Screen name={"Test2"} component={TestScreenTwo} options={{drawerLabel: NullComponent}}/>
        </TestDrawerNavigator.Navigator>
    );
}

NullComponent.js:

import React from "react";

const NullComponent = props => {
    return null;
}

export default NullComponent;

TestScreen.js:

import React from "react";
import {SafeAreaView, View, Text, Button} from "react-native";

const TestScreen = props => {

    const buttonPressHandler = () => {
        props.navigation.navigate("Test2");
    };

    return (
        <SafeAreaView style={{flex: 1,}}>
            <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
                <Text>Test Screen</Text>
                <Button title={"Go to next screen."} onPress={buttonPressHandler} />
            </View>
        </SafeAreaView>
    );
};

export default TestScreen;

TestScreenTwo.js:

import React from "react";
import {SafeAreaView, View, Text} from "react-native";

const TestScreenTwo = props => {

    return (
        <SafeAreaView style={{flex: 1,}}>
            <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
                <Text>Test Screen Two</Text>
            </View>
        </SafeAreaView>
    );
};

export default TestScreenTwo;

Note that this is not a perfect solution, but a workaround. It could use some more fine tuning. You may also want to look into custom drawer components. I'm not very familiar with custom drawer components, but you may be able to get cleaner functionality with custom drawer items. See the React Navigation Docs.