How to align drawer items at bottom in drawer navigation?

Question

I am using drawer navigation. I want to place logout and settings button at bottom of drawer navigation. I tried using marginTop but did not worked. I also tried position: 'aboslute' bottom: 0 but doesn't work.

Code:

<ScrollView>

          <View style={styles.usernameContainer}>
            <Text style={styles.username}>Ramesh Singh</Text>
            <Text style={styles.useremail}>ramesh@city-brokers</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/timeline.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Home</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/timeline.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Feed</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/groups.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Leads</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/lists.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Projects</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/people.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>My Team</Text>
          </View>

          <View style={styles.bottomDrawerItem}>
              <Image source={require('../../assets/images/people.png')} style={styles.drawerItemImage}/>
              <Text style={styles.drawerItemText}>Settings</Text>
          </View>

          <View style={styles.bottomDrawerItem2}>
              <Image source={require('../../assets/images/logout.png')} style={styles.drawerItemImage}/>
              <Text style={styles.drawerItemText}>Logout</Text>
          </View>

        </ScrollView>

CSS:

drawerItem: {
      marginLeft: 15, 
      marginTop: 25, 
      fontSize: 22, 
      fontWeight: '500', 
      color: 'black',
      flexDirection: 'row',
    },
    drawerItemImage: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    drawerItemText: {
      fontFamily: Fonts.SourceSansPro,
      fontSize: 18.7,
      fontWeight: "normal",
      fontStyle: "normal",
      lineHeight: 18.7,
      letterSpacing: 0.33,
      color: "#1d1d26",
      padding: 10,
      marginLeft: 25
    }

What I want:

What I am getting with above code:

The best way that I can think to do it is with two additional flex wrapper elements. One element will wrap the menu items you wish to have at the top. The other wrapper will hold the two items you want at the bottom. Then you can use the property "align-content: space-between" on to achieve the desired effect. You will need some additional properties on the new flex wrappers but this should help you get the effect you are looking for. — Eric, Jan 23 '19 at 17:57
found a better solution [here](https://stackoverflow.com/questions/50776453/how-to-add-extra-item-at-the-bottom-of-the-drawer-navigation-manually-like-logo) . — zulqarnain, Jun 16 '20 at 06:03

Pradnya Choudhari · Accepted Answer · 2019-01-23T20:44:41.010

Try using position: 'absolute' style property and then also use style bottom: 0 and remove setting and logout view out of the scrollview:

I tried this below code

<View style={styles.container}>
        <ScrollView>
          <View style={styles.usernameContainer}>
            <Text style={styles.username}>Ramesh Singh</Text>
            <Text style={styles.useremail}>ramesh@city-brokers</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Home</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Feed</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Leads</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Projects</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>My Team</Text>
          </View>

        </ScrollView>

          <View style={{ position: 'absolute', bottom: 0 }}>
            <View style={styles.bottomDrawerItem}>
              <Text style={styles.drawerItemText}>Settings</Text>
            </View>

            <View style={styles.bottomDrawerItem2}>
              <Text style={styles.drawerItemText}>Logout</Text>
            </View>
          </View>
      </View>

and this is your output:

How to align drawer items at bottom in drawer navigation?

1 Answers1