Vertical scroll is not working for Android when nesting in a ScrollView

[DanStevensonDev]

Firstly thanks for making this package - it's been working great for my project requirements! 🙌

I have an issue where the scroll of the PanPinchView is disabled on Android in certain conditions:

I have a screen component:

<SafeAreaView flex={1} paddingTop={50}>
			<ScrollView gap={8}>
				{/* Other content here */}
				{/* `Board` is the PanPinchView component... */}
				<Board />
			</ScrollView>
		</SafeAreaView>

For the Board component I have:

		<View justifyContent='center' alignItems='center' alignSelf='center' borderWidth={1} marginVertical={50}>
			<PanPinchView
				ref={panPinchViewRef}
				minScale={1}
				initialScale={2}
				containerDimensions={CANVAS_DIMENSIONS}
				contentDimensions={CONTENT_DIMENSIONS}
			>
				<BoardContent />
			</PanPinchView>
		</View>

When the content in the screen is less than the screen height (so the scroll for the screen ScrollView isn't needed), then the PanPinchView interactions work fine.

When the content is larger than the screen height (so the ScrollView scroll is enabled), then the PanPinchView will not scroll the inner view vertically. Scrolling horizontally seems to work fine.

This is also only an issue for Android - on iOS it seems to scroll fine.

I have added nestedScrollEnabled (Android-only prop) to the outer screen ScrollView, but this has not had an effect (I guess this is not really relevant for functionality of the package's underlying gesture handler views).

Is there a way I can enable the PanPinchView scroll to work correctly when nested inside an outer ScrollView?

[fakeheal]

Hm, this is an interesting case.

Usually, it's advised to avoid nested scroll views with same orientation in react native. That's why vertical scroll doesn't work as you mentioned.

Can you create demo content for <BoardContent />, so I can help better?

[DanStevensonDev]

Thanks for the quick reply. Attached is the component and some test data that will populate the content.

The View you'll be able to see where we're using Gluestack doesn't do anything interesting, it's just a regular View with a backgroundColor:

import { createStyle } from "@gluestack-style/react";

export const View = createStyle({
	backgroundColor: "$backgroundBottom"
});

[DanStevensonDev]

Hi @fakeheal - thanks again for getting back to me yesterday and apologies for following up so soon. Is this something you've been able to replicate and do you have any suggestions on how to fix it?

Hopefully the content I provided is enough to replicate, and I also guess this is something that can be replicated with more minimal content. If there's any more info you need, please let me know.

Thanks again for building and supporting this great product!

[fakeheal]

Hey, @DanStevensonDev, unfortunately I am quite busy this week and I will not able to spend the time needed to look at your case in depth with the provided two files.

If you can spare few more minutes, would it be possible to provide a complete repository I can checkout and replicate the problem?

[DanStevensonDev]

Hi @fakeheal, thanks for this.

I have forked your repo and created a minimal replication here: https://github.com/DanStevensonDev/react-native-pan-pinch-view/tree/replicate-android-error

The two changes I made to your example screen are:

1. wrapped the screen in a ScrollView
2. made the content below the PanPinchView larger than the screen (enabling the scroll)

This then prevents the PanPinchView from scrolling vertically on Android devices. Scolling horizontally works, and pinching to zoom works in a limited way, if the pinch motion is done horizontally (i.e. fingers moving together horizontally, but not vertically).

Please let me know if you get chance to look at this.

[fakeheal]

@DanStevensonDev, Awesome! 🙌

I was able to run the repository and reproduce the problem in an Android emulator. I will take a look tonight.

One last question, are you, also, using an emulator or a real device? What are their specs - android version, model, etc?

[DanStevensonDev]

@fakeheal - great, thanks! 🙌

These are the devices I've tested with...

The emulator is: Pixel_3a_API_34_extension_level_7_arm64-v8a
The real device is: Moto e6s Android version 9

[fakeheal]

@DanStevensonDev

The issue comes from the react-native-gesture-handler. The PanPinchView doesn't implement any ScrollViews, so my initial assumption that nested ScrollViews were causing problems was wrong.

After spending several hours trying to figure out a way to make this library work if it's put inside a scroll view for almost all use cases, I came to the conclusion that implementing such "feature" is kind of out of scope of the library right now. :(

Here's a great write-up of someone who has faced this issue fairly recently and proposed solutions:
It's hard to understand how to compose gestures with ScrollView@react-naitve-gesture-handler.

Possible workarounds (depending on how flexible your specifications are):

• Move out the PanPinchView out of the ScrollView
• Replace the ScrollView with FlatList and add the PanPinchView as its Header (?, this might produce weird results, tho :D)

[DanStevensonDev]

@fakeheal - thanks very much for looking into this and for the explanation. Totally understand - scrolls within scrolls can be complicated/weird 😄

We might be able to keep using the package by moving it out of the ScrollView - I hope so because it's a great package!

Thanks again!