Make an item stick to the bottom using flex in react-native
I would use the following approach:
<View style={styles.container}>
<View style={styles.contentContainer}> {/* <- Add this */}
<View style={styles.titleWrapper}>
...
</View>
<View style={styles.inputWrapper}>
...
</View>
</View>
<View style={styles.footer}>
...
</View>
</View>
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
titleWrapper: {
},
inputWrapper: {
},
contentContainer: {
flex: 1 // pushes the footer to the end of the screen
},
footer: {
height: 100
}
});
This way the styles of titleWrapper
and inputWrapper
can be updated without breaking the layout of your app and the components themselves are easier to re-use :)
In React Native, the default value of flexDirection
is column
(unlike in CSS, where it is row
).
Hence, in flexDirection: 'column'
the cross-axis is horizontal and alignSelf
works left/right.
To pin your footer to the bottom, apply justifyContent: 'space-between'
to the container