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

LazyPagerView, fast swipe may render empty page

Open ekoooo opened this issue 3 years ago • 3 comments

Environment

"react-native": "0.64.1",
"react-native-pager-view": "^6.0.0-rc.0",
"react-native-reanimated": "^2.2.2",
System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Memory: 246.67 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.13.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
      Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 26.0.1, 26.0.3, 27.0.3, 28.0.2, 28.0.3, 29.0.2
      System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-P | Google Play Intel x86 Atom
      Android NDK: 21.1.6352462
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7583922
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_181 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Description

When render large content pages, fast swipe to the third page and back first page may render empty page.

https://dd-static.jd.com/ddimg/jfs/t1/156850/36/20822/7844751/6163f866E173f6bf4/13b87e1dd17ac8cd.gif

Reproducible Demo

import React, {useCallback, useState} from 'react';
import {Animated, SafeAreaView, ScrollView, Text} from 'react-native';
import {LazyPagerView} from 'react-native-pager-view';

const AnimatedPagerView = Animated.createAnimatedComponent(LazyPagerView);

const Test2: React.FC = () => {
  const [list] = useState([{id: 0}, {id: 1}, {id: 2}]);

  const keyExtractor = useCallback((item: any) => String(item.id), []);
  const renderItem = useCallback(({item}) => {
    const content = new Array(1000).fill(Math.random());

    return (
      <ScrollView style={{flex: 1, backgroundColor: '#eee'}}>
        <Text style={{fontSize: 40, fontWeight: 'bold', color: 'red'}}>
          {item.id}
        </Text>
        <Text>{content.join('')}</Text>
      </ScrollView>
    );
  }, []);

  return (
    <SafeAreaView style={{flex: 1}}>
      <AnimatedPagerView
        style={{flex: 1}}
        data={list}
        initialPage={0}
        buffer={1}
        maxRenderWindow={3}
        orientation="horizontal"
        keyExtractor={keyExtractor}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

export default Test2;

ekoooo avatar Oct 11 '21 09:10 ekoooo

+1

jiantao88 avatar Jan 17 '22 06:01 jiantao88

+1

kiyosoft avatar Feb 04 '22 09:02 kiyosoft

Same issue here. Did anyone fixed it?

dhameliyadharmesh avatar Feb 07 '22 12:02 dhameliyadharmesh

https://github.com/callstack/react-native-pager-view/issues/673

troZee avatar Dec 20 '22 17:12 troZee