Is there a way to make both the modal and background screen to be interactable.

[tryst6969]

import React, { useState, useEffect } from "react";
import {
Button,
StatusBar,
StyleSheet,
Text,
View,
TouchableOpacity,
ScrollView,
Image,
TouchableWithoutFeedback } from "react-native";
import Modal from "react-native-modal";
import CustomButton from "../CustomButton";
import Input from "../inputs";
import styles from "./styles";
import Config from "react-native-config";
import TestBlock from "./test/test";

const BottomNavComp = ({ preference }) => {
const [source, setSource] = useState('')
const [destination, setDestination] = useState('')
const [error, setError] = useState(null)
const [loading, setLoading] = useState(null)
const [isModalVisible, setModalVisible] = useState(false);
const [isModalVisible2, setModalVisible2] = useState(false);

const toggleModal = () => {
setModalVisible(!isModalVisible);
};

const slideModal = () => {
setModalVisible2(!isModalVisible2);
};

return (

  <StatusBar />
  <View >
    {/* Ignore this it is for modal */}
    <TouchableOpacity onPress={toggleModal} style={styles.btnContainer} >
      <Text style={styles.navtext}>Search</Text>
    </TouchableOpacity>
  </View>

  {/* Modal for the up and down bouncy animation */}
  
  <Modal
    propagateSwipe={true}
    hasBackdrop={false}
    backdropOpacity={0}
   //coverScreen={true}
   //transparent={false}
    onBackdropPress={() => setModalVisible(false)}
    onBackButtonPress={() => setModalVisible(false)}
    isVisible={isModalVisible}
    swipeDirection="down"
    onSwipeComplete={toggleModal}
    animationIn="bounceInUp"
    animationOut="bounceOutDown"
    animationInTiming={900}
    animationOutTiming={500}
    backdropTransitionInTiming={1000}
    backdropTransitionOutTiming={500}
    style={[styles.modal, {backgroundColor: 'rgba(0, 0, 0, 0)',}]}
    
  >
    
    {/* Ignore this its just styles for modal */}
    
    <View style={styles.modalContent}>
  <View style={styles.center}>
    <View style={styles.barIcon} />
  </View>
  <ScrollView
    style={{ flex: 1 }}
    horizontal={true}
    pagingEnabled={true}
    showsHorizontalScrollIndicator={false}
    pointerEvents="auto"
  >
    <TouchableOpacity>
      <TestBlock preference={preference} />
    </TouchableOpacity>
  </ScrollView>
</View>

);
}

export default BottomNavComp;

I have already tried turning the cover screen to false but it ruins the horizontal scrollview in the modal

[Lucasark]

Is not better https://github.com/gorhom/react-native-bottom-sheet ?