Left, Right, Top and Bottom with percentages don't work when same element has flexDirection: 'row'

[henrikra]

Description

Here is example:

import React from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';

const leftPercentBug = () => (
  <View style={styles.container}>
    <View style={styles.child}>
      <View style={styles.grandChild} />
      <View style={styles.grandChild} />
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    borderWidth: 2,
    borderColor: 'black',
  },
  child: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 255, 0.5)',
    left: '50%',
    flexDirection: 'row',
  },
  grandChild: {
    backgroundColor: 'green',
    borderWidth: 1,
    borderColor: 'pink',
    flex: 1,
  },
});

AppRegistry.registerComponent('leftPercentBug', () => leftPercentBug);

With this code the layout should look something like this:

Instead it looks like this:

So the left is not calculated right when the same element has flexDirection: 'row'
This same happened also when using left, right, bottom and top properties.

Reproduction

Run the code above by yourself. Also you can see how the same should look in the web: https://jsfiddle.net/L8ps52sp/3/

Solution

I think @emilsjolander should check this out since he added percentages in latest version ;)

Additional Information

• React Native version: [0.42]
• Platform: [iOS]
• Operating System: [MacOS]

[woehrl01]

@henrikra the first issue there is, is that you assume that yoga uses the same defaults for layouting as in the web. Sadly it's not. We are currently adding an option for using the defaults. If you apply the yoga-defaults to your jsfiddle, it certainly looks different from your expectation.

Nevertheless it looks like that there could be a bug somewhere, too.

[woehrl01]

@henrikra I extracted the following test case:

<div id="percent_absolute_position" style="width: 60px; height: 50px; position: relative;">
  <div style="height: 50px; width: 100%; left: 50%; position: absolute; flex-direction: row;">
    <div style="width: 100%;"></div>
    <div style="width: 100%;"></div>
  </div>
</div>

And this gets layouted from yoga as you expected. As you currently use react native 0.42 and we had some percentage fixes in this repo which aren't yet in 0.42 I'd suggest to checkout the master of react-native and look if this is reproducable there.

[henrikra]

Hmm at the moment I don't know how to do that? It is possible if you try it? Or somebody else in yoga community?

[woehrl01]

Unfortunately I have no iOS/MacOS to test this, so somebody else needs to have a look.

[emilsjolander]

Marking this as solved. Hopefully the next RN update will solve this for you @henrikra

[henrikra]

Okay! I will reopen this if we still have problems after the update :D

[boda-sh]

I've tested this in RN version 0.44, and the problem still exists, updates?

[henrikra]

@emilsjolander @woehrl01 Any news?

[woehrl01]

@henrikra Sorry no, as I can't reproduce in pure yoga. (still no IOS/RN user)

[deadcoder0904]

This actually works. It's not a bug. I wanted to test if the issue still exists but the code wasn't working, so I rewrote it ⸺

import React from 'react'
import { StyleSheet, View } from 'react-native'

const App = () => (
  <View style={styles.container}>
    <View style={styles.child}>
      <View style={styles.grandChild} />
      <View style={styles.grandChild} />
    </View>
  </View>
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
  child: {
    flex: 1,
    flexDirection: 'column',
    width: '50%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 255, 0.5)',
    position: 'absolute',
    left: '50%',
  },
  grandChild: {
    backgroundColor: 'green',
    borderWidth: 1,
    borderColor: 'yellow',
    flex: 1,
  },
})

export default App