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

Question

Suppose this is the layout:

    
        ...
        ...
    
             


        

Answer 1

Consider a screen structure

   ... 
  ...

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.