callstack / callstack/react-native-pager-view

setPageWithoutAnimation animates the pager on calling it after refresh

Open
#610 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.