React-native: [Question] margin auto functionality with Flexbox?

[danawoodman]

I would like to create a layout where I have 3 centered row elements:

1. A fixed width <Image> component aligned to the left
2. Another element <Text> element aligned to the left, adjacent that can expand to fill the empty space
3. A final item, aligned to the right (a <SwitchIOS> component to be exact)

I'm looking to create something like this (except with the two grouped items on left instead of the right):

See example here: http://jsfiddle.net/sQAFY/106/

I've attempted various combinations of flexbox, and absolute position with no real luck. I know I'm missing something, but what I feel like I need is to set marginRight: 'auto' on the second element.

Any suggestions or pointers would be greatly appreciated! Very excited to start using React Native, great work all!

[danawoodman]

Looks like I answered my own question, I just set flex values, like the following:

  memberItem: { // Container
    alignItems: 'center',
    flexDirection: 'row',
    marginVertical: 5,
  },
  avatar: { // First, left aligned item
    flex: 1,
    height: 50,
    marginRight: 20,
    width: 50,
  },
  name: { // Stretched middle component
    flex: 3,
    fontWeight: 'bold',
  },
  activeToggle: {  // Last, right aligned item
    flex: 1,
  }

[vjeux]

This is not going to do what you want. flex: 1/3/1 means that the first element will take 1/(1+3+1) of the space, the second 3/5 and the last one 1/5.

What you want is

<View>
  <View style={{width: 50}} />
  <View style={{flex: 1}} />
  <View style={{width: 50}} />
</View>

so, the two elements around are fixed, and use flex: 1 to make it take the remaining space

[danawoodman]

@vjeux gotcha, still trying to wrap my head around flexbox. Do the components need to be <View>s? I'm assuming not. Thanks for your quick reply!

[danawoodman]

Also, what if the last element doen't have a fixed width (eg. a <SwitchIOS> component)?

[vjeux]

They ultimately need to be View, but you can make a custom component that eventually outputs a view with the style. It'll work with SwitchIOS since it has an intrinsic size (equivalent of hardcoding width: 50)

[danawoodman]

Awesome, thanks so much for the info, cheers @vjeux!

[vjeux]

I know that flexbox is pretty new to many people, but at least it's a standard and what you learn on React Native can be reused for your future web projects :)

[danawoodman]

I'm really excited to pick it up. Cheers @vjeux and team for all your hard work on React Native!

[jasonkuhrt]

@vjeux Maybe I'm not understanding your conversation but I don't see how the opening example is resolved by the subsequent examples. To achieve it (in Web) you need to use margin-right: auto on flex item 3. However as I just tried using "auto" as a value to marginRight in React Native causes an error:

If I am correct then I think this should be considered a bug/missing feature of the RN Flex implementation.

[chris-verclytte]

@vjeux, I agree with @jasonkuhrt, as stated by the W3C, the correct way to handle this case in web development would be to use auto margin (see https://www.w3.org/TR/css-flexbox-1/#auto-margins).

Thus, I would expect this example to be solved by following code:

<View style={{ flexDirection: 'row' }}>
  <View>
     <Text>flex item 1</Text>
  </View>
  <View>
     <Text>flex item 2</Text>
  </View>
  <View style={{ marginLeft: 'auto'}}>
     <Text>flex item 3</Text>
  </View>
</View>

Is there any plan to support this behavior ?

[vjeux]

margin: auto is now supported by the underlying layout engine that powers react native (yoga), so it should be easy to add support for it if it doesn't work already

[jmarchello]

@vjeux Would you be so kind as to let us know what version of React has the version of yoga that supports margin: auto? Thanks!

[jasonkuhrt]

@vjeux Very cool, thanks.

[tindn]

I have the same question as @jmarchello as I'm getting the margin: 'auto' error mentioned above. react-native 0.45.1

[bduyng]

+1

[ktj]

marginHorizontal: 'auto'

[sanderfish]

I find it odd that auto margins are still not supported. Are there any plans to support this? Can we reopen this ticket?

[hmontes]

I discover the "margin" feature on flexbox today and is very very VERY useful.

Do you want to support it in react-native?

[marsonmao]

I can use marginLeft and marginRight for auto now, but not marginHorizontal, so just split them to 2 properties.