i am using the React navigation version 6 and i want to header of navigation
with drawer and Stack
but when i use stack in drawer navigation then shows to two header
the below is code which i write
const StockStack = createNativeStackNavigator();
const StockScreen = ({ navigation }) => (
<StockStack.Navigator>
<StockStack.Screen name="StockList" component={StockList} />
<StockStack.Screen name="StockItemDetail" component={StockItemDetail}/>
</StockStack.Navigator>
)
and this the drawer navigation
return (
<Drawer.Navigator drawerContent={ props => <SideMenu {...props} /> }>
<Drawer.Screen name="StockScreenList" component={StockScreen} />
</Drawer.Navigator>
);
any can help you can i remove the drawer header
Related
I'm writing a React Native app, while using react-navigation package for navigating through the app screens.
On my app's home screen, there is a bottom tab bar with about 4-5 buttons, each leading to a different screen. Besides that, all of my app's screens contain a navigation drawer that leads to the rest of the screens. All the screens listed on the bottom tab bar are included in the navigation drawer as well.
App.js:
const App = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
)
}
DrawerNavigator.js:
const DrawerNavigation = createDrawerNavigator();
const DrawerNavigator = () => {
return (
<DrawerNavigation.Navigator>
<DrawerNavigation.Screen
name="ScreenA"
component={BottomTabNavigator} />
<DrawerNavigation.Screen
name="ScreenB"
component={ScreenB} />
<DrawerNavigation.Screen
name="ScreenC"
component={ScreenC} />
</DrawerNavigation.Navigator>
)
}
BottomTabNavigator.js:
const BottomTabNavigation = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<BottomTabNavigation.Navigator>
<BottomTabNavigation.Screen
name="ScreenA"
component={ScreenA} />
<BottomTabNavigation.Screen
name="ScreenB"
component={ScreenB} />
</BottomTabNavigation.Navigator>
)
}
My question is how can I sync between them?
Let's say on the navigation drawer I have ScreenA, ScreenB, and ScreenC, while on the bottom tab bar I have only Screen A and Screen B. I want to click on ScreenB in the drawer, and have ScreenB selected as well on the tab bar, and vice versa, clicking on ScreenB on the tab bar and have it selected too on the drawer.
Is such thing possible? How would you implement it?
I have a functional Drawer navigator that holds a Stack navigator as shown below:
function DrawerNavigator() {
return (
<Drawer.Navigator>
<Drawer.Screen
name="Categories"
component={CategoriesScreen}
... />
),
}}
/>
<Drawer.Screen
...
</Drawer.Navigator>
);
}
...
return (
<>
...
<NavigationContainer onReady={onLayoutRootView}>
...
<Stack.Screen
name="MealCategories"
component={DrawerNavigator}
options={{ headerShown: false }}
/>
While in the 'Favorites' screen, which is registered under the Drawer Navigator, when attempting to navigate to 'Categories' page which is registered under Stack navigator (but pointed to using Drawer navigator) using navigation.navigate(), there's no navigation animation.
const buttonPressHandler = () => {
navigation.navigate("Categories");
};
Yup it seems the drawer navigator has no support for screen animation. So it all looks great when using the drawer to navigate. But if navigating through links in the page or actions, theres no navigation animation between screens. Been hunting for hours now and I think its simply not implemented.
In my React Native project, I'm using React Navigation (5) with a custom drawer. The Drawer Navigator looks like this with some screens in it.
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />} >
</Drawer.Navigator>
How can I pass some additional props to CustomDrawerContent? let's say I have some data like user_type. How can I send it along with props?
let try this
const moreData = {}
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} moreData={moreData} />} >
</Drawer.Navigator>
then log your CustomDrawerContent props.
I am new in react native. I have a tab named 'Contacts' and I want to open drawer when user clicks on it. This below code opens the drawer screens when i clicked on the 'Contacts' tab. But i want to open Navigation Drawer.
Thank you so much in advance...
const Tabs = createMaterialBottomTabNavigator();
export default function bottomTab(){
return(
<NavigationContainer>
<Tabs.Navigator tabBarOptions={{activeTintColor:'#4267B2'}} >
<Tabs.Screen name="Home" component={Home} />
<Tabs.Screen name= "Contacts" component={DrawerNavigation}/>
</Tabs.Navigator>
</NavigationContainer>
)
}
const Drawer = createDrawerNavigator();
const DrawerNavigation = () => {
return(
<Drawer.Navigator>
<Drawer.Screen name="Setting" component={Setting}/>
<Drawer.Screen name="Notification" component={Notification}/>
</Drawer.Navigator>
)
}
Basically you need to use the following:
navigation.openDrawer();
If it not helping you show code of what you have already done and it will be easier to help.
so in react navigation v5 how to check if drawer open or not
not that i use custom drawer
drawerContent={(props) => <DrawerComponent {...props} />}
const isDrawerOpen = useIsDrawerOpen() i can not use this from
useIsDrawerOpen() is a Hook to detect if the drawer is open in a parent navigator.
For exemple in your view you can test if your drawer is open or not directly using this approach :
import { useIsDrawerOpen } from '#react-navigation/drawer';
const MainContainer = () => {
return (
<View style={(useIsDrawerOpen()) ? styles.conatinerOpenStyle : styles.containerClosedStyle}>
<Text>{console.log("Test drawer "+useIsDrawerOpen())}</Text>
</View>
);}
And it will indicate to you the state of your drawer.