How to put an image in a react-native drawer? - react-native

Question

I am using the #react-navigation/native library. I have a drawer with some screens in them. I can click on the links and navigate to the appropriate screen. I would like to place an image above the links in the drawer. I am using the property drawerContent to do this. However, when I do this it removes the links. I cant figure out how to have the links and the image above the links in the drawer. What is the correct way to do this? Here is some code for my drawer with the drawerContent.
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Screen1"
drawerContent={() => (
<View style={{height: "10%"}}>
<Image
style={{width: "90%"}}
resizeMode="contain"
source={require('../../../assets/new-logo/textSide.png')}/>
</View>
)}
screenOptions={ ({navigation}) => ({
drawerContainerStyle: {paddingTop: 100},
drawerLabelStyle: {
fontSize: KbStyles.properties.drawerLabelSize,
color: "white"
},
headerTintColor: {color: KbStyles.properties.white},
headerStyle: {
backgroundColor: KbStyles.properties.black
},
headerTitleStyle: {
fontSize: KbStyles.properties.headerSize,
color: "white"
},
headerLeft: () => (
<TouchableWithoutFeedback
onPress={() => {navigation.toggleDrawer()}}>
<Image
resizeMode="contain"
style={{height: "50%"}}
source={require("../../../assets/menu.png")}
/>
</TouchableWithoutFeedback>
),
drawerActiveBackgroundColor : KbStyles.properties.red,
drawerActiveTintColor: KbStyles.properties.white,
drawerStyle: {
backgroundColor: "black",
width: 300
}
})}
>
<Drawer.Screen name="Screen1" component={Screen1} />
<Drawer.Screen name="Screen2 component={Screen2} />
<Drawer.Screen name="Screen3" component={Screen3} />
</Drawer.Navigator>
</NavigationContainer>
Here is also an image showing what I would like to achieve.
What is the correct way to do this?

Answer 1

You can try this
Under the Drawer.Navigator you can use drawerContent as,
drawerContent={(props)=> {
return(
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<ImageBackground source={require("../Assets/Vrda1img2.jpg")} style={{justifyContent:"space-between",alignItems:"center",padding:20,marginBottom:20,backgroundColor:"rgb(0,0,0)",borderBottomWidth:2,borderColor:Colors.secondary}} imageStyle=
{{opacity:0.4}}>
<Image source={require("../Assets/vector.png")} style={{width:70,height:70,borderRadius:35,borderWidth:2,borderColor:Colors.white}}/>
<Text style={{fontSize:20,fontWeight:"bold",color:Colors.white}}>{userDetail?userDetail.name:"Not Available"}</Text>
<Text style={{color:Colors.light}}>{userDetail?userDetail.email:"Not Available"}</Text>
</ImageBackground>
<DrawerItemList {...props}/>
</DrawerContentScrollView>
<TouchableOpacity onPress={()=>{logout()}} style={{position:"relative",right:0,left:0,bottom:5,backgroundColor:"rgb(231,230,230)"}}>
<Text style={{backgroundColor:"rgba(162,160,160,0.29)",width:"100%",height:40,textAlign:"center",paddingTop:8}}><SimpleLineIcons name={"logout"} size={15} color={Colors.primary}/> LogOut</Text>
</TouchableOpacity>
</View>
)
}
}
I give you the reference of my code where you can add Image under the Image background you can also use Uri to add an image as a link.