Karl Karl - 1 year ago 107
CSS Question

How to 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.

Answer Source

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 are two:

  • apply justify-content: 'space-between' to the container
  • apply flex-grow: '1' to the middle flex item
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download