callstack / callstack/react-native-pager-view
setPageWithoutAnimation animates the pager on calling it after refresh
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
## 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,
},
})
```
Guía de contribución
Línea de trabajo
Comienza con el ejemplo reproducible de React Native y sigue la llamada a setPageWithoutAnimation realizada desde useEffect después de que cambie el array days. Compara su comportamiento en Android con el cambio de página no animado esperado y, a continuación, identifica la cobertura de regresión relevante disponible en el repositorio y verifica que el pager ya no se anima.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react-native, typescript
- Área
- mobile-dev
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100