View not stretching vertically in column layout #127

New Issue

2015-09-16T14:55:13-07:00

brentvatne commented

2015-09-16 14:55:13 -07:00

(Migrated from github.com)

@corbt said in https://github.com/facebook/react-native/issues/2724#issuecomment-140902710

I think I may have found a couple of inconsistencies that are related to my problem. I've created what I believe are equivalent layouts in React Native and HTML/CSS that appear to demonstrate different flexbox behavior. Am I just crazy or is this a bug?

HTML

JSFiddle here

React Native

<View style={{flexDirection: 'row', alignItems: 'stretch', width: 150}}>
  <View style={{backgroundColor: 'red'}}>
    <View style={{backgroundColor: 'green'}}>
      <Text style={{backgroundColor: 'purple', alignSelf: 'center'}}>
        Column 1
      </Text>
    </View>
  </View>
  <Text style={{backgroundColor: '#B2DBFF', height: 150}}>Column 2</Text>
</View>

Output on my Android device:

Differences

In React Native the intermediary green div doesn't expand to fill the column vertically, and the "Column 1" text is not centered vertically either. On my machine (OS X/Chrome 45) the HTML version does.

### @corbt said in https://github.com/facebook/react-native/issues/2724#issuecomment-140902710 I think I may have found a couple of inconsistencies that are related to my problem. I've created what I believe are equivalent layouts in React Native and HTML/CSS that appear to demonstrate different flexbox behavior. Am I just crazy or is this a bug? #### HTML JSFiddle [here](https://jsfiddle.net/awtLxLpm/) #### React Native ``` jsx <View style={{flexDirection: 'row', alignItems: 'stretch', width: 150}}> <View style={{backgroundColor: 'red'}}> <View style={{backgroundColor: 'green'}}> <Text style={{backgroundColor: 'purple', alignSelf: 'center'}}> Column 1 </Text> </View> </View> <Text style={{backgroundColor: '#B2DBFF', height: 150}}>Column 2</Text> </View> ``` Output on my Android device: ![device](https://cloud.githubusercontent.com/assets/176426/9885921/a27e94e6-5bdf-11e5-9b9d-3b1d3405c19e.png) #### Differences In React Native the intermediary green `div` doesn't expand to fill the column vertically, and the "Column 1" text is not centered vertically either. On my machine (OS X/Chrome 45) the HTML version does.

corbt commented

2015-09-16 15:02:53 -07:00

(Migrated from github.com)

Update: here's a new JSFiddle using the css-layout default styles and with inline styles updated to appear the same as the old version. And the equivalent React Native JSX, which still renders to the image embedded above (tested on Android and iOS simulator):

<View style={{flexDirection: 'row', alignItems: 'stretch', width: 150}}>
  <View style={{flexDirection: 'row', backgroundColor: 'red'}}>
    <View style={{flexDirection: 'row', backgroundColor: 'green'}}>
      <View style={{backgroundColor: 'purple', alignSelf: 'center'}}>
        <Text>
          Column 1
        </Text>
      </View>
    </View>
  </View>

  <View style={{backgroundColor: '#B2DBFF', height: 150}}>
    <Text>Column 2</Text>
  </View>
</View>

Update: here's a new [JSFiddle](https://jsfiddle.net/awtLxLpm/1/) using the css-layout default styles and with inline styles updated to appear the same as the old version. And the equivalent React Native JSX, which still renders to the image embedded above (tested on Android and iOS simulator): ``` jsx <View style={{flexDirection: 'row', alignItems: 'stretch', width: 150}}> <View style={{flexDirection: 'row', backgroundColor: 'red'}}> <View style={{flexDirection: 'row', backgroundColor: 'green'}}> <View style={{backgroundColor: 'purple', alignSelf: 'center'}}> <Text> Column 1 </Text> </View> </View> </View> <View style={{backgroundColor: '#B2DBFF', height: 150}}> <Text>Column 2</Text> </View> </View> ```

brentvatne commented

2016-04-04 11:42:26 -07:00

(Migrated from github.com)

Hurray, this is pulled into React Native now :) d95757037a

Hurray, this is pulled into React Native now :) https://github.com/facebook/react-native/commit/d95757037aef3fbd8bb9064e667ea4fea9e5abc1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#127