callstack / callstack/react-native-pager-view

setPageWithoutAnimation animates the pager on calling it after refresh

Offen
#610 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
3.4k
Forks
476
Ø Merge
10 T. 21 Std.
Gemergte PRs (30 T.)
2

Beschreibung

## 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,
},
})

```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem reproduzierbaren React Native-Beispiel und verfolge den von useEffect ausgeführten Aufruf von setPageWithoutAnimation, nachdem sich das days-Array geändert hat. Vergleiche sein Verhalten unter Android mit dem erwarteten Seitenwechsel ohne Animation. Ermittle anschließend die relevante verfügbare Regressionstestabdeckung im Repository und überprüfe, dass der Pager nicht mehr animiert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react-native, typescript
Bereich
mobile-dev
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.