How to get all child views to overlap and fill their parent w/ React Native Flexbox

Question

I want to have all children filling the available space, and overlapping one another, so only the last child is visible.

<View style={???}>
  <View style={???} /> // Not visible (if bg color set on next child)
  <View style={???} />
</View>

I've tried various combinations of flex, position, alignSelf: stretch, etc., and can't find a winning combo.

Answer 1

I think you want something like this:

component/index.js:

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

import style from './style';

export default class Component extends React.Component {
    render() {
        return (
            <View style={style.root}>
                <View style={style.childOne} />

                <View style={style.childTwo} />
            </View>
        );
    }
}

component/style.js:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    root: {
        flex: 1,
        position: 'relative',
    },
    child1: {
        ...StyleSheet.absoluteFillObject,
    },
    child2: {
        ...StyleSheet.absoluteFillObject,
    },
});

So, View with root style will fill all space of its parent since it has flex: 1. And it has position: relative, so the children with absolute positioning will act accordingly.

Views with child1 and child2 both have absolute positioning (StyleSheet.absoluteFillObject is a shortcut for {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0} docs here). child1 and child2 will overlap and child2 will be on top of child1 since it is rendered later.