So I had a navigation system in place already, and wanted to add a Drawer menu for specific navigations starting on the main shopping page once the user had logged in. The issue I am having is after following some directions online on how to have multiple navigations of different types the drawer buttons just simply don't do anything when clicked on. any insight or help is much appreciated.
I have the NavigationContainer on the app.js file, containing the DrawerMenu file, through which I imported the main StackNavigator file.
Main StackNavigator file
// Main Nav
import PasswordVerify from '../screens/PasswordVerify';
import HomeShopping from '../screens/HomeShopping';
import StorePage from '../screens/StorePage';
// Drawer Screens
import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';
const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
{/* Drawer Screens */}
<Stack.Screen name="ProfileIndex" component={ProfileScreen} />
<Stack.Screen name="MyListingsIndex" component={MyListingsScreen} />
<Stack.Screen name="SellerDashboardIndex" component={SellerDashBoardScreen} />
</Stack.Navigator>
DrawerMenu file
import { createDrawerNavigator } from '#react-navigation/drawer';
import Navigation from './StackNavigator';
const Drawer = createDrawerNavigator();
const DrawerMenu = () => {
return (
<Drawer.Navigator screenOptions={{headerShown: false}}>
<Drawer.Screen name="Profile" component={Navigation} />
<Drawer.Screen name="MyListings" component={Navigation} />
<Drawer.Screen name="SellerDashboard" component={Navigation} />
This is just what I interpreted from the guide I read and followed the best I could, and they had working examples, everything matches up except for the fact that when I pull out the Drawer menu, clicking the names there does nothing.
Thank you again for your time and help.
Tried implementing drawer navigation to my react-native app while I had another main navigation in place already for all non-drawer links. the result was the links on the drawer not responding at all.
I would understand your idea as follows:
You have 3 screens: PasswordVerify, HomeShopping, StorePage.
You have a Drawer with 3 screens: ProfileScreen, MyListingsScreen, SellerDashBoardScreen.
You want from PasswordVerify(or HomeShopping or StorePage) redirect to Drawer.
You want after redirect, you can see your drawer and can press(or slide) to display drawer menu.
And i have an idea for your case:
Define Drawer.
Use Drawer(defined) like a Stack.
Import Drawer in Stack.Navigator.
This is code:
const Drawer = createDrawerNavigator();
const DrawerNav = () => {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
<Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
<Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
</Drawer.Navigator>
);
};
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
<Stack.Screen name="DrawerNav" component={DrawerNav} />
</Stack.Navigator>
</NavigationContainer>
);
}
Related
I am working on a react native drawer navigation.
When I log in to the app, drawer opens, but when I logout and login again from different user and when I click my button I get the error:
ERROR The action 'Navigation/TOGGLE_DRAWER' was not handled by any navigator.
I just want to open this drawer on all the pages.
function DrawerRoot () {
return (
<Drawer.Navigator
initialRouteName='PublicHome'
drawerContent={(props) => <DrawerContent {...props} />}
drawerStyle={{ width: width - 100 }}
>
<Drawer.Screen name='PublicHome' component={PublicHome} />
</Drawer.Navigator>
)
}
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName='Drawer' headerMode='none'>
<Stack.Screen name='Drawer' component={DrawerRoot} />
<Stack.Screen name='PublicHome' component={PublicHome} options={options} />
<Stack.Screen name='PublicJobs' component={PublicJobs} options={options} />
</Stack.Navigator>
</NavigationContainer>
React Native
I have a stack Navigator inside a Drawer Navigator. Here Beneficiaries is a Stack Navigation with Home screen ,Add benificairy and view Beneficiary as Stack Screens. If i click on a button in this stack's home screen i navigate to Add Beneficiary screen and now if i go to other screen in drawer navigator and click this stack navigator option i see the add beneficiary screen but not the home screen of Stack Navigation. How can i achieve this?
Images are below:
Drawer Navigation
You can see the Beneficiary tab in this drawer
Home Page of Beneficiary Stack
When I click on Add Beneficiary screen, i see this as usual
But when i go to some other screen in drawer say profile and come back to this stack navigation of Beneficiary , I should see Home screen of this but im not seeing it if go to add beneficiary page and go directly to profile page.
Code
beneficiary stack
import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import AddBen from './AddBen';
import ViewBen from './ViewBen'
import BenHome from './BenHome';
const BenStack = (props) => {
const stack=createNativeStackNavigator()
return (
<stack.Navigator screenOptions={{headerShown:false}}>
<stack.Screen name='Home Ben'>
{()=> <BenHome {...props}/> }
</stack.Screen>
<stack.Screen name='Add Beneficiary'>
{()=> <AddBen {...props}/> }
</stack.Screen>
<stack.Screen name='View Beneficiary'>
{()=><ViewBen/>}
</stack.Screen>
</stack.Navigator>
)
}
export default BenStack
Drawer Navigation
const Drawer = (props) => {
const handleLogout=()=>{
setTimeout(() => {
props.setisloggedin(false)
props.setcustid('');
}, 500);
ToastAndroid.show("Logged out!",1000);
}
const Drawerr = createDrawerNavigator()
return (
<Drawerr.Navigator drawerContent={(props)=><DrawerContent {...props}/>}
screenOptions={{ drawerLabelStyle: {}, drawerActiveBackgroundColor: 'black', drawerActiveTintColor: 'white',headerTintColor:'black',headerTitleAlign:'center',headerShown:true,headerTitleStyle:{fontFamily:'',fontSize:24},headerRight:()=>(<MI name='logout' size={30} style={{marginRight:10,color:'red'}}/>) }}>
<Drawerr.Screen name='My Account' >
{()=><A {...props}/>}
</Drawerr.Screen>
<Drawerr.Screen name='Bank Transfers' >
{()=><B {...props}/>}
</Drawerr.Screen>
<Drawerr.Screen name='Profile' >
{() => <C isloggedin={props.isloggedin} setisloggedin={props.setisloggedin} {...props} />}
</Drawerr.Screen>
<Drawerr.Screen name='Beneficiaries' >
{() => <D {...props} />}
</Drawerr.Screen>
<Drawerr.Screen name='Bank Statement'>
{() => <G {...props} isloggedin={props.isloggedin} setisloggedin={props.setisloggedin} />}
</Drawerr.Screen>
<Drawerr.Screen name='Settings'>
{() => <E {...props} isloggedin={props.isloggedin} setisloggedin={props.setisloggedin} />}
</Drawerr.Screen>
<Drawerr.Screen name='Accounts List'>
{() => <H {...props} isloggedin={props.isloggedin} setisloggedin={props.setisloggedin} />}
</Drawerr.Screen>
</Drawerr.Navigator>
)
}
export default Drawer
PS: Kindly forgive my code formatting, I cant help it.
I've been programming in React Native for a short time, and I know little about react-navigation. After trying a lot I managed to use stack navigator with a custom drawer navigator (side menu), but this seems to be very strange because my stack is inside my menu drawer like a screen.
My stack:
const SignedInStack = () => (
<Stack.Navigator>
<Stack.Screen name='Confluence' component={Confluence} />
<Stack.Screen name='QRCode' component={Main} />
</Stack.Navigator>
)
In the DrawerMenu:
const DrawerMenu = () => (
<Drawer.Navigator
screenOptions={{ headerShown: false }}
drawerContent={(props) => <CustomDrawerContent {...props} />}
detachInactiveScreens={false}
>
<Drawer.Screen
name="SignedInStack"
component={SignedInStack}
options={{
drawerItemStyle: { height: 0 }
}}
/>
<Drawer.Screen
name="QRCode"
component={Main}
/>
<Drawer.Navigator/>
);
In the App.js:
const App = () => (
<NavigationContainer>
<DrawerMenu />
</NavigationContainer>
);
Previously I use my drawer menu inside my stack, but the app had navigation problems.
I'm trying to figure out, how can i create a custom navigation header component, which will look like this:
I have a few questions. How should i go about making these icons from a png file clickable? Should i extract them one by one from that file and make them clickable somehow? Assuming i have a clean layout of this header how can i set this to be my background of this header? How can i deliver this component to other people working on the same thing such that it will be easy for them to implement its navigations functions?
Assuming our stack navigator is in App.js file and it looks like that:
import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from "#react-navigation/stack";
import Home from "./screens/Home";
import Report from './screens/Report';
export default function App() {
const Stack = createStackNavigator();
return (
/* Nawigacja podstawowa, w stylu Stosu */
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home"
component={Home}
options={{title:'Strona Główna'}}
/>
<Stack.Screen name="Report" component={Report} />
</Stack.Navigator>
</NavigationContainer>
);
}
You can create this custom header as a component, say HeaderBar.js and then add this customer header to the screen/navigator in its options
Eg:
<Stack.Screen
name="Home"
component={Home}
title="Home"
options={{
title:'Strona Główna',
header: () => <HeaderBar />,
}}
/>
or add header in Stack.Navigator.
Eg:
<Stack.Navigator initialRouteName="Home" screenOptions={{header: () => <HeaderBar />}}>
I'm currently using the material-bottom-tabs to implement navigation in my mobile app.
For some odd reason, it isn't displayed correctly but cut off at the bottom of my screen.
This happens regardless of whether I activate gesture control (so the Android built-in navigation bar disappears) or not.
If I add padding to the style of my Tabs.Navigator, then the Tab-Navigation-Bar is still cut off, now by a white padding.
I tried to wrap my Tab.Navigator inside a SafeAreaView (from react-native-safe-area-context) but if I do this, I just get a plain white screen back.
This is my code:
import React, { Component } from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import DrawerHome from './DrawerHome';
import Bookmarks from './Bookmarks';
const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
//const insets = useSafeArea();
class App extends Component {
constructor(props) {
super(props);
this.state = {
userToken: 1, // set to 'null' in production state
};
}
render() {
return this.userToken === null ? (
<Stack.Screen name="LogIn" component={LoginScreen} />
) : (
<SafeAreaProvider>
<NavigationContainer>
<SafeAreaView>
<Tab.Navigator style={{ paddingBottom: '10%' }}>
<Tab.Screen
name="Current Schedule"
component={CarouselPage}
options={{
tabBarLabel: 'Current\nSchedule',
tabBarIcon: <Ionicons name="ios-calendar" size={20} />,
}}
/>
<Tab.Screen name="Resources" component={ResourceScreen} />
<Tab.Screen
name="Schedule Selection"
component={ScheduleSelectionScreen}
/>
<Tab.Screen name="About" component={AboutScreen} />
</Tab.Navigator>
</SafeAreaView>
</NavigationContainer>
</SafeAreaProvider>
);
}
}
export default App;
A screenshot of the display issue
Try this:
// ...
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Current Schedule"
component={CarouselPage}
options={{
tabBarLabel: 'Schedule',
tabBarIcon: ({}) => (
<Ionicons name="ios-calendar" size={20} />
),
}}
/>
// ...
</Tab.Navigator>
</NavigationContainer>
// ...
The bar isn't cut off. The reason the text was cut off was, because you put a newline in the tabBarLabel text. I recommend to choose shorter words for your tab labels.
The documentation does not seem to provide an option to increase the padding for the label to allow for longer text.