'React Native - Sticky footer at the bottom of container

I'm trying to make a <View> called footer stick at the bottom of the right container.

Here is a live example:
https://rnplay.org/apps/G3rHqQ

If I make the left container higher than the right one then it won't work. If the right container is higher than the left one then it works....

enter image description here

The red and orange elements are dynamic, have different height depending on their content. The blue one, instead, should always stick to the bottom of the right container.

I have also tried with position: 'absolute'; bottom:0; left: 0; right: 0; and it does stick to the bottom but only IF the right container is higher than the left one.

flexboxreact-native


Solution 1:[1]

It looks like you need to set a flex:1 on the outermost container to get the flex properties working the way you want. I've set up a working project here and pasted the code below as well.

https://rnplay.org/apps/WoceXg

'use strict';

import React, { AppRegistry, StyleSheet, View, Text } from 'react-native';

const SampleApp = React.createClass({
  render: function() {
    return (
      <View style={{ flex:1 }}>
        <View style={styles.wrapper}>
          <View style={styles.left}>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
          </View>
          <View style={styles.right}>
            <View style={styles.rightInner}>
              <View style={styles.content}>
                <Text>content</Text>
                <Text>content</Text>
              </View>
              <View style={styles.footer}>
                <Text>Sticky</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{ flex:1 }}></View>
      </View>
    );
  },
});

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    paddingTop: 50,
    flex:1
  },
  left: {
    backgroundColor: 'lightblue',
    flex: 1,
  },
  right: {
    backgroundColor: 'lightgreen',
    flex: 4,
  },
  rightInner: {
    flex: 1,
    backgroundColor: 'orange',
  },
  content: {
    flex: 1,
  },
  footer: {
    backgroundColor: 'green',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Solution 2:[2]

I'm trying to do something similar. I need a View to stick to the bottom. I used poistion: 'absolute', bottom:0 and it does stick to the bottom but the width of the view does not stretch anymore.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nader Dabit
Solution 2 Narayan Sainaney

Related Questions