callstack / callstack/react-native-pager-view
Dynamic / lazy approach to load pages
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
# Feature Request
## Why it is needed
Performance way to load a LOT of pages dynamically to create a truly dynamic swiper.
## Possible implementation / Code sample
Right now I can do something like:
```js
const [position, setPosition] = useState(0);
const onPageSelected = e => {
setPosition(e.nativeEvent.position);
};
const min = 0;
const max = position + numberOfPages;
const items = data.slice(min, max).map((item, index) => (
// If they are are not inside the range, we render null to get a better performance
{index < position + numberOfPages && index > position - numberOfPages ? (
) : null}
));
...
>
{items}
```
**Contraints**: List keeps growing while you swipe.
A better way instead of rendering `null` would be to slice from the beginning too:
```js
const min = position - numberOfPages;
const max = position + numberOfPages;
```
However, this approach has a problem. Consider the scenario:
* Pages: `1 2 3 4` and position = 2 (selected element is 3).
We slice from the beginning and we render:
* Pages `2 3 4 5` but still position = 2 (selected element will be 4). <-- The problem is that if we change the children in this way, we need to adapt the position (here the position should be 1 for selected element to be still 3).
---
Another approach would be doing this by default natively: https://github.com/react-native-community/react-native-viewpager/issues/83.
Guía de contribución
Línea de trabajo
Comienza con los dos ejemplos de ventanas hijas del issue y la discusión enlazada react-native-community/react-native-viewpager#83 para comprender las restricciones nativas. Se considerará terminado cuando se proporcione un enfoque dinámico y documentado que pueda cargar muchas páginas de forma diferida y conservar la página seleccionada a medida que crece la lista.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react-native
- Área
- mobile
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 25/100