Web Inconsistency: In some cases, text is unexpectedly collapsed #470

New Issue

2017-03-09T01:22:12-08:00

rigdern commented

2017-03-09 01:22:12 -08:00

(Migrated from github.com)

As shown below, I have a couple of lines of text placed within some nodes which set flexGrow/flexShrink. One of the lines is unexpectedly invisible. Sorry I don't have a better description of the problem.

Here's a relatively small repro case I extracted from my team's app expressed using React Native components (there's a JSFiddle later):

<View style={{"position":"absolute","left":0,"right":0,"top":0,"bottom":0}}>
  <View style={{"alignSelf":"flex-start"}}>
    <View style={{"flexShrink":1}}>
      <Text>
        Top Text
      </Text>
    </View>
    <View>
      <View style={{"flexGrow":1}}>
        <Text>
          Bottom Text
        </Text>
      </View>
    </View>
  </View>
</View>

Expected Result

Both "Top Text" and "Bottom Text" are visible (JSFiddle: https://jsfiddle.net/pygpx2oq/):

Actual Result

Only "Bottom Text" is visible:

Reproed using a version of React Native (4c7576e485) which appears to be using a version of Yoga from today (March 8).

As shown below, I have a couple of lines of text placed within some nodes which set `flexGrow`/`flexShrink`. One of the lines is unexpectedly invisible. Sorry I don't have a better description of the problem. Here's a relatively small repro case I extracted from my team's app expressed using React Native components (there's a JSFiddle later): ```javascript <View style={{"position":"absolute","left":0,"right":0,"top":0,"bottom":0}}> <View style={{"alignSelf":"flex-start"}}> <View style={{"flexShrink":1}}> <Text> Top Text </Text> </View> <View> <View style={{"flexGrow":1}}> <Text> Bottom Text </Text> </View> </View> </View> </View> ``` ### Expected Result Both "Top Text" and "Bottom Text" are visible (JSFiddle: https://jsfiddle.net/pygpx2oq/): ![image](https://cloud.githubusercontent.com/assets/199935/23743516/c533f118-0465-11e7-85e3-977f7768e068.png) ### Actual Result Only "Bottom Text" is visible: ![image](https://cloud.githubusercontent.com/assets/199935/23743574/f873e27c-0465-11e7-9b26-ca81c315d11b.png) Reproed using a version of React Native (https://github.com/facebook/react-native/commit/4c7576e485973391d4042e694523dbfe70e49b50) which appears to be using a version of Yoga from today (March 8).

woehrl01 commented

2017-11-28 03:23:15 -08:00

(Migrated from github.com)

This is still reproducable in the latest RN. See https://snack.expo.io/r1V-wTceG

👍 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#470