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

New Issue

2017-03-02T08:44:52-08:00

henrikra commented

2017-03-02 08:44:52 -08:00

(Migrated from github.com)

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]

### Description Here is example: ```javascript 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: ![image](https://cloud.githubusercontent.com/assets/12229968/23516753/c72f7756-ff76-11e6-848e-2ef6727c28ee.png) Instead it looks like this: ![image](https://cloud.githubusercontent.com/assets/12229968/23516776/d83f7794-ff76-11e6-9b66-ee82badeb1a5.png) 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 commented

2017-03-02 09:54:57 -08:00

(Migrated from github.com)

@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.

@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.](https://facebook.github.io/yoga/docs/learn-more/#default-values) 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 commented

2017-03-02 10:09:07 -08:00

(Migrated from github.com)

@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 I extracted the following test case: ```html <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 commented

2017-03-02 11:04:55 -08:00

(Migrated from github.com)

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 commented

2017-03-02 11:21:44 -08:00

(Migrated from github.com)

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

emilsjolander commented

2017-03-04 01:08:26 -08:00

(Migrated from github.com)

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

henrikra commented

2017-03-05 10:33:24 -08:00

(Migrated from github.com)

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

bodadotsh commented

2017-05-11 19:57:56 -07:00

(Migrated from github.com)

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

henrikra commented

2017-07-26 00:49:01 -07:00

(Migrated from github.com)

@emilsjolander @woehrl01 Any news?

woehrl01 commented

2017-07-26 04:12:50 -07:00

(Migrated from github.com)

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

deadcoder0904 commented

2019-08-14 00:08:19 -07:00

(Migrated from github.com)

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

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 ⸺ ```js 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 ``` ![screenshot of the above code](https://user-images.githubusercontent.com/16436270/63001027-3da06280-be90-11e9-9185-422e9bb05d42.png)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#454