react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

offscreenPageLimit does not keep page position on rotate

Open adxzhang1 opened this issue 3 years ago • 0 comments

Environment

  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.2",
    "react-native-pager-view": "^6.1.2"
  },

On android emulator.

Description

When using offscreenPageLimit and pages that have flex: 1, after rotating the device the scroll position is not snapped to the page. It works if you do not use offscreenPageLimit.

https://user-images.githubusercontent.com/62089288/218283636-280a4779-6287-453a-a626-2ac472a8cb0f.mov

Reproducible Demo

import React from 'react';
import {Text, View} from 'react-native';
import PagerView from 'react-native-pager-view';

function App(): JSX.Element {
  return (
    <View style={{flex: 1}}>
      <PagerView
        style={{flex: 1}}
        offscreenPageLimit={2}
        orientation="vertical">
        {[1, 2, 3, 4, 5, 6].map((_, i) => (
          <View
            key={i}
            style={{flex: 1, backgroundColor: i % 2 === 0 ? 'red' : 'blue'}}>
            <Text>{i}</Text>
          </View>
        ))}
      </PagerView>
    </View>
  );
}

export default App;

adxzhang1 avatar Feb 11 '23 22:02 adxzhang1