react-native: [Layout] Vertical centering fails when container has absolute positioning and no explicit height

The code below renders like this, with the red square at the top of the container (screenshot from iOS 8.3 simulator):

positioning-1

If an explicit height:70 is set on the container, then the red square is vertically centered:

positioning-2

I would expect the square to be vertically centered within its container, without needing to set an explicit height. The yellow background color fills the height of the element without an explicit height set.

This is only an issue for elements that have absolute positioning, not those with relative positioning.

<View>
    <View style={{
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'yellow'
    }}>
      <View style={{
        backgroundColor: 'red',
        width: 10,
        height: 10
      }}/>
    </View>

    <View style={{
      opacity: 0.5,
      borderColor: 'black',
      borderWidth: 1
    }}>
      <Text>Lorem ipsum lorem ipsum</Text>
      <Text>Lorem ipsum lorem ipsum</Text>
      <Text>Lorem ipsum lorem ipsum</Text>
      <Text>Lorem ipsum lorem ipsum</Text>
    </View>
  </View>

Maybe related #384

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 10
  • Comments: 32 (8 by maintainers)

Most upvoted comments

@janmonschke: looks like its merged, issue still exist?