Virtualizedlists should never be nested inside plain scrollviews with the same orientation because it can break windowing and other functionality – use another virtualizedlist-backed container instead.

The recommended approach is to avoid nesting VirtualizedLists inside plain ScrollViews with the same orientation. This can lead to issues with windowing and other functionality. Instead, you should use another container that is backed by VirtualizedList component.

As an example, let’s consider a scenario where you have a screen with a list of items that you want to render efficiently. You decide to use VirtualizedList for better performance. However, if you also have a ScrollView wrapping the VirtualizedList, and both have the same orientation (vertical or horizontal), it can cause problems.

To solve this, you can use a parent container component that is backed by VirtualizedList. This container component can handle all the scrolling and can also include other elements as needed. Here’s an example of how you can structure your HTML code:

In the above example, the listContainer div acts as the parent container for the VirtualizedList. It includes a header div and a footer div, which can contain any additional content you need. The VirtualizedList component is used directly inside the listContainer div, and you can pass the necessary props for rendering the list items.

By following this approach, you avoid nesting VirtualizedLists inside plain ScrollViews with the same orientation, ensuring that windowing and other functionality work as expected while still achieving efficient rendering of large lists.