in my react-native application I'm rendering a menu drawer with some routes.
When this route is active, I would like to change the background color, improving the visual effect of the application. I am using drawerContentOptions to try to do this, but it is not working.
I put my whole code into snack
AppJs
<SafeAreaProvider>
<NavigationContainer>
<Drawer />
</NavigationContainer>
</SafeAreaProvider>
Drawer Navigator
<Drawer.Navigator
initialRouteName="Start"
drawerType="slide"
overlayColor="transparent"
contentOptions={{ backgroundColor: 'red' }}
drawerStyle={{ width: '45%', backgroundColor: '#1F1B33' }}
contentContainerStyle={{ flex: 1 }}
drawerContentOptions={{
activeBackgroundColor: 'red',
activeTintColor: 'red',
}}
drawerContent={(props) => <DrawerContent {...props} />}>
<Drawer.Screen name="Navigator" component={Navigator} />
</Drawer.Navigator>
DrawerContent
<DrawerContentScrollView {...props}>
<View>
<DrawerItem
label="Start"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Start')}
/>
<DrawerItem
label="Your Cart"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Cart')}
/>
<DrawerItem
label="Favorites"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Favorites')}
/>
<DrawerItem
label="Your Orders"
labelStyle={{ color: '#fff' }}
onPress={() => props.navigation.navigate('Orders')}
/>
</View>
</DrawerContentScrollView>
Stack.Navigator
<Stack.Navigator
screenOptions={{
headerTransparent: true,
headerTitle: null,
headerTitleAlign: 'left',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 60,
}}>
<Image
source={require('../assets/images/menu.png')}
style={{ height: 30, width: 30, margin: 30 }}
/>
</View>
</TouchableOpacity>
),
}}>
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Favorites" component={Favorites} />
<Stack.Screen name="Orders" component={Orders} />
<Stack.Screen name="Start" component={Start} />
</Stack.Navigator>
Can you tell me how do I make this work?
Thank you in advance!!
Related
<Drawer.Screen
name="CheckOutScreen"
component={CheckOutScreen}
options={({ navigation }) => ({
drawerItemStyle: { display: 'none' },
drawerIcon: () => (
<Feather
name="home"
size={20}
color={theme.colors.primary}
style={{ marginRight: 10 }}
/>
),
title: 'CheckOut',
headerStyle: {
borderBottomColor: 'yellow',
height: 90,
backgroundColor: theme.colors.primary,
},
headerTintColor: 'white',
headerTitleAlign: 'center',
headerRight: () => (
<TouchableOpacity onPress={() =>navigation.dispatch(DrawerActions.toggleDrawer())}>
<Feather
name="user"
size={30}
color="white"
style={{ marginRight: 10 }}
/>
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={navigation.goBack}>
<Feather
name="arrow-left"
size={30}
color="white"
style={{ marginLeft: 10 }}
/>
</TouchableOpacity>
),
})}
/>
I have tried navigation.dispatch(DrawerActions.toggleDrawer());
also navigation.dispatch(DrawerActions.openDrawer());
But none of them worked out.
Drawer gets open when i swipe right on the screen it opens but i want to open it on a button click.
kindly help me out
I was not able to change the activeTintColor and activeBackgroundColor of drawerItem in react-navigation 6, Eventhough I'm using those props on drawer item I can't see any changes in activeItem tintColor change in selected Item.Below here is the code that I'm using where I used the prop activeTintColor to set the active DrawerItem tint color but I don't see any changes in color and even I can't see which is active tab I'm on but navigation works fine.I am able to navigate to DrawerItem screens only thing it active Item which is selected doesn't seems applying activeTintColor etc
function DrawerNavigation() {
return (
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
headerShown: false
}}
drawerContent={(nav) => {
const { navigation } = nav;
let state = navigation.getState();
return (
<View style={{ flex: 1 }}>
<View style={{ alignItems: "center" }}>
<View
style={{
height: 100,
width: 100,
borderColor: "black",
borderWidth: 1,
borderRadius: 50,
marginVertical: 10,
overflow: "hidden"
}}
>
<Image
source={{
uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
}}
resizeMode="cover"
style={{ width: "100%", height: "100%" }}
/>
</View>
</View>
<View style={{ flex: 1 }}>
<DrawerItem
label="Home"
pressColor="red"
icon={() => (
<Image
source={require("../assets/home.png")}
style={{ height: 25, width: 25 }}
/>
)}
onPress={() => navigation.navigate("Home")}
activeTintColor="red"
/>
<DrawerItem
label="Profile"
pressColor="red"
icon={() => (
<Image
source={require("../assets/profile.png")}
style={{ height: 25, width: 25 }}
/>
)}
onPress={() => navigation.navigate("Profile")}
activeTintColor="red"
/>
<DrawerItem
label="Cart"
pressColor="red"
icon={() => (
<Image
source={require("../assets/cart.png")}
style={{ height: 25, width: 25 }}
/>
)}
onPress={() => navigation.navigate("Cart")}
activeTintColor="red"
/>
</View>
</View>
);
}}
>
<Drawer.Screen name="HomeStack" component={StackNavigation} />
</Drawer.Navigator>
</NavigationContainer>
);
}
i was facing a similar issue cause i be working with react-navigator 6.x but read the 5.x doc. To set the activeTintColor to all my screens i finnaly do it like that:
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
drawerStyle: {
backgroundColor: "grey",
width: "100%",
},
drawerActiveTintColor: "white",
drawerInactiveTintColor: "yellow",
}}
>
<Drawer.Screen
name="One"
component={OneStackScreen}
options={{
title: "One",
drawerIcon: () => (
<MaterialIcons name="home" size={24} color="white" />
),
}}
/>
<Drawer.Screen
name="Two"
component={TwoStackScreen}
options={{
title: "Ma page",
}}
/>
</Drawer.Navigator>
</NavigationContainer>
in your <Drawer.Navigator/> There is a property named option which takes an
object and in that object you can find the drawerActiveTintColor Property. That
can be used to set the activeTintColor and it will change the background color
as well.
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen}
options={{ drawerActiveTintColor: 'red' }}/>
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
<DrawerContentScrollView {...props}>
<View style={Styles.DrawerHeader}>
<View style={Styles.ProfileImg}>
{userPic ? (
<Image
source={{
uri: userPic
}}
resizeMode="cover"
style={{ width: "100%", height: "100%" }}
/>
) : (
<Image
source={{
uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
}}
resizeMode="cover"
style={{ width: "100%", height: "100%" }}
/>
)}
</View>
<Text style={Styles.ProfileText}>{user}</Text>
</View>
<View style={Styles.Divider}></View>
{state.routes.map((route) => {
return (
<DrawerItem
key={route.key}
icon={({ focused }) => (
<Icon name={listItemIcon} size={20} color={focused ? Colors.Primary : "black"} />
)}
label={({ color }) => <Text style={{ color }}>{route.name}</Text>}
focused={state.routes.findIndex((e) => e.name === route.name) === state.index}
activeTintColor={Colors.Primary}
onPress={() => navigation.navigate(route.name)}
pressColor={Colors.StatusbarColor}
/>
);
})}
</DrawerContentScrollView>
i am working on a react native 0.62 in which i have implemented drawer navigator. As per the documentation, i have properly added activeBackgroundColor, activeTintColor etc but as per the company's requirement, when the menu is active i wanted to add borderLeftColor also with activeBackgroundColor. i have tried using style property but it didn't work for me.
Mock Up:
My Current UI:
MainNavigator.js
<Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}} indicatorStyle={{
borderBottomWidth: 2,
borderBottomColor: 'red',
}}
>
<Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}} resizeMode="contain"/>
),
}}
/>
<Drawer.Screen name="My Profile" component={MyProfileStackScreen} options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('../assets/images/profile.png')} style={{ height: 16, width: 16 }} resizeMode="contain"/>
),
}} />
</Drawer.Navigator >
DrawerContent.js
<DrawerContentScrollView {...props} >
<DrawerItemList {...props}
/>
<DrawerItem
labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} activeBackgroundColor= "#F1F1F1" activeTintColor="#000000" inactiveTintColor= "#818181"
label="Logout"
icon={({ focused, color, size })=>{
return(
<Image source={require('../assets/images/logout.png')} style={{ height: 14.36, width: 14.36 }} resizeMode="contain"/>)
}}
onPress={() => {resetData(); props.dispatch({type:'AUTH_FAILURE', payload: ''}); props.dispatch(onClear())} }
/>
</DrawerContentScrollView>
Thank you in advance.
As of now the drawer navigation 5 doesnt support an active style. But you can wrap the icon in a View and add a border to it which would give give you something similar.
Not the perfect solution but will get you close to the expected output you have provided.
<Drawer.Screen
name="My Profile"
component={MyProfileStackScreen}
options={{
drawerIcon: ({ focused, size }) => (
<View
style={
focused
? {
borderLeftColor: 'red',
borderLeftWidth: 2,
paddingLeft: 5,
}
: null
}>
<Image
source={require('../assets/images/profile.png')}
style={{ height: 17.78, width: 16 }}
resizeMode="contain"
/>
</View>
),
}}
/>
I know I am too late, but may be helpful in future for someone
I achieved the design by doing like below,
here is my CustomDrawerComponent
I used props -> state object to identify the active route name
Then apply conditional styles to <DrawerItem style={{}}/>
import { createDrawerNavigator } from '#react-navigation/drawer';
import {DrawerItem,DrawerContentScrollView} from '#react-navigation/drawer';
const CustomDrawerContent = props => {
const {state} = props;
const {routes, index} = state;
//here we get the active route name
const focusedRoute = routes[index].name;
return (
<View style={{flex: 1}}>
<ProfileHeader />
<DrawerContentScrollView
{...props}
contentContainerStyle={{paddingTop: 0, flex: 1}}>
<DrawerItem
{...props}
label="Screen1"
style={
focusedRoute === 'Screen1' ? styles.itemActive : styles.itemInactive
}
labelStyle={{}}
icon={({}) => <Icon />}
onPress={() => {
props.navigation.navigate('Screen1');
}}
/>
<DrawerItem
{...props}
label="Screen1"
style={
focusedRoute === 'Screen2' ? styles.itemActive : styles.itemInactive
}
labelStyle={{}}
icon={({}) => <Icon />}
onPress={() => {
props.navigation.navigate('Screen2');
}}
/>
<DrawerItem
{...props}
label="Logout"
style={styles.itemInactive}
labelStyle={{}}
icon={({}) => <Icon />}
/>
</DrawerContentScrollView>
</View>
);
};
Here is my Root Drawer.Navigator setup
<Drawer.Navigator
drawerContent={props => <CustomDrawerContent {...props} />}>
// Drawer Screens
</Drawer.Navigator>
Please check screenshot
1 - Screenshot of Code
2 - Screenshot of Sidemenu
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
padding: 12,
color: 'white',
borderBottomWidth: 1,
borderBottomColor: '#aaaaaa',
backgroundColor:
global.currentScreenIndex === item.screenToNavigate
? '#c1c0c0'
: '#fff',
}}
key={key}
onStartShouldSetResponder={() =>
handleClick(key, item.screenToNavigate)
}>
{/* <View style={{ marginRight: 5, marginLeft: 10 }}>
<Icon name={item.navOptionThumb} size={25} color="#273983" />
</View> */}
<Text style={{ fontSize: 17, color: 'black', marginLeft: 10,}}>
{item.navOptionName}
</Text>
<View style={{ marginRight:5}}>
{/* <Icon name={item.navOptionThumb} size={25} color="#808080" /> */}
<Icon name={item.navOptionThumb} size={20} color="#273983" />
</View>
</View>
try this its worked for me (react navigation v6)
<DrawerNavigator.Screen
name="Home"
options={{
drawerIcon: ({color}) => (
<Icon name="md-home" color={color}
style={{ position: "absolute",right: 10,}}
/>
)
}}
/>
Use drawerLabel property
const SyncIconFunc = {
drawerLabel: config=>
<View style={{flexDirection:'row'}}>
<Text style={{color:Colors.bg}}>
Sync Data
</Text>
<Feather
onPress={() => alert("bell pressed")}
style={{ position:'absolute',right: 10}}
size={24}
color={Colors.bg}
name="bell"
/>
</View>
};
<Drawer.Navigator>
<Drawer.Screen name="Catalogues" component={FolderList}/>
<Drawer.Screen name="Sync Data" component={SyncData} options={SyncIconFunc}/>
<Drawer.Screen name="Notifications" component={FolderList}/>
</Drawer.Navigator>
I want to show label on left and drawerIcon on right but unable figure out how.
Here is code
<Drawer.Navigator
drawerContentOptions={{
contentContainerStyle: {
backgroundColor: Colors.primary,
height: "100%"
},
labelStyle: { color: "white" }
}}
>
<Drawer.Screen
name="HomeScreen"
component={Home}
options={{ drawerLabel: "Home" }}
/>
<Drawer.Screen
name="Channels"
component={Channels}
options={{
drawerIcon: () => (
<AntDesign
name="pluscircle"
size={20}
color="white"
/>
)
}}
/>
</Drawer.Navigator>
I would like to show "Channels" on left side and plus icon on right side
on your icon, style it with
style={{
alignSelf: "center",
position: "absolute",
right: 5,
}}
so your AntDesign will be like this
<AntDesign
style={{
alignSelf: "center",
position: "absolute",
right: 5,
}}
name="pluscircle"
size={20}
color="white"
/>
try with headerLeft and headerRight
headerLeft: () => (
<Icon
style={{padding: 10}}
onPress={() => {
consol.log("on press}}
color={'white'}
name="menu"
size={30}
/>
<Drawer.Navigator
drawerPosition="right"
drawerType="slide"
initialRouteName="Home"
drawerContent={() => <SideBar />}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="NewIndex" component={NewIndex} />
</Drawer.Navigator>