callstack / callstack/react-native-pager-view

setPageWithoutAnimation animates the pager on calling it after refresh

Abierto
#610 0 comentarios 0 reacciones 0 asignados Ver en GitHub
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.