ReactNative drawerNavigation custom footer - react-native

Question

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) ..
This is my navigation container:
<NavigationContainer style={styles.drawer}>
<Drawer.Navigator style={styles.drawer} drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={Home}
options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} />
)
}} />
<Drawer.Screen name="LoginScreen" component={LoginScreen}
options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} />
)
}} />
</Drawer.Navigator>
</NavigationContainer>);
And this is the custom content:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView style={styles.drawer} {...props}>
<View style={styles.logoContainer}>
<Image source={require("./assets/logo.png")} style={{ height: "100%", width: "100%", resizeMode: "contain" }} />
</View>
<SafeAreaView style={styles.container}>
<View style={{flex: 1 }}>
<DrawerItemList {...props} />
</View>
<TouchableOpacity style={{backgroundColor: 'red', flexDirection: 'row', alignItems: 'center'}}>
<Text>Log Out</Text>
</TouchableOpacity>
</SafeAreaView>
</DrawerContentScrollView>
);
}
How can I push the log out link to be fixed at the bottom?
Styles:
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: "80%",
marginTop: 20,
marginBottom: 20,
alignSelf: "center",
},
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',
},

Answer 1

Instead of style prop, you may use contentContainerStyle:
<DrawerContentScrollView
...
contentContainerStyle={styles.drawerContentContainer}
/>
while the style is something like:
drawerContentContainer: {justifyContent: 'space-between', flex: 1},

Answer 2

You can use a marginTop: 'auto' style for TouchableOpacity, also use the contentContainerStyle for scrollviews
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView contentContainerStyle={styles.drawer} {...props}>
<View style={styles.logoContainer}>
<Image source={require("./assets/logo.png")} style={{ height: "100%", width: "100%", resizeMode: "contain" }} />
</View>
<SafeAreaView style={{flex:1}}>
<View>
<DrawerItemList {...props} />
</View>
<View style={{ marginTop: 'auto' }}>
<TouchableOpacity
style={{
backgroundColor: 'red',
flexDirection: 'row',
}}>
<Text>Log Out</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</DrawerContentScrollView>
);
}

Answer 3

I solved this by wrapping all the contents of my DrawerComponent inside a View element and then adding height: '100%' in the style prop of the root View element.
And finally adding marginTop: 'auto' will push the FooterComponent at the bottom (or you can use {position: 'absolute', bottom: 0} for style prop of FooterComponent).
<View style={{height: '100%'}}>
<HeaderComponent />
<DrawerItems {...props} />
<View style={{marginTop: 'auto'}}>
<FooterComponent />
</View>
</View>