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

Solution 1:

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

Solution 2:

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

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

To pin your footer to the bottom, apply justifyContent: 'space-between' to the container

Solution 3:

Absolutely position is another way to fix footer, just like:

footer: {
    position: 'absolute',
    height: 40,
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH,
}