react-native-modal / react-native-modal

An enhanced, animated, customizable Modal for React Native.
MIT License
5.48k stars 618 forks source link

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

Open tryst6969 opened 1 year ago

tryst6969 commented 1 year ago

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 (

{/* Ignore this it is for modal */} Search {/* Modal for the up and down bouncy animation */} 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 */}

); }

export default BottomNavComp;

test 1

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

Lucasark commented 1 year ago

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