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.
Related
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,
},
}} />
I'm using react navigation 5 to build my app navigation system.
I want to add a link to open Notifications scree:
I created a RenderHeaderRight component to override the right component of all my stacks
navigation :
const RenderHeaderRight = ({navigation}) => {
return (
<View style={{flexDirection: 'row-reverse'}}>
<TouchableHighlight
underlayColor={COLORS.DEFAULT}
style={styles.iConMenuContainer}
onPress={() => navigation.openDrawer()}>
<Image source={menu} style={styles.iConMenu} />
</TouchableHighlight>
<TouchableHighlight
underlayColor={COLORS.DEFAULT}
style={styles.notificationsIconContainer}
onPress={() => navigation.navigate('Notifications')}>
<>
<Image source={notifications} style={styles.notificationsIcon} />
<Image source={notifMark} style={styles.badge} />
</>
</TouchableHighlight>
</View>
);
};
In my HomeStackScreen i'm using the RenderHeaderRight :
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
initialRouteName="Home"
headerMode="screen"
mode="modal"
screenOptions={{
headerStyle: {
backgroundColor: COLORS.WHITE,
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
borderBottomWidth: 0,
},
headerTintColor: COLORS.GREY,
headerTitleStyle: {
fontFamily: 'Montserrat-SemiBold',
fontWeight: '600',
fontSize: 18,
},
}}>
<HomeStack.Screen
name="Home"
component={Home}
options={{
title: 'Expanded',
headerLeft: () => <RenderHeaderLeft />,
headerRight: () => <RenderHeaderRight navigation={navigation} />,
headerTitleAlign: 'left',
}}
/>
<HomeStack.Screen name="HomeDetails" component={HomeDetails} />
</HomeStack.Navigator>
);
When i click on the Header right button to open the Notifications screen i got an error :
The action 'NAVIGATE' with payload {"name":"Notifications"} was not handled by any navigator.
Where shoud i create the stack navigation of Notifications screen ?
I triend to add the notifications like this :
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
initialRouteName="Home"
headerMode="screen"
mode="modal"
screenOptions={{
headerStyle: {
backgroundColor: COLORS.WHITE,
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
borderBottomWidth: 0,
},
headerTintColor: COLORS.GREY,
headerTitleStyle: {
fontFamily: 'Montserrat-SemiBold',
fontWeight: '600',
fontSize: 18,
},
}}>
<HomeStack.Screen
name="Home"
component={Home}
options={{
title: 'Expanded',
headerLeft: () => <RenderHeaderLeft />,
headerRight: () => <RenderHeaderRight navigation={navigation} />,
headerTitleAlign: 'left',
}}
/>
<HomeStack.Screen name="HomeDetails" component={HomeDetails} />
<HomeStack.Screen
name="Notifications". // add the screen here
component={Notifications}
options={{headerShown: false}}
/>
</HomeStack.Navigator>
);
Removed the unnecessary styling / images
From my understanding you need to have a root Drawer.Navigator and from inside your Home screen, you need a Stack.Navigator there
This article explains the details of combining react-native-navigators
import React from "react"
import { TouchableHighlight, View, Text } from "react-native"
import { NavigationContainer } from "#react-navigation/native"
import { createDrawerNavigator } from "#react-navigation/drawer"
import { createStackNavigator } from "#react-navigation/stack"
const RenderHeaderRight = ({ navigation }) => {
return (
<View style={{ flexDirection: "row-reverse" }}>
<TouchableHighlight onPress={() => navigation.openDrawer()}>
<View>
<Text>Menu</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => navigation.navigate("Notifications")}>
<>
<View>
<Text>Image 1</Text>
</View>
<View>
<Text>Image 2</Text>
</View>
</>
</TouchableHighlight>
</View>
)
}
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
const Notifications = () => (
<View>
<Text>Notifications</Text>
</View>
)
const Home = () => (
<View>
<Text>Home</Text>
</View>
)
const NotificationsScreen = () => (
<View>
<Text>Notifications Screen</Text>
</View>
)
const HomeScreen = () => (
<View>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={({ navigation }) => ({
title: "Home",
headerRight: () => <RenderHeaderRight navigation={navigation} />,
})}
navigationOptions={({ navigation }) => ({
headerTitleAlign: "left",
})}
/>
<Stack.Screen name="Notifications" component={Notifications} />
</Stack.Navigator>
</View>
)
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
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>
Using react navigation 5, I want to create a dynamic map for all my Drawer Screens, but the header is not shown with code:
<NavigationContainer>
<Drawer.Navigator
drawerContent={props => <DrawerContent {...props} />}>
{stackNavigItens.map((props, r) => (
<Drawer.Screen
key={r.name}
name={r.name}
component={({navigation}) => (
<Stack.Navigator
initialRouteName="Home"
headerMode="screen"
screenOptions={{
headerTitle: r.label,
headerStyle: {
backgroundColor: '#2e72e8',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
{...props}>
<Stack.Screen
name={r.name}
component={r.component}
options={{
title: r.label,
headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#2e72e8"
onPress={() => {
navigation.openDrawer();
}}
/>
),
}}
{...props}
/>
</Stack.Navigator>
)}
{...props}
/>
))}
</Drawer.Navigator>
</NavigationContainer>
If I use every createStackNavigator in a const like below, and then call inside component of the Drawer the header shows correctly, I don't know Why ? I think maybe because of the {navigation} arrow function, but don't work too.
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#2e72e8',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#2e72e8"
onPress={() => {
navigation.openDrawer();
}}
/>
),
}}
/>
</HomeStack.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>