Updating ScrollView content while view is pinched in makes app unresponsive

[CptFabulouso]

Hi. We are displaying array of images in ScrollView and if we push new images while the Pinchable component is pinched in, the app is covered with gray overlay, which can't be discarded and makes the app unresponsive.

Here is simple code for reproduction. Launch the app, zoom in and wait for the timeout in useEffect

import React, { useEffect, useState } from 'react'
import { ScrollView, View, Image, Dimensions } from 'react-native'
import Pinchable from 'react-native-pinchable'

export default function App() {
	const [sources, setSources] = useState(
		new Array(20).fill(0).map((_, index) => 'https://picsum.photos/id/' + index + '/200/300'),
	)

	useEffect(() => {
		setTimeout(() => {
			const newSources = new Array(20)
				.fill(0)
				.map((_, index) => 'https://picsum.photos/id/' + (20 + index) + '/200/300')
			setSources(c => [...c, ...newSources])
		}, 5000)
	}, [])

	return (
		<View style={{ flex: 1 }}>
			<ScrollView pinchGestureEnabled={false}>
				{sources.map((image, index) => (
					<Pinchable key={index} minimumZoomScale={1} maximumZoomScale={3}>
						<Image
							style={{ width: Dimensions.get('window').width, height: 300 }}
							resizeMode="cover"
							source={{ uri: image }}
						/>
					</Pinchable>
				))}
			</ScrollView>
			<View style={{ flex: 1 }} />
		</View>
	)
}

Here is video of the code above:

Simulator.Screen.Recording.-.iPhone.11.Pro.Max.-.2022-05-26.at.11.23.12.mp4

In the place we are using this Pinchable component it behaves a little bit different and if I try to pinch in (after the error happens), the app crashes with following error.

*** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan nan]. Layer: <CALayer:0x600002bfe420; position = CGPoint (206 448); bounds = CGRect (0 0; 0 0); delegate = <RNPinchableView: 0x143cde530; reactTag: 10717; frame = (nan nan; 0 0); anchorPoint = (inf, inf); gestureRecognizers = <NSArray: 0x60000218e1c0>; layer = <CALayer: 0x600002bfe420>>; sublayers = (<CALayer: 0x60000282cb80>); opaque = YES; allowsGroupOpacity = YES; anchorPoint = CGPoint (inf inf); transform = CATransform3D (1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1); borderColor = (null)>'
*** First throw call stack:
(
	0   CoreFoundation                      0x000000010b8c7d70 __exceptionPreprocess + 236
	1   libobjc.A.dylib                     0x0000000108b1614c objc_exception_throw + 56
	2   CoreFoundation                      0x000000010b8c7c40 -[NSException initWithCoder:] + 0
	3   QuartzCore                          0x000000010b517afc -[CALayer setPosition:] + 384
	4   QuartzCore                          0x000000010b5181d8 -[CALayer setFrame:] + 424
	5   UIKitCore                           0x0000000120f7ffa4 -[UIView(Geometry) setFrame:] + 428
	6   ZootMobileApp                       0x0000000103c993f8 -[RNPinchableView handlePinchGesture:] + 1156
	7   UIKitCore                           0x000000012054eee0 -[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:] + 52
	8   UIKitCore                           0x000000012055820c _UIGestureRecognizerSendTargetActions + 112
	9   UIKitCore                           0x000000012055511c _UIGestureRecognizerSendActions + 316
	10  UIKitCore                           0x0000000120554720 -[UIGestureRecognizer _updateGestureForActiveEvents] + 632
	11  UIKitCore                           0x0000000120548d90 _UIGestureEnvironmentUpdate + 2036
	12  UIKitCore                           0x0000000120548134 -[UIGestureEnvironment _updateForEvent:window:] + 736
	13  UIKitCore                           0x0000000120a74350 -[UIWindow sendEvent:] + 4304
	14  UIKitCore                           0x0000000120a4c0fc -[UIApplication sendEvent:] + 784
	15  UIKitCore                           0x0000000120ada59c __dispatchPreprocessedEventFromEventQueue + 7720
	16  UIKitCore                           0x0000000120adc620 __processEventQueue + 6764
	17  UIKitCore                           0x0000000120ad4540 __eventFetcherSourceCallback + 184
	18  CoreFoundation                      0x000000010b836234 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 24
	19  CoreFoundation                      0x000000010b836134 __CFRunLoopDoSource0 + 204
	20  CoreFoundation                      0x000000010b8354c4 __CFRunLoopDoSources0 + 256
	21  CoreFoundation                      0x000000010b82fa18 __CFRunLoopRun + 744
	22  CoreFoundation                      0x000000010b82f218 CFRunLoopRunSpecific + 572
	23  GraphicsServices                    0x000000011173b60c GSEventRunModal + 160
	24  UIKitCore                           0x0000000120a2da98 -[UIApplication _run] + 992
	25  UIKitCore                           0x0000000120a32634 UIApplicationMain + 112
	26  ZootMobileApp                       0x0000000102d43dd0 main + 104
	27  dyld                                0x00000001076b9cd8 start_sim + 20
	28  ???                                 0x000000010740108c 0x0 + 4416606348
	29  ???                                 0x303d000000000000 0x0 + 3475934487399890944
)
libc++abi: terminating with uncaught exception of type NSException
dyld4 config: DYLD_ROOT_PATH=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot DYLD_LIBRARY_PATH=/Users/pavelgric/Library/Developer/Xcode/DerivedData/ZootMobileApp-cwmmojyrqvickmafcfxbhvwcllaw/Build/Products/Debug-iphonesimulator:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/usr/lib/system/introspection DYLD_INSERT_LIBRARIES=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/usr/lib/libBacktraceRecording.dylib:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/usr/lib/libMainThreadChecker.dylib:/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/Developer/Library/PrivateFrameworks/DTDDISupport.framework/libViewDebuggerSupport.dylib DYLD_FRAMEWORK_PATH=/Users/pavelgric/Library/Developer/Xcode/DerivedData/ZootMobileApp-cwmmojyrqvickmafcfxbhvwcllaw/Build/Products/Debug-iphonesimulator
terminating with uncaught exception of type NSException
*** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan nan]. Layer: <CALayer:0x600002bfe420; position = CGPoint (206 448); bounds = CGRect (0 0; 0 0); delegate = <RNPinchableView: 0x143cde530; reactTag: 10717; frame = (nan nan; 0 0); anchorPoint = (inf, inf); gestureRecognizers = <NSArray: 0x60000218e1c0>; layer = <CALayer: 0x600002bfe420>>; sublayers = (<CALayer: 0x60000282cb80>); opaque = YES; allowsGroupOpacity = YES; anchorPoint = CGPoint (inf inf); transform = CATransform3D (1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1); borderColor = (null)>'
CoreSimulator 802.6.1 - Device: iPhone 11 Pro Max (98939DCB-055B-4061-8565-431AE3AC31D6) - Runtime: iOS 15.5 (19F70) - DeviceType: iPhone 11 Pro Max

[yannisdev]

I have the same experience and a similar error. The error does not happen consistently though. However it only happens on iOS, not on android.

CALayer position contains NaN: [nan nan]. Layer: <CALayer:0x281d10d80; position = CGPoint (212 321); bounds = CGRect (0 0; 0 0); delegate = <RNPinchableView: 0x11a9795f0; reactTag: 5385; frame = (nan nan; 0 0); anchorPoint = (inf, inf); gestureRecognizers = <NSArray: 0x2810e3210>; layer = <CALayer: 0x281d10d80>>; sublayers = (<CALayer: 0x281d5b860>); opaque = YES; allowsGroupOpacity = YES; anchorPoint = CGPoint (inf inf); transform = CATransform3D (1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1); borderColor = (null)>
at 0 CoreFoundation 0x000000018abc929c 6B22DD81-3585-3BE6-BC77-BA19810EC0F2 + 627356
at 1 libobjc.A.dylib 0x00000001a38f9744 objc_exception_throw + 60
at 2 CoreFoundation 0x000000018ac20390 6B22DD81-3585-3BE6-BC77-BA19810EC0F2 + 983952
at 3 QuartzCore 0x000000018e894ebc DF21293E-9DBF-37A5-8506-D0C7F3D8646C + 143036
at 4 QuartzCore 0x000000018e94f5fc DF21293E-9DBF-37A5-8506-D0C7F3D8646C + 906748
at 5 QuartzCore 0x000000018e9676c8 DF21293E-9DBF-37A5-8506-D0C7F3D8646C + 1005256
at 6 UIKitCore 0x000000018d135c7c 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1604732
at 7 Solebich 0x0000000100f07a4c -[RNPinchableView handlePinchGesture:] + 1156
at 8 UIKitCore 0x000000018d18be20 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1957408
at 9 UIKitCore 0x000000018d155490 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1733776
at 10 UIKitCore 0x000000018d11e990 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1509776
at 11 UIKitCore 0x000000018d1577d8 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1742808
at 12 UIKitCore 0x000000018d1103ac 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1450924
at 13 UIKitCore 0x000000018d14375c 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1660764
at 14 UIKitCore 0x000000018d150a1c 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1714716
at 15 UIKitCore 0x000000018d2fe6fc 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 3475196
at 16 UIKitCore 0x000000018d124318 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1532696
at 17 UIKitCore 0x000000018d119070 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 1486960
at 18 UIKitCore 0x000000018df6a574 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 16500084
at 19 UIKitCore 0x000000018d786d5c 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 8228188
at 20 UIKitCore 0x000000018de0dedc 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 15072988
at 21 UIKitCore 0x000000018de0d6a4 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 15070884
at 22 CoreFoundation 0x000000018abeb414 6B22DD81-3585-3BE6-BC77-BA19810EC0F2 + 766996
at 23 CoreFoundation 0x000000018abfc1a0 6B22DD81-3585-3BE6-BC77-BA19810EC0F2 + 836000
at 24 CoreFoundation 0x000000018ab35694 6B22DD81-3585-3BE6-BC77-BA19810EC0F2 + 22164
at 25 CoreFoundation 0x000000018ab3b05c 6B22DD81-3585-3BE6-BC77-BA19810EC0F2 + 45148
at 26 CoreFoundation 0x000000018ab4ebc8 CFRunLoopRunSpecific + 600
at 27 GraphicsServices 0x00000001a6cba374 GSEventRunModal + 164
at 28 UIKitCore 0x000000018d4c2b58 137A95AA-DA6D-332C-BC01-E13BB9B6E317 + 5327704
at 29 UIKitCore 0x000000018d244090 UIApplicationMain + 364
at 30 Solebich 0x00000001002fe754 main + 104
at 31 dyld 0x0000000104759da4 start + 520

[jslok]

Any solution?

[CptFabulouso]

Sadly no, I didn't look into it any further. We used following workaroud, but not sure if it's applicable to you.
Our use case is that we first load low resolution images and then replace them with high resolution, so to avoid the crash we just disable the zooming feature while the highres images are loading.
Partial example code:

<View
	// Disable pinch to zoom until full size images are loaded, otherwise the app may crash
	pointerEvents={highResImagesLoaded ? 'auto' : 'none'}
>
	<Pinchable minZoom={1} maxZoom={3}>
		<Image source={image.source} />
	</Pinchable>
</View>

[pierroo]

I am also facing this issue; anyone found a fix for this? :/