Description
Description
When I was using FlatList to display a large list over 500 items in it, I faced a bug like problem. Pinching zoom the list will work fine, but if I scroll the list to the center when zoomScale was 2, then the items in the viewport ware disappeared. I'v guessed that the problem occurred while calculate clipped subviews without adding zoomScale. Is there every one else has another solution to resolve this problem? BTW I have set removeclippedsubviews false and implemented getItemLayout and it still not work fine. orz.
code are below
export default class TestView extends Component{
itemHeight = 600; data = Array.from({length: 500}, () => "#"+Math.floor(Math.random()*16777215).toString(16));
render() {
return <><TouchableOpacity style={{marginTop:100}} onPress={()=>{this.props.navigation.goBack()}}>Close
<FlatList data={this.data} keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => ( <View style={{height:this.itemHeight,width:"100%",backgroundColor:item}} />)}
contentContainerStyle={{height:this.data.length * this.itemHeight}}
maximumZoomScale={2} minimumZoomScale={1} bouncesZoom={false}/></>
}
}
Version
0.64.3
Output of npx react-native info
System:
OS: macOS 12.3.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 195.21 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.7.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 7.24.0 - /usr/local/bin/npm
Watchman: 2021.08.02.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 30, 31
Build Tools: 29.0.2, 31.0.0
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
export default class TestView extends Component{
itemHeight = 600; data = Array.from({length: 500}, () => "#"+Math.floor(Math.random()*16777215).toString(16));
render() {
return <><TouchableOpacity style={{marginTop:100}} onPress={()=>{this.props.navigation.goBack()}}>Close
<FlatList data={this.data} keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => ( <View style={{height:this.itemHeight,width:"100%",backgroundColor:item}} />)}
contentContainerStyle={{height:this.data.length * this.itemHeight}}
maximumZoomScale={2} minimumZoomScale={1} bouncesZoom={false}/></>
}
}
Snack, code example, screenshot, or link to a repository
No response