React native Drawer Navigator in dynamic image and name

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.

score 1 · Answer 1 · answered Feb 06 '19 at 12:34

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>
  )

React native Drawer Navigator in dynamic image and name

1 Answers1