Karl Karl - 2 months ago 22x
CSS Question

Make an item stick to the bottom using flex in react-native

Suppose this is the layout:

<View style={styles.container}>
<View style={styles.titleWrapper}>
<View style={styles.inputWrapper}>

<View style={styles.footer}>
<View style={styles.nextBtn}>
<Text style={styles.nextBtnText}>Next</Text>

I want to make the view with the styles of footer to position at the bottom of the screen. I tried giving the
property to the footer, but instead of positioning at the bottom, it positions it to the right side of the screen. How can I make the footer item stick to the end? Thank you.


In React Native, the default value of flexDirection is column (unlike in CSS, where the default is row).

Hence, in flexDirection: 'column' the cross-axis is horizontal and alignSelf will position items left/right.

To pin your footer to the bottom, there are several options. Here's one:

  • apply justifyContent: 'space-between' to the container