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

Created on 11 May 2015 · 32Comments · Source: facebook/react-native

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

iOS Locked

Source

premasagar

👍10

All 32 comments

Also experiencing this issue, hardcoding the height fixes it for me

BlooJeans on 22 May 2015

Looks like a bug to me, @lwansbrough can you test this out when you pull the newest version of css-layout?

Runnable example that you can just copy and paste in: here

brentvatne on 30 May 2015

+1. Just got hit by this bug. need to explicitly give a height.

chirag04 on 10 Jun 2015

:+1: I have a very similar issue but it doesn't matter whether or not the position is set. In my case, if there are several columns in a row, and the content in one column determines the height of the row, vertical centering does not work in the other columns.

screen shot 2015-07-16 at 10 36 34

Here is the css for this screenshot:

leftRowActions: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',

    borderBottomColor: 'white',
    borderBottomWidth: 2,
    backgroundColor: '#3878c8'
  },
  rightRowActions: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',

    borderBottomColor: 'white',
    borderBottomWidth: 2,
    backgroundColor: '#26c3bd'
  },

Edit: setting alignItems: 'center' on the parent does not work because then column is centered but the backgroundColor does not fill the row.

screen shot 2015-07-16 at 10 47 26