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

i want have children filling available space, , overlapping 1 another, last child 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., , can't find winning combo.

i think want this:

component/index.js:

import react 'react'; import {     view, } 'react-native';  import style './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 } 'react-native';  export default stylesheet.create({     root: {         flex: 1,         position: 'relative',     },     child1: {         ...stylesheet.absolutefillobject,     },     child2: {         ...stylesheet.absolutefillobject,     }, }); 

so, view root style fill space of parent since has flex: 1. , has position: relative, children absolute positioning act accordingly.

views child1 , child2 both have absolute positioning (stylesheet.absolutefillobject shortcut {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0} docs here). child1 , child2 overlap , child2 on top of child1 since rendered later.