Support ScrollIntoView for ListView

[will-ks]

Summary

I have been trying to find a way to programmatically scroll a ListView.

The underlying ListView xaml component has a method to do this, ScrollIntoView.

Would it be possible to support using this method via react-native-xaml?

Motivation

We are trying to use the ListView component for a list of chat messages, and need to be able to scroll the list when a new message is added.

Basic Example

Maybe something like:

const listViewRef = useRef<ListViewRef>(null);
const lastListViewItemRef = useRef<ListViewItemRef>(null);

useEffect(() => {
  listViewRef.current?.ScrollIntoView(lastListViewItemRef);
}, [messages]);

return (
  <ListView ref={listViewRef}>
    {/*...ListViewItems*/}
    <ListViewItem ref={lastListViewItemRef} />
  </ListView>
);

Open Questions

No response

[chrisglein]

Seems like a totally reasonable thing to want to do from a XAML perspective. Is the missing functionality here having functions that take references to other views?

Setting simple example aside, is your real example a virtual list? Is it possible to declare a virtual data source through JS?

[will-ks]

Seems like a totally reasonable thing to want to do from a XAML perspective. Is the missing functionality here having functions that take references to other views?

I think so, but my example code may not be the way you want to approach it, and I'm not all that familiar with xaml.

It could also follow the pattern used here: Calling methods on XAML objects. So something like:

ListView.ScrollIntoView(listViewRef, lastListViewItemRef)

We could probably also use StartBringIntoView instead, so something more like:

ListViewItem.StartBringIntoView(lastListViewItemRef)

The docs mention "Some types support custom commands to expose some functionality of the underlying platform" but as far as I can tell this is manually specified and only the MenuFlyout.ShowAt method is exposed so far? https://github.com/microsoft/react-native-xaml/blob/main/package/Codegen/Windows.UI.Xaml.json#L168 Is it simple enough to extend this to other methods via the codegen?

Setting simple example aside, is your real example a virtual list? Is it possible to declare a virtual data source through JS?

In our case it's not virtualized, its 10 - 20 list items mapped directly as ListViewItem component children of the ListView. We could probably use a virtual data source if it would help solve this issue, although would need to check that the list remains nicely accessible for our screen reader users.

[jonthysell]

Quick question, are you already using react-native-xaml to use XAML ListView's in your RNW app?

To be clear, adding / exposing the ScrollIntoView() method on react-native-xaml's ListView here will not expose that functionality to the core RN List Views, like FlatList, even if those views are also built on top of XAML ListViews.

[will-ks]

Hi @jonthysell, yes, we are using rn-xaml's ListView. We use it as we found the keyboard accessibility of the rn-xaml ListView to be superior to RN's FlatList, but that's another issue.

[microsoft-github-policy-service[bot]]

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.