Image of Custom navigation drawer not closing

80 Views Asked by At

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

enter image description here

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 },
}
})
1

There are 1 best solutions below

3
On

Maybe your drawer icon dimensions are not fixed.

{
    Main: {
      screen: MainStack,
      navigationOptions: {
        drawerLabel: SCREEN_TEXT_HOME_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: 20, height: 20, tintColor: tintColor }}
          />
        )
      }
    }
  }

Updated: SafeAreaView and ScrollView might cause the issue in contentComponent