I am using @gorhom/bottom-sheet library. I have a list of items. The list is increasing and decreasing when items becomes more and more the modal is going out of screen. the top of modal becomes unseeable.

import React, { useCallback, useEffect, useRef, useState } from "react"
import { ModalOptions } from "./modal.context"
import { Image, useWindowDimensions, View } from "react-native"
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"
import {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetBackgroundProps,
  BottomSheetFooter,
  BottomSheetFooterProps,
  BottomSheetModal,
  BottomSheetModalProps,
  BottomSheetScrollView,
} from "@gorhom/bottom-sheet"
import { AppConfig } from "../../app/app.config"
import { useOrientation } from "../../hook/use-orientation.hook"

export function Modal({
  isOpened,
  close,
  options,
  ...props
}: {
  isOpened: boolean
  close: () => void
  options: ModalOptions
} & Omit<BottomSheetModalProps, "children">) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const { width, height } = useWindowDimensions()
  const orientation = useOrientation()
  const ref = useRef<BottomSheetModal>(null)
  const [isKeyboardVisible, setKeyboardVisible] = useState(false)
  const keyboard = options.keyboard ? options.keyboard : "100%"

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  useEffect(() => {
    if (!ref.current) return
    if (!isOpened) {
      if (options?.onClose) {
        options.onClose()
      }

      ref.current.dismiss()
    } else {
      ref.current.present()
    }
  }, [isOpened, options])

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        opacity={0.6}
      />
    ),
    [],
  )

  const renderBackgroundWithPattern = useCallback(
    (props: BottomSheetBackgroundProps) => {
      return (
        <View
          style={[
            props.style,
            {
              backgroundColor: "white",
              borderTopLeftRadius: 15,
              borderTopRightRadius: 15,
            },
          ]}
        >
          <Image
            source={require("../../../public/images/icons_bg.png")}
            style={{
              position: "absolute",
              width: "100%",
              height: 70,
              zIndex: -1,
              top: 0,
              resizeMode: "cover",
            }}
          />
        </View>
      )
    },
    [],
  )

  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
    return (
      <BottomSheetFooter
        {...props}
        style={{
          height: "100%",
          justifyContent: "flex-end",
        }}
      >
        <View pointerEvents="none">
          <Image
            source={require("../../../public/images/rainbow_footer_small_3.png")}
            style={{
              width: 153,
              height: 127.5,
            }}
          />
        </View>
      </BottomSheetFooter>
    )
  }, [])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function getMarginHorizontal() {
    if (AppConfig.isTablet) {
      return orientation === "landscape" ? width / 3 : width / 4
    } else {
      return orientation === "landscape" ? width / 4 : 0
    }
  }

  // ---------------------------------------------------------------------------
  return (
    <BottomSheetModal
      index={0}
      backdropComponent={renderBackdrop}
      onDismiss={() => close()}
      enableDismissOnClose={true}
      contentHeight={options.height}
      {...props}
      ref={ref}
      // enableOverDrag={false}
      snapPoints={isKeyboardVisible ? [keyboard] : props.snapPoints}
      enableDynamicSizing={isKeyboardVisible ? false : true}
      style={[
        options.style,
        {
          marginHorizontal: getMarginHorizontal(),
        },
      ]}
      backgroundComponent={
        options.background === "pattern"
          ? renderBackgroundWithPattern
          : undefined
      }
      footerComponent={options.footer === "rgb" ? renderFooter : undefined}
      handleStyle={options.handleStyle}
      containerStyle={[options.containerStyle]}
      backgroundStyle={options.backgroundStyle}
      handleIndicatorStyle={[
        options.handleIndicatorStyle,
        { backgroundColor: "#E6E6E6" },
      ]}
      // onChange={handleSheetChanges}
    >
      {/* todo: remove ScrollView once https://github.com/gorhom/react-native-bottom-sheet/issues/1573 fixed */}
      <BottomSheetScrollView scrollEnabled={options.scrollEnabled}>
        <KeyboardAwareScrollView
          contentContainerStyle={{ flexGrow: 1 }}
          scrollEnabled={false}
          enableResetScrollToCoords={true}
          keyboardShouldPersistTaps="handled"
          onKeyboardWillShow={() => setKeyboardVisible(true)}
          onKeyboardWillHide={() => setKeyboardVisible(false)}
        >
          <View>{options.component}</View>
        </KeyboardAwareScrollView>
      </BottomSheetScrollView>
    </BottomSheetModal>
  )
}

I tried to gives flex: 1 the container style but it doesn’t help. I also add topInset to BottomSheetModal but not solved problem.
I cannot scroll list. The footer is disappeared.
How to fix it? I’ll be appreciate if someone help me!!