FlatList items are disappeared after pinching zoom

[vinsongeo]

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

[vinsongeo]

Finally, I know this bug can be fixed by adding [/ e.nativeEvent.zoomScale;] into _onScroll of VirtualizedList.js

let offset = this._selectOffset(e.nativeEvent.contentOffset) / e.nativeEvent.zoomScale;

I hope this problem could be fixed by next version.

[vinsongeo]

onScroll={(event) => { event.nativeEvent.contentOffset.y = event.nativeEvent.contentOffset.y / event.nativeEvent.zoomScale; }}