Webview Android & @gorhom/bottom-sheet

View.js

import BottomSheet from '@gorhom/bottom-sheet';
import React from 'react';
import {StyleSheet, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import {createNativeWrapper} from 'react-native-gesture-handler';
import WebView from 'react-native-webview';
import {dimensions} from '../../constants/theme';

const Wrapper = createNativeWrapper(WebView);
const WebViewTest = () => {
  const sheetRef = React.useRef(null);
  const webview = React.useRef(null);

  const snapPoints = React.useMemo(
    () => [100 + dimensions.BOTTOM_SPACE, 600 + dimensions.BOTTOM_SPACE],
    [],
  );

  React.useEffect(() => {
    RNBootSplash.hide({fade: true});
  }, []);

  return (
    <View style={styles.v1}>
      <BottomSheet ref={sheetRef} snapPoints={snapPoints} waitFor={webview}>
        <Wrapper
          style={{
            width: dimensions.SCREEN_WIDTH,
            height: 600 + dimensions.BOTTOM_SPACE,
          }}
          ref={webview}
          source={{uri: 'https://www.youtube.com/'}}
        />
      </BottomSheet>
    </View>
  );
};

export default WebViewTest;

const styles = StyleSheet.create({
  v1: {
    flex: 1,
    backgroundColor: 'white',
  },
});