How you support orientation changes on FlatList without changing columns on the fly?

I remember using FlatList when it didn’t have this check:

invariant(
   nextProps.numColumns === this.props.numColumns,
   'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
   'changing the number of columns to force a fresh render of the component.',
 );

So basically I wrapped the FlatList in a View with onLayout prop, and when the width of screen changes (from portrait <-> layout) I would change the number of columns (and some other calculations). This is not allowed now, so what it forces me to do is changing the key prop of the FlatList… This renders a completely new list, losing the scroll position and with a big delay even in production.

Any workarounds, thoughts ?

[cyphire]

Having same issue. Don’t understand why, I am re-rendering the child with the FlatList with a new number of columns. Is there some magic to work around this?

[xstable]

Sombody suggest do use extraData property of Flatlist to let Flatlist notice, that something changed.

But this didn’t work for me, here is what work for me: Use key={this.state.orientation} while orientation e.g is “portrait” or “landscape”… it can be everything you want, but it had to change, if orientation changed.