Control scroll

Gallery.tsx

import React, {useRef, useState} from 'react';
import {FlatList, Image, useWindowDimensions} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import Animated, {useSharedValue} from 'react-native-reanimated';

// array of 3 images
const images = [
  {id: 1, url: 'https://picsum.photos/id/237/200/300'},
  {id: 2, url: 'https://picsum.photos/id/238/200/300'},
  {id: 3, url: 'https://picsum.photos/id/239/200/300'},
];

function Page({item}) {
  const dimensions = useWindowDimensions();

  const [imageDimensions, setImageDimensions] = useState({
    width: 1,
    height: 1,
  });

  return (
    <Image
      source={{
        uri: item.url,
      }}
      style={{
        height: imageDimensions.height,
        width: imageDimensions.width,
      }}
      onLoad={({nativeEvent}) => {
        const scaleFactor = nativeEvent.source.width / dimensions.width;

        setImageDimensions({
          width: dimensions.width,
          height: nativeEvent.source.height / scaleFactor,
        });
      }}
    />
  );
}

function ScrollComponent(props) {
  const maybeBlockScrollRef = useRef(Gesture.Manual());
  const scrollEnabled = useSharedValue(false);

  const panGesture = Gesture.Pan()
    .onChange(evt => {
      if (Math.abs(evt.translationX) > 100) {
        scrollEnabled.value = true;
      }
    })
    .onEnd(() => {
      scrollEnabled.value = false;
    });

  const maybeBlockScroll = Gesture.Tap()
    .maxDuration(100000)
    .onTouchesMove((evt, state) => {
      if (scrollEnabled.value) {
        // enables scrolling
        state.fail();
      }
    })
    .simultaneousWithExternalGesture(panGesture)
    .withRef(maybeBlockScrollRef);

  const scrollViewGesture = Gesture.Native()
    // in onTouchesMove we check if the scroll is enabled and if it is we `fail` the gesture
    .requireExternalGestureToFail(maybeBlockScroll);

  return (
    <>
      <GestureDetector gesture={maybeBlockScroll}>
        <GestureDetector
          gesture={Gesture.Simultaneous(panGesture, scrollViewGesture)}>
          <Animated.ScrollView scrollEventThrottle={1} {...props} />
        </GestureDetector>
      </GestureDetector>
    </>
  );
}

function App() {
  return (
    <FlatList
      data={images}
      contentContainerStyle={{
        alignItems: 'center',
      }}
      horizontal
      pagingEnabled
      renderScrollComponent={props => <ScrollComponent {...props} />}
      keyExtractor={item => item.id.toString()}
      renderItem={({item}) => <Page item={item} />}
    />
  );
}

export default App;