I am having an issue with my custom drawer navigation. I am using expo and everything works well on iOS but for the android, I have an image on the drawer. The image does not close when I close the drawer as shown in the pictures below. Any help would be greatly appreciated
const combineNavigation = createDrawerNavigator({
'first':{
screen: Main,
labelStyle:'blue',
navigationOptions:{
drawerIcon:()=> <FontAwesome5 name="parking" size={30} color='blue'/>
}
},
'second':{
screen:ParkingNavigation,
contentOptions:{
labelStyle:{
color:"#e91e63"
}
},
navigationOptions:{
drawerIcon:()=> <Image
style={{width:25, height:25}}
source={require('../assets/ru.jpg')}
/>
}
},
'third':{
screen:contact,
contentOptions:{
labelStyle:{
color:"blue"
}
},
navigationOptions:{
drawerIcon:()=> <MaterialIcons name="contacts" size={20} color='blue'/>
}
}
},{
contentComponent:(props) => (
<SafeAreaView style={{flex:1}}>
<View style={{height: 150,alignItems: 'center', justifyContent: 'center'}}>
<Image source={require ('../assets/icon.png')} style={{height:120, width:120, borderRadius:60}}/>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
),
contentOptions:{
activeTintColor: '#e91e63',
inactiveTintColor:'blue',
itemStyle: { marginVertical: 15 },
}
})
Maybe your drawer icon dimensions are not fixed.
Updated: SafeAreaView and ScrollView might cause the issue in contentComponent