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.
Related
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.
I want my component to render a TopTab Navigator on the top and also a Drawer Navigator at the same time.
So something like
<TopTab.Navigator>
<TopTab.Screen />
</TopTab.Navigator>
<Drawer.Navigator>
<Drawer.Screen />
</Drawer.Navigator>
However I'm getting an error of "Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen" Make sure each navigator is under a separate "ScreenContainer"
Why dont you try using it like this, drawerNavigator holds as the main wrapper and inside it topTab
const HomeScreen = () => {
return(
<TopTab.Navigator>
<TopTab.Screen />
</TopTab.Navigator>
)
}
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
This should work, feel free for doubts
You have to set Tab navigator inside drawer navigator, you can search to get better solutions like "how we use multiple navigator in react native?"
visit below link
https://dev.to/easybuoy/combining-stack-tab-drawer-navigations-in-react-native-with-react-navigation-5-da
Here is what I am trying to do in my app with react navigation:
There is a default bottom tab navigator.
The app will listen to changes in the data.
If there is a change in the data for any of the screens in the bottom tab navigator, trigger navigation.push() to refresh the component.
What I observed is that the default behavior of the bottom tab navigator is navigation.navigate()...i.e. unless I reload the app, the screens do not refresh themselves.
In short, how do I trigger navigation.push() in the tab navigator? e.g. in the sample code below, how do I set the navigation behavior?
Thanks a lot in advance!
//How do I trigger navigation.push() when each of the bottom tab is pressed?
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Pulled the following example from my code which solved the issue for me;
import { StackActions } from '#react-navigation/routers';
onPress={() => {
const pushAction =
StackActions.push('ProfileAnimal', { animal_id: item.id });
this.props.navigation.dispatch(pushAction);
this.props.navigation.navigate('ProfileAnimal', {animal_id: item.id});
};
After successfull loging im moving to this drawer.
const SalesRepDrawerNavigation = () => {
return (
<SalesRepDrawerNavigator.Navigator initialRouteName="SalesRepDashboardStack">
<SalesRepDrawerNavigator.Screen
name="SalesRepDashboardStack"
component={SalesRepDashboardStackNavigation}
options={{
headerTitle: 'Sales Rep Dashboard'
}}
/>
<SalesRepDrawerNavigator.Screen
name="Customers"
component={CustomerListScreen}
/>
<SalesRepDrawerNavigator.Screen
name="SalesOrderView"
component={SalesOrderStackNavigation}
options={{
}}
/>
</SalesRepDrawerNavigator.Navigator>
);
};
const SalesRepDashboardStackNavigation = () => {
return (
<SalesRepDashboardStackNavigator.Navigator key="test" headerMode="none" initialRouteName="SalesRepDashboard">
<SalesRepDashboardStackNavigator.Screen
name="SalesRepDashboard"
component={SalesRepDashboardScreen}
/>
<SalesRepDashboardStackNavigator.Screen
name="CreateSalesOrder"
component={CreateSalesOrderScreen}
/>
</SalesRepDashboardStackNavigator.Navigator>
);
};
then when i go to customer list screen and select a customer I want to move to create sales order screen and at the same time want to remove customer list route. I'm using react native with react navigation v5.
How can I do this?
Use it like:
In DrawerData component you will have to create a drawer item list (a custom component) and for navigation between the screens normally use the navigation.navigate('YOUR_SCREEN_NAME');
Add all your screens in the Stack.Navigator only. Drawer will have only the Home screen.
/*Drawer data is custom drawer item list*/
export function DrawerNav() {
return (
<Drawer.Navigator drawerContent={props => <DrawerData {...props} />}>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
);
}
const RootStackScreen = () => {
return (
<Stack.Navigator>
<>
<Stack.Screen
name="HomeScreen"
component={DrawerNav}
/>
<Stack.Screen
name="FirstScreen"
component={FirstScreen}
/>
<Stack.Screen
name="SecondScreen"
component={SecondScreen}
/>
</Stack.Navigator>
);
}
I am building a project in react native. I want to use a bottom tab navigator, but the problem i have is that it automatically shows all screens in the navigator.
I want to hide one of the screens from the bar on the bottom.
Try this on your screen that needs to be hidden
const Tab = createBottomTabNavigator();
<Tab.Navigator>
...
<Tab.Screen
name="screen2"
component={screen2}
options={{ tabBarButton: () => null }}
/>
...
</Tab.Navigator>