title: ReactNative drawerNavigation custom footer
body: <p>I have a drawer navigation where I am trying to put a footer on the bottom which would contain additional info (app version and logout link) ..</p>
  <p>This is my navigation container:</p>
  <pre><code>      &lt;NavigationContainer style={styles.drawer}&gt;
      &lt;Drawer.Navigator style={styles.drawer} drawerContent={props =&gt; &lt;CustomDrawerContent {...props} /&gt;}&gt;
  
        &lt;Drawer.Screen name=&quot;Home&quot; component={Home}
          options={{
            drawerIcon: ({ focused, size }) =&gt; (
              &lt;Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} /&gt;
            )
          }} /&gt;
  
        &lt;Drawer.Screen name=&quot;LoginScreen&quot; component={LoginScreen}
          options={{
            drawerIcon: ({ focused, size }) =&gt; (
              &lt;Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} /&gt;
            )
          }} /&gt;
      &lt;/Drawer.Navigator&gt;
    &lt;/NavigationContainer&gt;);
  </code></pre>
  <p>And this is the custom content:</p>
  <pre><code>    function CustomDrawerContent(props) {
    return (
      
      &lt;DrawerContentScrollView style={styles.drawer}  {...props}&gt;
        &lt;View style={styles.logoContainer}&gt;
          &lt;Image source={require(&quot;./assets/logo.png&quot;)} style={{ height: &quot;100%&quot;, width: &quot;100%&quot;, resizeMode: &quot;contain&quot; }} /&gt;
        &lt;/View&gt;
  
        &lt;SafeAreaView style={styles.container}&gt;
          &lt;View style={{flex: 1 }}&gt;
                &lt;DrawerItemList {...props} /&gt;
          &lt;/View&gt;
          &lt;TouchableOpacity style={{backgroundColor: 'red', flexDirection: 'row', alignItems: 'center'}}&gt;
                &lt;Text&gt;Log Out&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;/SafeAreaView&gt;
        &lt;/DrawerContentScrollView&gt;
        
    );
  }
  </code></pre>
  <p>How can I push the log out link to be fixed at the bottom?
  <a href="https://i.stack.imgur.com/6IYi1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6IYi1.png" alt="enter image description here" /></a></p>
  <p>Styles:</p>
  <pre><code> const styles = StyleSheet.create({
    img: {
      height: 40,
      width: 40,
      marginTop: 6,
      justifyContent: 'center',
      textAlignVertical: 'center',
    },
  
    logout : {
      backgroundColor: 'red' ,
      bottom: 0,
      position: 'absolute'
    },
  
    logoContainer: {
      height: 140,
      width: &quot;80%&quot;,
      marginTop: 20,
      marginBottom: 20,
      alignSelf: &quot;center&quot;,
    },
    drawer: {
      backgroundColor: 'yellow',
      flex:1
  
    },
    labelBottom : {
      position: 'relative',
    bottom:0
    },
  
    redBottom: {
    },
    scrollView: {
      backgroundColor: Colors.lighter,
    },
    engine: {
      position: 'absolute',
      right: 0,
    },
    body: {
      backgroundColor: Colors.red,
    },
    sectionContainer: {
      marginTop: 32,
      paddingHorizontal: 24,
    },
    sectionTitle: {
      fontSize: 24,
      fontWeight: '600',
      color: Colors.black,
    },
    sectionDescription: {
      marginTop: 8,
      fontSize: 18,
      fontWeight: '400',
      color: Colors.dark,
    },
    highlight: {
      fontWeight: '700',
    },
    footer: {
      color: Colors.dark,
      fontSize: 12,
      fontWeight: '600',
      padding: 4,
      paddingRight: 12,
      textAlign: 'right',
    },
  </code></pre>