Issue with scrolling content inside bottom sheet

[IslamRustamov]

So what I want to do is to create a bottom sheet with snap points of [60%, 90%], which renders webview inside of it.

I want it to be able to do the next things:

1. If I scroll down when I'm on initial snap point - I want my bottom sheet to open up to 90%
2. If I scroll up to the top of the webview - I want my bottom sheet to go to the initial snap point

This works great on iOS but there is an issue with Android. Take a look:

IMG_6891.MOV

This is happening because the webview content DOES NOT move together with the bottom sheet (as much as I understood, might be wrong tho), when I still hold my finger on the screen, so upon changing of the snap point it instantly thinks "hey, he already scrolled too far" and changes the snap point again and again and again.

Is there a way to achieve the same behaviour as in iOS? Or do you have other solutions in mind?

The code of the component looks like these:

import BottomSheet, {
  BottomSheetBackdrop,
  type BottomSheetBackdropProps,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { Platform, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const styles = StyleSheet.create({
  background: {
    borderRadius: 32,
  },
  webViewContainer: {
    flex: 1,
    minHeight: 100,
    borderRadius: 32,
    overflow: 'hidden',
  },
  webView: {
    flex: 1,
    height: 500,
    borderRadius: 32,
  },
  backdrop: {
    backgroundColor: 'rgba(28, 23, 24, .5)',
  },
  backgroundComponent: {
    backgroundColor: 'transparent',
  },
  indicator: {
    height: 4,
    width: 40,
    opacity: 0.5,
  },
  loaderContainer: {
    position: 'absolute',
    borderRadius: 32,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
    backgroundColor: 'white',
  },
});

const WebViewBottomSheet: React.FC = () => {
  const webViewRef = useRef<WebView>(null);

  const url = 'https://afina.app/landing-test';

  const bottomSheetRef = useRef<BottomSheet>(null);
  const [snapIndex, setSnapIndex] = useState(0); // 0: 60%, 1: 90%
  const snapPoints = useMemo(() => ['60%', '90%'], []);

  useEffect(() => {
    setSnapIndex(0);
  }, []);

  const handleSheetChange = useCallback((index: number) => {
    setSnapIndex(index);
  }, []);

  const renderBackdrop = useCallback(
    (backdropProps: BottomSheetBackdropProps) => {
      return (
        <BottomSheetBackdrop
          {...backdropProps}
          style={styles.backdrop}
          appearsOnIndex={0}
          disappearsOnIndex={-1}
          opacity={1}
          pressBehavior={'close'}
          accessible={false}
        />
      );
    },
    [],
  );

  const lastStateRef = useRef('atTop');

  const handleScroll = useCallback(
    (event: {
      persist: () => void;
      nativeEvent: { contentOffset: { y: number } };
    }) => {
      const scrollY = event.nativeEvent.contentOffset.y;

      const newState = scrollY > 15 ? 'scrolled' : 'atTop';

        if (newState !== lastStateRef.current) {
          lastStateRef.current = newState;

          if (newState === 'scrolled') {
            if (snapIndex === 0) {
              setSnapIndex(1);
            }
          }

          if (newState === 'atTop') {
            if (snapIndex === 1) {
              setSnapIndex(0);
            }
          }
        }
    },
    [snapIndex],
  );

  return (
    <BottomSheet
      ref={bottomSheetRef}
      snapPoints={snapPoints}
      index={snapIndex}
      enablePanDownToClose
      handleIndicatorStyle={styles.indicator}
      enableDynamicSizing={false}
      onChange={handleSheetChange}
      backdropComponent={renderBackdrop}
      backgroundStyle={styles.background}
    >
      <BottomSheetView style={styles.webViewContainer}>
        <WebView
          ref={webViewRef}
          source={{ uri: url }}
          style={styles.webView}
          originWhitelist={['*']}
          cacheEnabled={false}
          cacheMode="LOAD_NO_CACHE"
          startInLoadingState
          onScroll={handleScroll}
          scrollEnabled={false}
          nestedScrollEnabled={Platform.OS === 'android'}
        />
      </BottomSheetView>
    </BottomSheet>
  );
};

export default WebViewBottomSheet;