Customize react-native drawer navigation

I want to create drawer navigation like that

enter image description here

I able to add icons but don’t know how to design right side like in the image

that’s my drawer navigator

 <Drawer.Navigator
          drawerContent={(props) => <CustomDrawer {...props} />}
          drawerStyle={{
            width: '80%',
          }}>
          <Drawer.Screen name={strings.NAV_HOME} component={StackComp} />
          <Drawer.Screen name={strings.NAV_MY_PROFILE} component={Proifle} />
          <Drawer.Screen name={strings.NAV_SETTING} component={Setting} />
          <Drawer.Screen
            name={strings.NAV_MANAGE_BOOKING}
            component={Booking}
          />
        </Drawer.Navigator>

and that’s my customize code

 <DrawerContentScrollView
        style={{backgroundColor: colors.themeColor, flex: 1}}
        {...props}>
        <View style={{flex: 1}}>
          <View
            style={{
              flex: 1,
              paddingTop: moderateScaleVertical(24),
            }}>
            <Image
              source={imagePath.logo}
              style={{marginLeft: moderateScale(16)}}
            />
            <TouchableOpacity
              onPress={() => navigation.navigate(strings.NAV_HOME)}
              style={styles.drawCont}>
              <Image source={imagePath.homeIcon} />
              <Text style={styles.text}>{strings.HOME}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </DrawerContentScrollView>

can someone tell me how can I design it like in the image

305 thoughts on “Customize react-native drawer navigation”

  1. Its like you read my mind! You seem to know so much about
    this, like you wrote the book in it or something.
    I think that you can do with a few pics to drive the message home a little bit, but other than that, this is
    fantastic blog. A great read. I will certainly be back.

    Reply
  2. Hi! Someone in my Facebook group shared this site with
    us so I came to look it over. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers!
    Outstanding blog and amazing design.

    Reply
  3. Magnificent items from you, man. I’ve have in mind your stuff previous to and you are just too
    fantastic. I actually like what you have received right here, certainly like what you’re saying and the best
    way through which you say it. You make it
    enjoyable and you still care for to keep it smart. I cant wait to read far
    more from you. That is really a great web site.

    Reply
  4. Hi there, I believe your web site could possibly be having browser
    compatibility problems. When I take a look at your site in Safari,
    it looks fine however, if opening in Internet Explorer, it
    has some overlapping issues. I just wanted to give you a quick heads up!
    Besides that, excellent website!

    Reply
  5. Undeniably imagine that which you stated. Your favourite justification appeared to be at the
    web the easiest thing to consider of. I say
    to you, I certainly get annoyed even as other people consider concerns that they plainly do not know about.
    You managed to hit the nail upon the top and also outlined out the entire thing without having side
    effect , other folks could take a signal.
    Will probably be again to get more. Thank you

    Reply
  6. Hello! I know this is kind of off topic but I was wondering if you knew where I could locate
    a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

    Reply
  7. Definitely believe that which you said. Your favorite reason appeared to be on the internet the simplest thing to be aware of.

    I say to you, I certainly get irked while people think about worries that they plainly
    don’t know about. You managed to hit the nail upon the top as well as defined out the
    whole thing without having side-effects , people can take a signal.
    Will likely be back to get more. Thanks

    Reply