[Style] flexWrap causes CPU 100% and freezes the app

[grabbou]

Hey,

This issue is surely super hard to replicate as it happens only on one view - when I push route from List and then, pop to go back. When I click pop, componentWillUmount is called on that route but screen freezes and nothing animates/changes. This started happening after upgrading from 0.7 to 0.8. I tried replacing the route I push from ListView in order to make sure it's not its fault and nothing has changed, so I am blaming the ListView. It's just a simple List with 2 sections and ~20 rows with text. Replacing ListView with manual this.items.map(item => <Text>{item.title}</Text>) changes nothing and the exception still occurs.

Profiling shows that the following call stack keeps running forever:

Running Time    Self (ms)       Symbol Name
29282.0ms  100.0%   0,0     _dispatch_worker_thread3  0x3ddd5
29282.0ms  100.0%   1,0      start_wqthread
29281.0ms   99.9%   0,0       _pthread_wqthread
29281.0ms   99.9%   0,0        _dispatch_worker_thread3
29281.0ms   99.9%   0,0         _dispatch_root_queue_drain
29276.0ms   99.9%   0,0          _dispatch_queue_invoke
29276.0ms   99.9%   0,0           _dispatch_queue_drain
29275.0ms   99.9%   0,0            _dispatch_client_callout
29235.0ms   99.8%   0,0             _dispatch_call_block_and_release
29142.0ms   99.5%   0,0              __42-[RCTBatchedBridge _handleBuffer:context:]_block_invoke363
29141.0ms   99.5%   1,0               -[RCTUIManager batchDidComplete]
29108.0ms   99.4%   0,0                -[RCTUIManager uiBlockWithLayoutUpdateForRootView:]
29106.0ms   99.3%   0,0                 -[RCTShadowView collectRootUpdatedFrames:parentConstraint:]
29104.0ms   99.3%   0,0                  layoutNode
29104.0ms   99.3%   0,0                   layoutNodeImpl
29104.0ms   99.3%   0,0                    layoutNode
29104.0ms   99.3%   0,0                     layoutNodeImpl
29104.0ms   99.3%   0,0                      layoutNode

Any tips/hints what to test/debug more in order to fix that?

[grabbou]

Ok, the issue is when this combination of style is applied to a View:

row: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'space-between',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },

Removing flexWrap: 'wrap' fixes the issue. Any ideas why? Generally it paints quite well and does what it should do, looks like it just freezes when component is about to animate out.

[ide]

IIRC there's an open bug about row + wrap locking up the CPU. Sounds like this could be the same issue.

[grabbou]

Duplicate of #1378, thanks @ide , just after renaming my issue I started looking for duplicates in repo and found quite a few!