callstack / callstack/react-native-pager-view
Dynamic / lazy approach to load pages
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
# 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.
Contributor guide
Assessment
This issue has not been assessed yet.