<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
Related
I can change the Header Title dynamically but that changes the title in the tab as well.
How can I change the title on the screen without affecting the title in the tab?
This is my navigator -
<Tab.Screen
name="Lists"
component={Lists}
options={{
title: "Lists",
headerShown: true,
headerLeft: () => (
<Pressable
style={{ paddingLeft: 16 }}
onPressIn={() => console.log("Filter")}
hitslop={5}
>
<Ionicons name="filter" size={28} color={"#faf2c4"} />
</Pressable>
),
headerRight: () => (
<Pressable
style={{ paddingRight: 16 }}
onPressIn={() => console.log("Search")}
hitslop={5}
>
<Ionicons name="search" size={28} color={"#faf2c4"} />
</Pressable>
),
headerStyle: {
backgroundColor: "#0292b7",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
headerTitleStyle: {
color: "#faf2c4",
fontFamily: "Quicksand_600SemiBold",
},
headerTitleAlign: "center",
}}
/>
This is how I dynamically change the Title in the screen component -
const [Title, setTitle] = useState("noLists");
useEffect(() => {
navigation.setOptions({ title: Title });
}, []);
Use tabBarLabel in options:
<Tab.Screen
name="Lists"
component={Lists}
options={{
tabBarLabel:"Lists",
title: "Lists",
headerShown: true,
headerLeft: () => (
<Pressable
style={{ paddingLeft: 16 }}
onPressIn={() => console.log("Filter")}
hitslop={5}
>
<Ionicons name="filter" size={28} color={"#faf2c4"} />
</Pressable>
),
headerRight: () => (
<Pressable
style={{ paddingRight: 16 }}
onPressIn={() => console.log("Search")}
hitslop={5}
>
<Ionicons name="search" size={28} color={"#faf2c4"} />
</Pressable>
),
headerStyle: {
backgroundColor: "#0292b7",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
headerTitleStyle: {
color: "#faf2c4",
fontFamily: "Quicksand_600SemiBold",
},
headerTitleAlign: "center",
}}
/>
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 have an issue when changing screens. If i pressed in the middle of the tabIcon it's not navigating to the screen but if i clicked a little bit left further the screen changes. I think that like there is a sort of a View in absolute above that is preventing me from pressing (Element inspector).
I have my code like this :
<Tab.Navigator
initialRouteName="HomeNavigator"
tabBarOptions={{
showLabel: false,
keyboardHidesTabBar: true,
labelStyle: {
color: 'red'
},
style: {
backgroundColor: '#008D36' ,
paddingTop: 10,
paddingBottom: 10,
minHeight: 65,
color: '#ffffff',
borderTopColor: '#ffffff',
justifyContent: 'flex-start',
alignItems: 'flex-start'
, }
}}
>
<Tab.Screen
name="Home"
component={HomeNavigator}
options={(navigation, route) => ({
title: 'Home',
tabBarIcon: ({ props, focused }) => (
<TouchableWithoutFeedback {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={LOGO1} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home</Text>
</View>
</TouchableWithoutFeedback>
)
})}
/>
<Tab.Screen
name="Home2"
component={HomeNavigator}
options={(navigation, route) => ({
title: 'Home2',
tabBarIcon: ({ props, focused }) => (
<TouchableWithoutFeedback {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={LOGO2} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home2</Text>
</View>
</TouchableWithoutFeedback>
)
})}
/>
</Tab.Navigator>
I think that flex: 2 is out of place at this position of the tabBarIcon. You can use alignItems or justifyContent without telling the view for flex.
<TouchableWithoutFeedback {...props} >
<View style={{alignItems: 'center'}}>
<Image source={LOGO1} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home</Text>
</View>
</TouchableWithoutFeedback>
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!!
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>