Add way to use virtualization with list controls

[MasonBergstrom]

Summary

There should be a way to virtualize lists so items that aren't visible can be realized at a later time.

Motivation

Rendering a ListView with many items can take a long time preventing smooth transitions. React Native has VirtualizedList for virtualization, and Xaml supports virtualization on ListView by default, so we should have a way to do it with React Native Xaml.

Basic Example

No response

Open Questions

No response

[chrisglein]

To get this to work completely with you being able to define list items in JS we would need Fabric support. Today, you can use the JS VirtualizedList and be JS from that point down. Or you can add in a XAML control and never drop into JS below that point (it's a native control all the way down). But there is no way to do this today due to the way the React layout and XAML layout interop.

In other words, to do this today you need to do contortions. There will be a better way in the future, but the future is much further out.

Creative ways on the RNXaml side: Maybe we can extend ListView with a prop that lets you customize the list items by calling into JS. Which would be similar to hosting each item with its own React root view. Definitely many caveats about any path here. It'd best be tailored to the exact needs of this list.

This should be possible with a data ItemsSource, but not with a visual (list item) Items.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[MasonBergstrom]

Commenting to ensure this doesn't get closed. We have a meeting to discuss this on Thursday.

[chrisglein]

Room for a better sample on the standard RN path for this. Opened this: https://github.com/microsoft/react-native-gallery/issues/264