I need to add a logout button in a drawer with the React Navigation drawer tried doing this:
<Drawer.Navigator>
<Drawer.Screen name="Sales" children={CreateHomeStack} />
<Drawer.Screen name="Items" component={ItemsScreen} />
<Drawer.Screen name="Categories" component={CategoriesScreen} />
<Button>
<Text>LOGOUT</Text>
</Button>
</Drawer.Navigator>
But I get an error saying
A navigator can only contain screen components...
so how can I add buttons to a Drawer Navigator?
With respect to 5.x documentation you need to define custom component and override/pass it with drawerContent props where you can push your screen routes plus your custom route items.
Here is code how to add custom ReactElement/Component:
<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
</DrawerContentScrollView>
)
}}>
<Drawer.Screen name="Home" component={Home}/>
<Drawer.Screen name="New Project" component={NewProject} />
</Drawer.Navigator>
Here you are overriding default drawer container with you component code
This(<DrawerItemList {...props} />) line of code render you screen's
And rest is your area where custom code for drawer container will added.
Related
I want to navigate from one inner screen to third tab of Bottom Tab Navigation.
Here is my Stack Navigator:
<Navigator
screenOptions={{
headerShown: false,
animationEnabled: true,
orientation: 'portrait',
}}>
<Screen name="BottomTabs" component={BottomTabs} />
<Screen
name="CreateWorkout"
component={CreateWorkout}
options={horizontalAnimation}
/>
<Screen
name="NewWorkout"
component={NewWorkout}
options={horizontalAnimation}
/>
<Screen
name="StartWorkout"
component={StartWorkout}
options={horizontalAnimation}
/>
</Navigator>
Here is my Bottom Tab Navigator:
const BottomTabs = () => {
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="RootHome" component={RootHome} />
<Stack.Screen name="Create" component={CreateWorkoutScreen} />
<Stack.Screen name="Progress" component={MyProgressScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
};
I want to navigate from "StartWorkout" to "Progress" screen in Bottom Tabs.
navigation.navigate('BottomTabs', {screen: 'Progress'});
Any help can be appreciated.
I have tried this code it does navigate to that particular screen but it hides the BottomTabs
I think that to do this, you have to put the "StartWorkout" screen inside the "BottomTabs" component, so it would navigate to the "Progress" screen without hiding the bottom tabs.
I am trying to open drawer from homeScreen. drawer is opening when I swipe right but. I want to open Draer onPress of menu Icon. But Its not working. I used openDrawer, toggleDrawer but nothing work.
here is my code
function MyDrawer() {
return (
<Drawer.Navigator initialRouteName="homeScreen">
<Drawer.Screen name="homeSreen" component={homeScreen}
options={{
headerLeft: () => <Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => navigation.toggleDrawer()}
/>
}}
/>
</Drawer.Navigator>
);
}
function App({ navigation }) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="splashScreen" component={splashScreen} options={{headerShown: false}} />
<Stack.Screen name="loginScreen" component={loginScreen} options={{headerShown: false}} />
<Stack.Screen name="homeScreen" component={MyDrawer} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
in react-navigation V5
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());
Try with adding navigation in function MyDrawer()
like this function MyDrawer({navigation}) {...}
You can use this.props.navigation.openDrawer() to open drawer
<TouchableOpacity
onPress={() => {
this.props.navigation.openDrawer();
}}>
<Icon name="bars" size={21} color="rgb(112, 112, 112)" />
</TouchableOpacity>
I'm trying to make a nested navigation in my React Native App
Stack Navigator
Screen1
Screen2
Tab Navigator
a. Screen 3
b. Screen 4
Tab Navigator exists inside Screen 2 components.
App.js
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{isLoggedin ? (
<>
<Stack.Screen name="Dashboard" component={Dashboard} />
</>
) : (
<>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="LoginUser" component={LoginUserName} />
</>
)}
{/* <Stack.Screen name="Documentaiton" component={LoginUserName} /> */}
</Stack.Navigator>
</NavigationContainer>
);
export default App;
Dashboard.js
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Home} />
</Tab.Navigator>
);
}
export default Dashboard;
Home.js
return (
<View style={{ flex: 1, backgroundColor: colors.white }}>
<Text> TEST </Text>
</View>
);
}
export default Home;
I'm getting an error regarding exporting, since its components, could the issue be that I'm doing nesting navigation between components with exporting methods?
Let's say I have 3 pages. Home, Settings, Page.
I have
<BottomTab.Navigator>
<BottomTab.Screen name="Home" component={HomeScreen}/>
<BottomTab.Screen name="Settings" component={SettingsScreen}/>
<BottomTab.Screen name="Page" component={PageScreen}/>
</BottomTab.Navigator>
All 3 of them are shown in bottom navigation.
I want to access Home and Settings from bottom navigation and Page from link within Home page.
My question is there a way to hide Page from bottom navigation but still link to it from other pages and pass props and data to it?
I tried removing Page from <BottomTab.Screen> but then I can't use navigation.navigate("Page") to navigate to page, and I need this so I can pass props and data to that page
Here is some code from app. This code is generated with expo
// App.js
render (
<NavigationContainer
ref={containerRef}
initialState={initialNavigationState}
>
<Stack.Navigator>
<Stack.Screen name="Root" component={BottomTabNavigator} />
</Stack.Navigator>
</NavigationContainer>
</View>
)
//bottomTabNavigator component
<RootStack.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
<RootStack.Screen
name="Home"
component={HomeScreen}
options={{
title: "Get Started",
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-code-working" />
),
}}
/>
<RootStack.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarVisible: false,
title: "Your Profile",
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-book" />
),
}}
/>
</RootStack.Navigator>
Thank you
I'm not sure if I understood you correctly, but i think this is what you are looking for.
https://reactnavigation.org/docs/stack-navigator/
After installing everything, you can do something like this
const RootStackNavigator = () => {
return(
<RootStack.Navigator>
<RootStack.Screen name="main" component = {BottomStackScreen}/>
<RootStack.Screen name="Page" component={PageScreen} />
</RootStack.Navigator>
)
}
So, in your code you can switch your app.js to:
<Stack.Navigator>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen name="Page" component={PageScreen} />
</Stack.Navigator>
Then you can navigate to the Page by using this.props.navigation.navigate("Page");
Navigating to List screen, and from there to Item, I would expect back button to return me to List, but instead it returns me to the initial scene Home.
I have a very simple navigation setup:
<Stack key="root">
<Drawer
key="drawer"
contentComponent={DrawerContent}
drawerWidth={300}
>
<Scene key="home" component={HomeScreen}/>
<Scene key="list" component={ListScreen}/>
<Scene key="item" component={ItemScreen} back />
</Drawer>
</Stack>
And a list of simple buttons in the DrawerContent component like this:
<TouchableHighlight onPress={Actions.home}>
<Text>Home</Text>
</TouchableHighlight>
The ListScreen includes buttons that call this:
Actions.push('item')