react-native-pager-view
react-native-pager-view copied to clipboard
LazyPagerView, fast swipe may render empty page
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;
+1
+1
Same issue here. Did anyone fixed it?
https://github.com/callstack/react-native-pager-view/issues/673