Toggle layout of the list ( grid <=> list )

[sanduluca]

How can we make a Flashlist that can have a few different layouts( >1).

Image examples

Is there an example how this can be achieved ?

For now I have 3 ideas how this may be done:

1. Have a state with the layout type (grid/list). Custom renderItem method that return different Item based on the layout type.
2. Have a state with the layout type (grid/list). Change the numOfColumns and the key of the Flashlist
3. Have a state with the layout type (grid/list). Render different Flashlist based on the layout type

With the 2 and 3 options I will lose the scroll position inside the list.

Is there any solution to solve this problem (can it be done in react-native) ? )

[naqvitalha]

Go with option 2 but don't change the key. FlashList can update it's layout on the fly and can maintain scroll position of the first visible item.
Also, pass numColumn value in extraData={numColumn} if your items require a re-render to adapt to the new layout.