React native gesture handler overwrites on android but not on ios - react-native

Question

I was wondering why my react native if i wrap scrollview with gesture detector, I'm unable to scroll on android but able to scroll on ios. I was wondering how I can make my scrollview work on android.
Thanks!
const gest = Gesture.Pan().onUpdate((e) => {...})
return(
<GestureDetector gesture={roomGestureTV}>
<ScrollView ... />
</GestureDetector>
)

Answer 1

Here is a Snack that shows how to wrap a ScrollView with a PanGesture (Snack or below for future reference). I have tested the code on a Galaxy S9 (Android) and iPhone 13 (Real and Emulator).
Some notes (See the snack first!):
The behaviour for android and IOS gestures differs, because they (react-native-gesture-handler) had to implement a custom solution on Android but not on IOS. On Android the pan gesture cancels the ScrollView gesture, but on IOS the ScrollView cancels the PanGesture. In both cases PanGesture and Scroll gesture do not work simultanously out of the box.
Use createNativeWrapper instead of the ScrollView from gesture handler. While the ScrollView from gesture handler will work, other components that build on ScrollView will not (e.g. FlatLists). In order to use a FlatList instead of a ScrollView, exchange the ScrollView with a FlatList in createNativeWrapper
createNativeWrapper is no longer activly supported by the libary (Source). However, the new/old Native Gesture Component is not working for this use case (at least for me). This might be a bug and might be fixed in newer versions.
Note that simultaneousHandlers for the ScrollView is not limited to one gesture but can accept multiple gestures. E.g. it is possible to have a pan and pinch gesture while scrolling.
Reference Code
import React, { useRef } from 'react';
import { Text, View, ScrollView } from 'react-native';
import Animated, {
useDerivedValue,
useSharedValue,
useWorkletCallback,
} from 'react-native-reanimated';
import {
createNativeWrapper,
GestureHandlerRootView,
Gesture,
GestureDetector,
} from 'react-native-gesture-handler';
import ReText from './components/ReText';
/**
* Gesture states
* (see https://docs.swmansion.com/react-native-gesture-handler/docs/under-the-hood/states-events)
*/
const STATES = {
0: 'UNDETERMINED',
1: 'FAILED',
2: 'BEGAN',
3: 'CANCELLED',
4: 'ACTIVE',
5: 'END',
};
const CustomScrollComponent = createNativeWrapper(ScrollView)
export default function App() {
const panRef = useRef(null);
const scrollRef = useRef(null);
// Log values
const touchPosition = useSharedValue({ x: null, y: null });
const touchPositionX = useDerivedValue(() => {
return `x: ${touchPosition.value.x}`;
});
const touchPositionY = useDerivedValue(() => {
return `y: ${touchPosition.value.y}`;
});
const state = useSharedValue([STATES[0], 'null', 'null']);
const stateString = useDerivedValue(() => {
return `${state.value[0]}\n${state.value[1]}\n${state.value[2]}`;
});
const appendState = useWorkletCallback((arr, value) => {
return [value].concat(arr.slice(0, 2));
}, []);
const panGesture = Gesture.Pan()
.onBegin((e) => {
state.value = appendState(state.value, STATES[e.state]);
})
.onStart((e) => {
state.value = appendState(state.value, STATES[e.state]);
})
.onUpdate((e) => {
if (state.value[0] !== STATES[e.state]) {
state.value = appendState(state.value, STATES[e.state]);
}
touchPosition.value = { x: e.absoluteX, y: e.absoluteY };
})
.onEnd((e) => {
state.value = appendState(state.value, STATES[e.state]);
})
.onFinalize((e) => {
state.value = appendState(state.value, STATES[e.state]);
touchPosition.value = { x: null, y: null };
})
.simultaneousWithExternalGesture(scrollRef)
.withRef(panRef);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{/** Logger */}
<View style={{ padding: 16, height: 180, justifyContent: 'flex-end' }}>
<ReText text={touchPositionX} />
<ReText text={touchPositionY} />
<Text>Gesture States (New -> Old):</Text>
<ReText text={stateString} />
</View>
{/** ScrollView with pan gesture */}
<GestureDetector gesture={panGesture}>
<Animated.View style={{ flex: 1 }}>
<CustomScrollComponent
disallowInterruption={false}
scrollEnabled={true}
ref={scrollRef}
style={{ flex: 1 }}
simultaneousHandlers={panRef}>
<Text>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
</Text>
</CustomScrollComponent>
</Animated.View>
</GestureDetector>
</View>
</GestureHandlerRootView>
);
}