callstack / callstack/react-native-pager-view

setPageWithoutAnimation animates the pager on calling it after refresh

Aperta
#610 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.