callstack / callstack/react-native-pager-view
setPageWithoutAnimation animates the pager on calling it after refresh
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
## 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,
},
})
```
Contributor guide
Assessment
This issue has not been assessed yet.