callstack / callstack/react-native-pager-view
Delay/Flicker in View when setting State in onPageSelected
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
I've created a PagerView with an onPageSelected callback:
```
const [index, setIndex] = useState(0);
```
```
First page
Second page
```
```
const onPageSelected = (event) => {
const {position} = event.nativeEvent;
if(position !== index) {
setIndex(position);
}
}
```
When i change view, there is a small delay. I've traced it back to the `setIndex()` useState.
I want to use the index to show different button styles based on if it is the active view or not.
How do i get around this?
When i remove the setIndex(), its super smooth, but I dont have access to the current active page.
Can i get the current active page from the ref? Is there a better way to implement this?
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par le callback onPageSelected de PagerView et le setIndex useState présentés dans l’exemple de l’issue. Reproduisez le délai lors du changement de page, puis examinez le comportement de ref et des événements afin de déterminer s’il est possible d’obtenir la page active actuelle sans effectuer le rendu des mises à jour de l’état. Le travail est terminé lorsqu’une méthode prise en charge pour mettre à jour les styles des boutons de la page active sans le scintillement signalé est documentée ou implémentée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 35/100