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

Question

Suppose this is the layout:

    
        ...
        ...
    
             


        

Answer 1

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

Answer 2

You can use this style:

row: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0,
}

Answer 3

To do this you can use the Stylesheet element position: 'absolute'.

/*This is an Example to Align a View at the Bottom of Screen in React Native */
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.containerMain}>
        <Text> Main Content Here</Text>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0, //Here is the trick
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});

Answer 4

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

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

Answer 5

for me the answer was to create a container view for the elements, then for the style.

bottomContainer: {
    flex: 1,
    justifyContent: 'flex-end',
}

Answer 6

Maybe not perfect but my solution is marginleft or right with negative value. one view as a parent with row and two child. useing one child style has negative value like -50