React native Drawer Navigator in dynamic image and name - react-native

Question

I am new in react native and I want to show data from server I used with below code and don't know how to use here fetch method for call api.
This is drawer navigator:
const AppDrawerNavigator = DrawerNavigator({
Logout: {
screen: Login,
navigationOptions: {
drawerLabel: 'Logout',
drawerIcon: () => (
<Icon name="sign-out" size={18} color="#fff" />
)
},
}
// Test: Test,
},
{
drawerBackgroundColor: "black",
contentComponent: CustomDrawerContentComponent,
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#fff',
activeBackgroundColor: '#f673d7',
itemStyle: {
fontSize: 18,
},
},
});
I want to use dynamic image and name in below component:
const CustomDrawerContentComponent = (props) => (
<View>
<ScrollView>
<View style={styles.profileBg}>
<ImageBackground style={{width: Platform.OS === 'ios' ? 190 : width/1.5, height: 210}} source = {require('../images/banner-2.jpg')}>
<View style={styles.profileHeader}>
<TouchableHighlight>
<View style={styles.profilepicWrap}>
<Image style={styles.profilePic}
source={require('../images/Female-Avatar.png')}
/>
</View>
</TouchableHighlight>
<Text style={styles.name}>Rahul Mishra</Text>
<Text style={styles.changePassword}><Icon name="map-marker" size={16} color="#fff" style={{paddingRight:5}} /> Miamibeach, FL</Text>
</View>
</ImageBackground>
</View>
<DrawerItems
{...props}
getLabel = {(scene) => (
<View style={{borderBottomWidth:1,borderBottomColor: "#fff",width:width/1.9}}>
<Text style={{color:'#fff',fontSize:18,paddingBottom:10,paddingTop:10}}>{props.getLabel(scene)}</Text>
</View>
)}
/>
</ScrollView>
</View>
);
In above code I used const AppDrawerNavigator for calling DrawerNavigator and for contentComponent I used CustomDrawerContentComponent so I am very confusing here how to use API method here.

Answer 1

You can create a component and call this in content component like below:
DrawerUserDetail is a separate component and you can code anything there as normally we are doing...That works for me.
contentComponent: (props) => (
<View>
<ScrollView>
<DrawerUserDetail navigation={props.navigation} />
<DrawerItems
{...props}
getLabel = {(scene) => (
<View style={{borderBottomWidth:0.5,borderBottomColor: "grey",width:width/1.9}}>
<Text style={{color:'#333',fontSize:18,paddingBottom:14,paddingTop:14}}>{props.getLabel(scene)}</Text>
</View>
)}
/>
<DrawerCustom navigation={props.navigation} />
</ScrollView>
</View>
)