React-native pop up ,React-native Pop up hide on the touch of outside the pop up,

Hide the Modal on the touch of outside the view

Working with react-native there are many cases when you want and need to show the pop up,like when verificationis done of password, Otp verificationor you want to make custom Drop dwon and many other cases,
and all these case you want on touch of out side the pop-up, pop-up should be dismiss, you can do this with the help of Modal in react-native,
you can mangae the touch of out side the view and in side the view both , we can use the touchablewithoutfeedback but with the help of touchablewithoutfeedback you can't stop the touch of inside, if you use touchablewithoutfeedback and your user touch inside the view your view will be disapper,
In this Post we learn how to manage the touch out side and inside the view:-

 

first of all import Modal from the react-native 

import{Modal,View,TouchableOpacityWithOutFeedBack,Text} 

After Importing the Modal set the state - 

*if Your are using the Class component:-

constructor(props){
    super(props)
      this.state={
        modalVisiable: false,

      }

  }

* if Your are using the functional component:-

const[modalVisiable, SetModalVisiable] = useState('false')

After you done this disign the Modal design what you want to show in pop-up in my case i take 3 textInput and one touchable opacity:-


here is the fullcode for the class component change it according to your use :- 

import React,{ Component }from 'react';
import {View,Text,TouchableOpacity,Image,TextInput,Dimensions,Platform,Modal,TouchableWithoutFeedback,} from 'react-native';

export default class HomeScreen extends Component {

  constructor(props){
      super(props)
        this.state={
          modalVisiable: false,
 
        }
    }
  render(){
  return(
    <View style={{flex: 1,alignItem: 'center',justifyContent: 'center'}}>
     <TouchableOpacity
      onPress={()=>this.setState({modalVisiable: true})}
      >
      <Text style={{hight: 50,width: 150,textAlign: 'center',backGroundColor:'Green'}}>Open PopUp</Text>
    </TouchableOpacity>
 
      <Modal
 
  animationType="fade"
  transparent={true}
  visible={this.state.modalVisiable}
  onRequestClose={() => { modalVisiable(false) }}
 
 
  >
  <TouchableWithoutFeedback style={{ backgroundColor: 'red', height: 800 }}
      onPress={() => { this.setState({modalVisiable: false}) }}>
      <View style={{ backgroundColor: "#000000aa", flex: 1, bottom: 0, top: 0,
      alignItems: 'center',justifyContent: 'center', width: Dimensions.get('window').width, position: 'absolute' }}
      >
          <View style={{
              backgroundColor: "#ffffff", borderRadius: 10,
             position: 'absolute', justifyContent: 'center', alignItems: 'center',
              alignSelf: 'center', right: 10, left: 10,height: Dimensions.get('window').height/2
          }}
              onStartShouldSetResponder={() => true}//this line does the magic you want add this line in the view you want to disable the effect of touchalewithoutfeedback
          >
 
  <TextInput
                  style ={{height: 40, marginLeft: 15,paddingLeft: 10,marginRight: 15,borderWidth: 1,borderRadius: 2,marginTop: 15,width: Dimensions.get('window').width-30}}
                  value={this.state.name}
                  placeholder = "Enter Your Name"
 
                  ></TextInput>
                   <TextInput
                  style ={{height: 40, marginLeft: 15,paddingLeft: 10,marginRight: 15,borderWidth: 1,borderRadius: 2,marginTop: 15,width: Dimensions.get('window').width-30}}
                  placeholder = "Enter Your Gender"
 
                  ></TextInput>
                   <TextInput
                  style ={{height: 40, marginLeft: 15,paddingLeft: 10,marginRight: 15,
                  borderWidth: 1,borderRadius: 2, marginTop: 15,width: Dimensions.get('window').width-30}}
                  placeholder = "YYYY-MM-DD"     
                      ></TextInput>
 
  <TouchableOpacity style={{height: 50, width:200, alignSelf: 'center',backgroundColor: '#eb7a34',marginTop: 20,
                alignItems: 'center',justifyContent: 'center',borderRadius: 10}}
                onPress={()=>{ this.setState({modalVisiable: false})
          }}    
                >
                  <Text style={{fontSize: 20,color : 'white'}}>Update</Text>
                </TouchableOpacity>   
          </View>
      </View>
  </TouchableWithoutFeedback>
  </Modal>
  </View>
  )}
  }

 
This will be work ,check it on the touch of outside the view pop up will be hide.this the hide props of pop up not will work in side the view

 

 

Thanks