react-native: How to hide an element in createStackNavigator [closed] - react-native

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this 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.