SpatialNavigationVirtualizedList removing items on scroll with scrollBehavior

[jonp-iversoft]

Describe the bug When a SpatialNavigationVirtualizedList has a scrollBehavior of stick-to-end or jump-on-scroll, as the items are scrolled before it reaches the end, previous items are removed from the render list and are no longer shown when they should still be on screen.

It seems the behavior of stick-to-start is still applied as the items are moved and removed in the same way in that view. The only difference is in stick-to-start the list is scrolled

To Reproduce

<View style={styles.listContainer}>
        <SpatialNavigationVirtualizedList
          scrollBehavior="stick-to-end"
          orientation="vertical"
          data={data}
          renderItem={({ item }) => (
           <SpatialNavigationNode isFocusable>
              {({ isFocused }) => (
                <View
                  style={[styles.row, isFocused ? styles.rowFocused : null]}
                  aria-label={`rowItem_${index}`}>
                  <Text>{index}</Text>
                </View>
              )}
            </SpatialNavigationNode>
          )}
          itemSize={100}
          numberOfRenderedItems={15}
          numberOfItemsVisibleOnScreen={10}
        />
      </View>

const styles = StyleSheet.create({
  listContainer: {
    width: 1920,
    height: 1080,
  },
  row: {
    height: 100,
    width: 1920,
    backgroundColor: 'red,
  },
  rowFocused: {
    backgroundColor: 'hotpink'
  },
});

Expected behavior Items should continue to be rendered until the end of the visible list is hit, the items move, and then any items not shown on the screen can be removed.

Screenshots

Version and OS

• Library version: [3.5.0]
• React Native version: [0.72.0]
• OS web

[pierpo]

Hey!

I think we have a little bug with some scrollBehaviours. Can you try doubling numberOfRenderedItems={15} to numberOfRenderedItems={30}?

Thanks 😊

[jonp-iversoft]

In that case, the scroll works mostly as expected, but the top item disappears / is removed as the animation is happening. Setting numberOfRenderedItems={32} resolves the issue completely in my example. However that does affect lazy loading data and could impact performance

[pierpo]

OK, then it's a bug we are aware of but needs fixing indeed. That could affect performance indeed!

I can't give any ETA yet for this one, sorry 🙈

[jonp-iversoft]

sounds good! Thanks for looking into it!

[pierpo]

Hey! We had a first fix for the stick-to-end behaviour. Not published yet 😄

https://github.com/bamlab/react-tv-space-navigation/pull/148