5

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

Improve this question

3 Answers 3

Reset to default
4

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" />
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

try with headerLeft and headerRight

 headerLeft: () => ( <Icon style={{padding: 10}} onPress={() => { consol.log("on press}} color={'white'} name="menu" size={30} />
Improve this answer

3 Comments

In V4x we use static in any component to do any option like headerShown:false Now in V5 How can i use it?
@yoel headerLeft? I guess this is only stack navigator's property
@OliverD within component receive props and then use props.navigation.setOptions({ headerShown: false })
-1 
 <Drawer.Navigator drawerPosition="right" drawerType="slide" initialRouteName="Home" drawerContent={() => <SideBar />}> <Drawer.Screen name="Home" component={HomeScreen} /> <Drawer.Screen name="NewIndex" component={NewIndex} /> </Drawer.Navigator>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.