ReactNative: Unable to occupy entire screen with absolute positioning

Question

Consider the example below. The absolutely positioned View would only render within the bounds of its parent flexbox.

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <View style={{flex: 1}}>
      <View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
        <Text>I am ABSOLUTE</Text>
      </View>
    </View>
    <View style={{backgroundColor: 'blue', top: 50}}>
      <View style={{margin: 10, padding: 10, height: 50}}>
        <Text>I have a fixed height</Text>
      </View>
    </View>
  </View>
</View>

PS. I'm using RN 0.42.0.

Answer 1

"absolute positioning is always relative to the parent"
https://reactnative.dev/docs/layout-props#position

If I need a view with absolute positioning, I would place it at the bottom of root component. So based on your example it would look like -

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    ....
  </View>
  <View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
    <Text>I am ABSOLUTE</Text>
  </View>
</View>