How to set DrawerItem on top of Drawer Screens - reactjs

Question

I created a drawer with screens but wanted to add also an image of the user at the top of the drawer. I used in the Drawer.Navigator the drawerContent option and used a custom function and called it. The problem is that the image is set on the bottom and not in the top. I've tried searching in the web but I didn't find a way to set it on top. Here is the code:
const Drawer = createDrawerNavigator()
const CustomDrawerContent=(props) =>{
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
icon={({color})=> <Image style={{ width: 90, height: 90, borderRadius: 400 / 2 }} source={{ uri: auth.currentUser.photoURL }}></Image>}
label=""
/>
</DrawerContentScrollView>
);
}
const DrawerNavigator = () => {
return (
<Drawer.Navigator initialRouteName='TabNavigator' drawerContent={CustomDrawerContent}>
<Drawer.Screen name='Início' component={TabNavigator}/>[enter image description here][1]
<Drawer.Screen name="Lista de Espera" component={PermissionsStackScreen} />
<Drawer.Screen name="Comunidade" component={CommunityStackScreen} />
<Drawer.Screen name='Análises em Espera' component={AwaitingStackScreen}/>
<Drawer.Screen name='Confirmar Análises' component={VerifyStackScreen}/>
<Drawer.Screen name='Análises Rejeitadas' component={RejectedStackScreen}/>
<Drawer.Screen name='Gerir Reagentes' component={ReagentStackScreen}/>
<Drawer.Screen name='Gerir Equipamentos' component={EquipmentStackScreen}/>
</Drawer.Navigator>
);
}
export default DrawerNavigator
I have also added the link of the how the code looks like.
[1]: https://i.stack.imgur.com/9b9f5.jpg
Any help would be useful!

Answer 1

Just simply change the order of the component here :
const CustomDrawerContent=(props) =>{
return (
<DrawerContentScrollView {...props}>
{/* Render image item first */}
<DrawerItem
icon={({color})=> <Image style={{ width: 90, height: 90, borderRadius: 400 / 2 }} source={{ uri: auth.currentUser.photoURL }}></Image>}
label=""
/>
{/* then render others menu item */}
<DrawerItemList {...props} />
</DrawerContentScrollView>
);
}