Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SpatialNavigationVirtualizedList removing items on scroll with scrollBehavior #119

Open
jonp-iversoft opened this issue Apr 30, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@jonp-iversoft
Copy link

jonp-iversoft commented Apr 30, 2024

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
image
image

Version and OS

  • Library version: [3.5.0]
  • React Native version: [0.72.0]
  • OS web
@jonp-iversoft jonp-iversoft added the bug Something isn't working label Apr 30, 2024
@pierpo
Copy link
Member

pierpo commented May 2, 2024

Hey!

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

Thanks 😊

@jonp-iversoft
Copy link
Author

jonp-iversoft commented May 2, 2024

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
Copy link
Member

pierpo commented May 6, 2024

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
Copy link
Author

sounds good! Thanks for looking into it!

@pierpo
Copy link
Member

pierpo commented Sep 11, 2024

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

#148

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants