Zoom issues with react native gesture

[khriscito]

I've made a componente called ZoomableScrollView, this work perfectly in IOS , but is having wrong behaviour in android, can someone help me?

The behaviour in android is this:

-When you tap+swipe to any of the sides (up, down, left, right) the screen goes to the top by itself -After this tap, if you don't release your finger from the screen, scrolling and zooming are working perfectly -If you release your finger from the screen and then tap the screen again, the behavior of 1 is repeated.

I've tried to use GestureHandlerRootView to fix this but its not working at all nothing is shown when i use it

Can someone please give me a hand with this? i'm actually desesperated since i can't find any solution for this

this is my zoomableview component

import React, { useRef, useState, useEffect } from 'react';
import { View, Image, StyleSheet, PanResponder, Animated } from 'react-native';
import { PinchGestureHandler, State, PanGestureHandler, TapGestureHandler} from 'react-native-gesture-handler';

const ZoomableScrollView = ({ children }) => {
  const [scale, setScale] = useState(1);
  const baseScale = useRef(new Animated.Value(1)).current;
  const pinchScale = useRef(new Animated.Value(1)).current;
  const scaleValue = useRef(1);
  const pan = useRef(new Animated.ValueXY()).current;
  const [doubleTapDetected, setDoubleTapDetected] = useState(false);

  useEffect(() => {
    let timer;
    if (doubleTapDetected) {
      timer = setTimeout(() => {
        setDoubleTapDetected(false);
      }, 100); 
    }
    return () => clearTimeout(timer);
  }, [doubleTapDetected]);

  const onPinchGestureEvent = Animated.event(
    [
      {
        nativeEvent: { scale: pinchScale },
      },
    ],
    { useNativeDriver: true }
  );

  const onPinchHandlerStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      scaleValue.current *= event.nativeEvent.scale;
      baseScale.setValue(scaleValue.current);
      pinchScale.setValue(1);
    }
  };

  const panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderRelease: () => {
      Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: false }).start();
      scrollRef.current.setNativeProps({ scrollEnabled: true });
    },
  });

  const scrollRef = useRef(null);

  return (
    <PinchGestureHandler
      onGestureEvent={onPinchGestureEvent}
      onHandlerStateChange={onPinchHandlerStateChange}
      scale={scale}
      simultaneousHandlers={panResponder}
    >
      <Animated.View style={styles.container}>
        <PanGestureHandler
          onGestureEvent={Animated.event([{ nativeEvent: { translationX: pan.x, translationY: pan.y } }], { useNativeDriver: false })}
        >
          <Animated.View style={styles.container}>
            <TapGestureHandler
              onHandlerStateChange={({ nativeEvent }) => {
                if (nativeEvent.state === State.ACTIVE) {
                  setDoubleTapDetected(true);
                }
              }}
              numberOfTaps={2}
            >
              <Animated.View style={styles.container}>
                <Animated.ScrollView
                  ref={scrollRef}
                  contentContainerStyle={styles.contentContainer}
                  maximumZoomScale={5}
                  minimumZoomScale={1}
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                  bouncesZoom={true}
                  pinchGestureEnabled={true}
                  scrollEnabled={true}
                  style={{ width: '100%', height: '100%' }}
                >
                  <Animated.View
                    style={[
                      styles.imageContainer,
                      {
                        transform: [
                          { scale: baseScale },
                          { translateX: pan.x },
                          { translateY: pan.y },
                        ],
                      },
                    ]}
                  >
                    {children}
                  </Animated.View>
                </Animated.ScrollView>
              </Animated.View>
            </TapGestureHandler>
          </Animated.View>
        </PanGestureHandler>
      </Animated.View>
    </PinchGestureHandler>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexGrow: 1
  },
  contentContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default ZoomableScrollView

and this is the fragment of component where i'm trying to use it

<GestureHandlerRootView style={{ flex: 1 }}>
  <ZoomableScrollView style={styles.container}>
    <View style={styles.imageContainer}>
      <Image source={{ uri: sillasImageUrl }} style={styles.image} />
    </View>
    <View style={styles.sillasContainer}>
      {sillasData.map((row, rowIndex) => (
        <View key={rowIndex} flexDirection="row">
          {row.map((chair, chairIndex) => (
            <TouchableOpacity
              key={`${rowIndex}-${chairIndex}`}

              style={{
                width: chairSize,
                height: chairSize,
                backgroundColor: chair.status == "0" ? "transparent": chair.sold == "0"? "green": chair.sold == "2"? "blue": "red",
                margin: 1,
              }}
              
              onPress={() => handleChairPress(chair)}
            />
          ))}
        </View>
      ))}
    </View>
  </ZoomableScrollView>
  </GestureHandlerRootView>