Certain styles applied together peg CPU

[lwansbrough]

While working on my markdown module, I ran into a situation where my simulator CPU would jump to 160%+ and would (obviously) freeze the app. I found this behaviour particularly strange because the only thing I was doing was inserting React elements into the virtual DOM.

I thought perhaps there was a parsing bug that was causing a huge tree to be rendered, but upon further investigation I found I could repeat the issue with plain text inside my Markdown tag. The issue was only coming up after a certain number of letters were entered. That initial assumption was wrong though.

What seems to be happening is when a Text element exceeds the available width of its containing View, a bug causes the app to freeze up. This is more difficult to explain than it is to show, here's the code: (For reference, I was using 0.3.11 the iPhone 6 simulator, so the 375 width is relevant.)

<View style={{padding: 15, width: 375}}>
  <View style={{
    marginTop: 10,
    marginBottom: 10,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start'
  }}>
    <Text>
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </Text>
  </View>
</View>

[brentvatne]

@lwansbrough @vjeux and I looked into this in irc, fix for anyone else that comes across it is to use flex: 1 on the text node. This issue occurs when you have flexWrap: wrap and flexDirection: row on a parent of a text node.

[vjeux]

The infinite loop is caused inside of the layout algorithm: https://github.com/facebook/css-layout if anyone is interesting in debugging it

[brentvatne]

Also, screenshot of the thread that is getting caught in an infinite loop while doing layout:

[lwansbrough]

It appears flex: 1 offers a very different behaviour than what's offered by flexDirection: 'row' + flexWrap: 'wrap'. This bug has already been resolved upstream in https://github.com/facebook/css-layout/blob/master/src/Layout.js -- the React Native team just has to pull down those changes.

[jmstout]

Any news on this?

[brentvatne]

@jmstout - this works now on master, no longer causes CPU to be pegged thanks to syncing css-layout in this commit: af92154

[osdio]

but it also a bug, when I run , the app cpu hit 100%