callstack / callstack/react-native-pager-view
setPageWithoutAnimation animates the pager on calling it after refresh
- Lingua principale
- TypeScript
- Stelle
- 3.4k
- Fork
- 476
- Merge medio
- 10g 21h
- PR unite (30g)
- 2
Descrizione
## Environment
react native 0.70
rn-pager-view 6.0.0
lodash
react 18
device: android emulator
## Description
setPageWithoutAnimation animates the pagechange if I call it in useEffect. Every time I change the array I want to change the current page as well. When I go previous it works right but it performs animation too.
## Reproducible Demo
```
import { Button, StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import PagerView from 'react-native-pager-view'
import { addDays, subDays } from 'date-fns'
import { last, range } from 'lodash'
const ShowBalance = () => {
const [currDay, setCurrDay] = useState(new Date())
const [postion, setPostion] = useState(1)
const [days, setDays] = useState([
subDays(currDay, 1),
currDay,
addDays(currDay, 1),
])
const pagerRef = React.useRef(null)
const renderAtATime = 5
const getNextDays = date => {
const arr = range(1, renderAtATime)
const result = arr.map(i => addDays(date, i))
return result
}
const getPrevDays = date => {
const arr = range(renderAtATime, 0, -1)
console.log('range arr', arr)
const result = arr.map(i => subDays(date, i))
return result
}
const test = () => {
pagerRef.current.setPageWithoutAnimation(5)
}
console.log('days', days)
const onChange = e => {
const position = e.nativeEvent.position
if (position > days.length - 2) {
const temp = [...days]
temp.push(...getNextDays(last(temp)))
setDays(temp)
}
if (position < 2) {
const temp = [...days]
temp.unshift(...getPrevDays(temp[0]))
setPostion(renderAtATime + position)
// pagerRef?.current?.setPageWithoutAnimation(renderAtATime + position)
setDays(temp)
}
}
useEffect(() => {
pagerRef?.current?.setPageWithoutAnimation(postion)
}, [days])
return (
console.log('onPageScrollStateChanged', i)}
onPageSelected={onChange}
// offscreenPageLimit={6}
ref={pagerRef}
>
{/*
First page
Second page
*/}
{days.map((item, i) => (
{item.toLocaleDateString()}
))}
)
}
export default ShowBalance
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
})
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con l’esempio riproducibile React Native e segui la chiamata a setPageWithoutAnimation effettuata da useEffect dopo la modifica dell’array days. Confronta il suo comportamento su Android con il cambio di pagina non animato previsto, quindi individua la copertura di regressione pertinente disponibile nel repository e verifica che il pager non esegua più animazioni.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react-native, typescript
- Ambito
- mobile-dev
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100