search

bamlab / react-tv-space-navigation

A React Native module to handle spatial navigation for a TV application in a 100% cross-platform way
https://bamlab.github.io/react-tv-space-navigation/
MIT License
178 stars 15 forks source link

Refactor(ItemWithIndex): remove ItemWithIndex type #129

Closed AlecColas closed 1 month ago

AlecColas commented 1 month ago

An index was manually added to every iterable data passed to VirtualizedLists. In convertToGrid function (dedicated to VirtualizedGrids), we saw that map gives access to the index of every item of data.

We can use the same for VirtualizedLists by using the index passed inside the renderItem prop.

The refactoring is cut in 2 parts :

Tests realized on Web :

https://github.com/bamlab/react-tv-space-navigation/assets/74320569/322a3917-6761-45b9-8402-8b46d0684a01

Some performance tests

Scenario Before After
Display Home avant affichage home affichage home
Scroll horizontally home avant horizontal home scroll horizontal home
Scroll vertically home avant vertical home scroll vertical home
Display Grid avant affichage grid affichage grid
Scroll Horizontal Grid avant horizontal grid scroll horizontal grid
Scroll Vertical Grid avant vertical grid scroll vertical grid
pierpo commented 1 month ago

This is awesome, thank you so much ❤️ . I think there might be a bug though on the virtualized grid indices!

image (1)

vs

image

AlecColas commented 1 month ago

@pierpo I fixed it and updated the video in the PR's description