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

Question

Suppose this is the layout:

    
        ...
        ...
    
             


        

Answer 1

In react native, there are some properties like position: 'absolute', bottom: 0, which you will want to give to your button view

Answer 2

embed other content in a scrollview

<View style={styles.container}>

  <ScrollView> {/* <- Add this */}
        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>
    </ScrollView>

    <View style={styles.footer}>
        ...
    </View>
</View>    

Answer 3

To fix a View to the bottom, simply use: marginTop: 'auto' .

This worked for me after searching like an hour on the net. I tried experimenting and it worked!

Answer 4

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 :)

Answer 5

Consider a screen structure

<View style={styles.container}>
  <View style={styles.body}> ... </View>
  <View style={styles.footer}>...</View>
</View>

You can do it cleanly using Flexbox approach utilizing flex-grow.

const Styles = StyleSheet.create({
  container:{
    flexDirection: 'columm', // inner items will be added vertically
    flexGrow: 1,            // all the available vertical space will be occupied by it
    justifyContent: 'space-between' // will create the gutter between body and footer
  },

})

Note: In case of nested elements, you have to ensure that the parent container has enough height to work with when using flexGrow. Set backgroundColor on parents and child to debug.

Answer 6

import React from 'react'
import { View, StyleSheet } from 'react-native'
function moveToBottom(component) {
  return (
    <View style={styles.container}>
      {component}
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 36
  }
})
export default moveToBottom

Now in our screen, we just need to import:

import moveToBottom from 'library/utils/moveToBottom'

and wrap our button:

{
  moveToBottom(
    <ImageButton
      style={styles.button}
      title={strings.onboarding.welcome.button}
      onPress={() => {
        this.props.navigation.navigate('Term')
      }} />
  )
}

I tested it and I approve it's the best option to respect the layout without having fixed things to bottom, which is not possible if you use react-native-web in addition of react-native, because people resize and elements overlap on each over.

Source: https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42