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>
Related
I'm using the react native drawer navigator v6 and I would like to reduce the space between the items and also the space between icon and label, see screenshot:
Does somebody know how?
Thanks!
My custom drawer:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView
{...props}
contentContainerStyle={{ paddingTop: 0 }}
>
<View style={styles.logo}>
<Image source={require("../assets/images/logo.png")} />
</View>
<DrawerItemList {...props} style={{ paddingTop: 0, marginTop: 0 }} />
</DrawerContentScrollView>
);
}
And my drawer navigator:
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
screenOptions={{
gestureEnabled: true,
headerTitleAlign: "center",
headerStyle: {
backgroundColor: "#82bf4e",
borderBottomWidth: 0.5,
shadowColor: "transparent",
borderBottomColor: "#75ad46",
},
headerTitleStyle: {
fontSize: 18,
},
headerTintColor: "#fff",
headerLeft: () => <BackButton />,
}}
>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
header: () => <HeaderContainer />,
drawerItemStyle: { display: "none" },
}}
/>
<Drawer.Screen
name="Mein Team"
component={TeamScreen}
options={{
headerTitle: "Mein Team",
drawerIcon: () => <AntDesign size={20} name="team" />,
}}
/>
...
</Drawer.Navigator>
You can create custom navigator using
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
{/* screens */}
</Drawer.Navigator>
Adjust the spacing as you want.
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 have a project with a Stack and bottomTab navigator and I want to redirect to a stack navigator page from the bottomTabNavigator
Here is the code for my project:
Routes.js i.e Stack Navigator
<UserContext.Provider value={{userDetails, setUserDetails}}>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({scene, previous, navigation}) => {
const {options} = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return <Header title={title} />;
},
}}>
{userDetails ? (
<>
<Stack.Screen
name="home"
options={{title: 'Home'}}
component={BottomTabNavigator}
/>
<Stack.Screen
name="library"
component={Library}
options={() => ({
headerTitle: 'My Library',
})}
/>
<Stack.Screen
name="bookDetails"
component={BookDetails}
options={{title: 'Book Details'}}
/>
<Stack.Screen
name="reviews"
component={AllReviews}
options={{headerTitle: 'View all Reviews'}}
/>
</>
) : (
<Stack.Screen name="Login" component={Login} />
)}
</Stack.Navigator>
</UserContext.Provider>
bottomTabNavigator.js:
<Tab.Navigator
tabBarOptions={{activeTintColor: 'green', style: {height: tabBarHeight}}}>
<Tab.Screen
name={'Home'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="home" size={27} color={color} />
),
}}
/>
<Tab.Screen
name={'Search'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="search1" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'My Library'}
component={Library}
options={{
tabBarIcon: ({color}) => {
return (
<View
style={{
position: 'absolute',
bottom: 7,
height: 65,
width: 65,
borderRadius: 65,
backgroundColor: 'green',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
}}>
<AntDesign name="book" size={40} color={'white'} />
</View>
);
},
}}
/>
<Tab.Screen
name={'Browse'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="earth" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'More'}
component={More}
options={{
tabBarIcon: ({color}) => (
<Feather name="more-horizontal" size={30} color={color} />
),
}}
/>
</Tab.Navigator>
What I want to do is when I tap on My Library in the tabNavigator the headerTitle still says home, I want it to say ""
Here is how I tried to achieve this:
useLayoutEffect(() => {
navigation.setOptions({headerTitle: 'My Library'});
}, [navigation, route]);
Any help is appreciated
Thanks
I tried doing it automatically but I couldn't figure it out, but what I did was use my custom header component on each screen and hardcode the title of the screen, so the process may not be as efficient as letting react navigation do all the work, but it works fine for me
One workaround you can use is to hide the header in the Home Component of your Stack navigator. You can then create custom headers for each of the tab screens.
in my app home screen I want to custom the header to have two icons in left and right which can be done using:
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: '',
headerLeft: () => (
<View style={{ marginLeft: 10 }}>
<Icon.Button
name="ios-menu"
size={25}
color="#000000"
backgroundColor={COLORS.primary}
onPress={() => navigation.openDrawer()}
/>
</View>
),
headerRight: () => (
<View style={{ marginLeft: 10 }}>
<Icon.Button
name="location-outline"
size={25}
color="#000000"
backgroundColor={COLORS.primary}
onPress={() => navigation.openMap()}
/>
</View>
),
}} />
</HomeStack.Navigator>
I want to add additional but to be in the center which will be customized based on my needs, but I have no idea how to implement that as there is nothing called headerCneter:
Perhaps you can take advantage of the header option inside the stack navigator? You can then use the route params to customize your header from there.
You can pass react component in headerTitle:
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: () => {
return (
<View style={st.horizontalRow}>
<LeftIcon />
<TextInput
placeholder="search"
/>
<RightIcon />
</View>
);
},
headerTitleAlign: 'left',
headerTitleContainerStyle: {
left: 40,
right: 0,
},
}} />
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!!