CODEWITHSUNDEEP
reactjsreact-nativereact-modal
merry-go-round
merry-go-round

Reputation: 4615

Tap outside of modal to close modal (react-native-modal)

Anyone has experience of implementing react-native-modal? While I'm using it, modal isn't closed when I tap outside of modal.

Here is what I've tried

Here is my the screen where I want to show my modal.

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView>
               // CONTENT HERE
               {this._renderModal()} //rendering modal here
               <FABs onFABsPress={this._showModal} /> // I open Modal when I press the FABs button
            </ScrollView>
        </View>
    )
);

_renderModal = () => {
    return (
      <CameraImageSelectModal
        hideModal={this._hideModal}
        isModalVisible={this.state.isModalVisible}
        navigation={this.props.navigation}
      />
    )
}

Here is modal component : CameraImageSelectModal.js 

render() {
    let { isModalVisible } = this.props;
    return (
      <View>
        <Modal
          isVisible={isModalVisible}
          onBackdropPress={() => {console.log('hey')}}>
          transparent={true}>
          <View style={styles.modalContainer}>
            <View style={styles.modalTitleTextContainer}>
              <Text style={styles.modalTitleText}>Hello World</Text>
            </View>
            <View style={styles.modalContentTextContainer}>
              <Text style={styles.modalContentText}></Text>
            </View>
            <View style={styles.modalButtonContainer}>
              <Button transparent onPress={this._handleCameraPress}>
                <Text style={[styles.modalText, styles.black]}>Camera</Text>
              </Button>
              <Button transparent onPress={this._handleAlbumPress}>
                <Text style={styles.modalText}>Album</Text>
              </Button>
            </View>
          </View>
        </Modal>
      </View>

Thanks!!

Upvotes: 4

Views: 12336

Answers (4)

abdul Sami
abdul Sami

Reputation: 1

No need to use the BackDrop just simple apply touchable Opacity on the background View and set it to active Opcaity={0} works perfectly:

 <TouchableOpacity
    style={styles.starModalmainContainer}
    activeOpacity={0}
    onPress={()=>{setIsVisible(false)}}>  
// Modal Content
</TouchableOpacity>

Upvotes: 0

Evgeniy Andreevich
Evgeniy Andreevich

Reputation: 66

 <Modal
  isVisible={isModalVisible}
  customBackdrop={
    <View
      style={styles.backDropContainer}
      onTouchEnd={() => setModalVisible(false)}
    />
  }
  onBackdropPress={() => setModalVisible(false)}>
  <View style={styles.modalContainer}>
    <FlatList data={DATA} renderItem={() => <Text>hehehe</Text>} />
  </View>
</Modal>

Style:

const styles = StyleSheet.create({
  backDropContainer: {
    flex: 1,
    backgroundColor: 'black',
    opacity: 0.5,
  },
  modalContainer: {
    flex: 0.5,
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 10,
  },
});

Upvotes: 0

quirky purple
quirky purple

Reputation: 2219

I don't think the modal has that built in functionality, but you could create your own component that does. Here is a quick implementation. You might have to mess around with padding and margin to get it how you like, but this will allow the modal to be dismissed when pressing outside.

import React, { Component } from "react"
import { Modal, StyleSheet, View, TouchableHighlight } from "react-native"

const styles = StyleSheet.create({
  container: {
    zIndex: 1,
    margin: 25,
    backgroundColor: "white"
  },
  background: {
    flex: 1
  },
  outerContainer: {
    position: "absolute", 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    justifyContent: "center"
  }
})

const MyModal = props => (
  <Modal transparent={true} animationType={"slide"} visible={props.visible} onRequestClose={() => props.onRequestClose()}>
    <TouchableHighlight style={styles.background} onPress={() => props.onRequestClose()} underlayColor={"transparent"}>
      <View />
    </TouchableHighlight>
    <View style={ styles.outerContainer }>
      <View style={styles.container}>
        {props.children}
      </View>
    </View>
  </Modal>
)

export { MyModal }

Upvotes: 6

merry-go-round
merry-go-round

Reputation: 4615

I just figured out why onBackdropPress = {() => console.log("Pressed")} didn't work..!!! onBackdropPress property was added since its version 3.xx and I was using 2.5.0 version.

So yarn update react-native-modal solved the issue.

If anyone encounters the problem that the library/component doesn't work as expected as you seen on documentation, try to check your package version number!

Cheers!

Upvotes: 4

Related Questions