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

Question

Suppose this is the layout:

    
        ...
        ...
    
             


        

Answer 1

I would use the following approach:

     {/* <- Add this */}

        
            ...
        
        
            ...
        

    

    
        ...
    

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