callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.72k stars 418 forks source link

[iOS] New dynamic page can't be scrolled to unless scrolled back #791

Closed kbkmn closed 10 hours ago

kbkmn commented 11 months ago

ios react-native 0.72.6 react-native-pager-view 6.2.2

https://github.com/callstack/react-native-pager-view/assets/410534/43cd5c62-4398-4133-840f-22d9b4789d8e

The most basic setup:

const TabView = () => {
  const ref = useRef<PagerView>(null);
  const [pages, setPages] = useState<number[]>([0]);

  const renderPages = useMemo(
    () =>
      pages.map(page => (
        <View key={page} style={{flexGrow: 1, padding: 8}}>
          <Text style={{fontSize: 30}}>#{page}</Text>
        </View>
      )),
    [pages],
  );

  return (
    <>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <Button
          title="Add"
          onPress={() => {
            setPages(current => [...current, current.length]);
          }}
        />
      </View>

      <PagerView ref={ref} initialPage={0} style={{flexGrow: 1}}>
        {renderPages}
      </PagerView>
    </>
  );
};
michalkvasnicak commented 2 months ago

We have same issue on vertical orientation.

MrRefactor commented 10 hours ago

Fixed in https://github.com/callstack/react-native-pager-view/pull/898