Quiero poder deslizar hacia abajo y cerrar el modal de pantalla completa.
Probé React-native-modal , pero no era adecuado para mi aplicación.
Probé el método usando GestureRecognizer en esta página y pude cerrar el modal, pero el modal no subía ni bajaba según el deslizamiento, lo que no es ideal para mí. Quiero cerrar el modal de pantalla completa con una animación como cuando especifico pageSheet en PresentationStyle.
Si sabe más al respecto, por favor hágamelo saber cómo hacerlo.
const RecordingModal = ({ open, close }) => { return ( <Modal animationType="slide" onSwipeComplete={close} presentationStyle="fullscreen" visible={open} > <SafeAreaView style={styles.modal}> <Text>aaaa</Text> <Text>aaaa</Text> </SafeAreaView> </Modal> ); };Prueba de esta manera
<GestureRecognizer style={{flex: 1}} onSwipeUp={ () => this.setModalVisible(true) } onSwipeDown={ () => this.setModalVisible(false) } > <Modal animationType="slide" presentationStyle="formSheet" visible={ modalVisible } > <Text>Swipe Down Please</Text> </Modal> <Text>Swipe Up Please</Text> </GestureRecognizer>También puede usar react-native-swipe-modal-up-down Siguiendo el uso
import SwipeUpDownModal from 'react-native-swipe-modal-up-down'; let [ShowComment, setShowModelComment] = useState(false); let [animateModal, setanimateModal] = useState(false); <SwipeUpDownModal modalVisible={ShowComment} PressToanimate={animateModal} //if you don't pass HeaderContent you should pass marginTop in view of ContentModel to Make modal swipeable ContentModal={ <View style={styles.containerContent}> <FlatList data={data} renderItem={({item, index}) => ( <item key={index} Data={item} /> )} keyExtractor={item => item.id} /> </View> } HeaderStyle={styles.headerContent} ContentModalStyle={styles.Modal} HeaderContent={ <View style={styles.containerHeader}> <Button Title={"Press Me"} onPress={() => { setanimateModal(true); }} /> </View> } onClose={() => { setModelComment(false); setanimateModal(false); }} /> const styles = StyleSheet.create({ containerContent: {flex: 1, marginTop: 40}, containerHeader: { flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center', height: 40, backgroundColor: '#F1F1F1', }, headerContent:{ marginTop: 0, }, Modal: { backgroundColor: '#005252', marginTop: 0, } });