feat: add BottomSheetWebView, use it on non-sensitive scene.

apps/mobile/src/components/customized/BottomSheetWebView.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
+
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useBottomSheetGestureHandlers } from '@gorhom/bottom-sheet';
+
+import WebView, { WebViewProps } from 'react-native-webview';
+
+type BottomSheetWebViewProps = WebViewProps & {};
+
+function checkIsAtTop(yValue: number) {
+  'worklet';
+  return yValue <= 5;
+}
+
+const BottomSheetWebViewComponent = React.forwardRef<
+  WebView,
+  BottomSheetWebViewProps
+>((props: BottomSheetWebViewProps, ref) => {
+  const { ...webviewProps } = props;
+
+  const { contentPanGestureHandler } = useBottomSheetGestureHandlers();
+
+  const [isReachTop, setIsReachTop] = React.useState(true);
+
+  const { gesture } = React.useMemo(() => {
+    const mGesture = Gesture.Pan()
+      .enabled(isReachTop)
+      .shouldCancelWhenOutside(false)
+      .runOnJS(false)
+      .onStart(contentPanGestureHandler.handleOnStart)
+      .onChange(contentPanGestureHandler.handleOnChange)
+      .onEnd(contentPanGestureHandler.handleOnEnd)
+      .onFinalize(contentPanGestureHandler.handleOnFinalize);
+
+    const native = Gesture.Native()
+      .shouldActivateOnStart(true)
+      .disallowInterruption(true);
+
+    const finalGesture = Gesture.Simultaneous(native, mGesture);
+
+    return {
+      gesture: finalGesture,
+    };
+  }, [
+    isReachTop,
+    contentPanGestureHandler.handleOnStart,
+    contentPanGestureHandler.handleOnChange,
+    contentPanGestureHandler.handleOnEnd,
+    contentPanGestureHandler.handleOnFinalize,
+  ]);
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <WebView
+        scrollEnabled={true}
+        nestedScrollEnabled={true}
+        {...webviewProps}
+        ref={ref}
+        onScroll={e => {
+          webviewProps?.onScroll?.(e);
+
+          const isReachTop = checkIsAtTop(e.nativeEvent.contentOffset.y);
+          setIsReachTop(isReachTop);
+        }}
+        style={[webviewProps?.style]}
+      />
+    </GestureDetector>
+  );
+});
+
+export const BottomSheetWebView = React.memo(BottomSheetWebViewComponent);
+BottomSheetWebView.displayName = 'BottomSheetWebView';
+
+export default BottomSheetWebView;

apps/mobile/src/screens/ManagePassword/components/UserAgreementLikeModalInner.tsx

@@ -14,9 +14,9 @@ import {
 import { MODAL_NAMES } from '@/components/GlobalBottomSheetModal/types';
 
 import AutoLockView from '@/components/AutoLockView';
-import WebView from 'react-native-webview';
 import { APP_UA_PARIALS } from '@/constant';
 import { checkShouldStartLoadingWithRequestForTrustedContent } from '@/components/WebView/utils';
+import BottomSheetWebView from '@/components/customized/BottomSheetWebView';
 
 export function useShowUserAgreementLikeModal() {
   const openedModalIdRef = React.useRef<string>('');
@@ -25,6 +25,9 @@ export function useShowUserAgreementLikeModal() {
       name: MODAL_NAMES.TIP_TERM_OF_USE,
       title: '',
       bottomSheetModalProps: {
+        rootViewType: 'View',
+        enableContentPanningGesture: true,
+        enablePanDownToClose: true,
         onDismiss: () => {
           removeGlobalBottomSheetModal(openedModalIdRef.current);
           openedModalIdRef.current = '';
@@ -39,6 +42,9 @@ export function useShowUserAgreementLikeModal() {
       name: MODAL_NAMES.TIP_PRIVACY_POLICY,
       title: '',
       bottomSheetModalProps: {
+        rootViewType: 'View',
+        enableContentPanningGesture: true,
+        enablePanDownToClose: true,
         onDismiss: () => {
           removeGlobalBottomSheetModal(openedModal2IdRef.current);
           openedModal2IdRef.current = '';
@@ -84,15 +90,15 @@ export function UserAgreementLikeModalInner({ uri }: { uri: string }) {
 
   return (
     <AutoLockView
-      as="BottomSheetView"
+      as="View"
       style={[styles.container, { paddingBottom: safeOffBottom }]}>
       <View style={styles.topContainer}>
         {/* <View style={styles.titleArea}>
           <Text style={styles.title}>New Version</Text>
           <Text style={styles.subTitle}>{remoteVersion.version}</Text>
         </View> */}
         <View style={[styles.bodyScrollerContainer]}>
-          <WebView
+          <BottomSheetWebView
             style={styles.webviewInst}
             cacheEnabled
             startInLoadingState