modal react native

modal

The Modal component is a basic way to present content above an enclosing view.

Example:

<Modal
            animationType="fade"
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => {
              this.setModalVisible(!this.state.modalVisible);
            }}>
            <View style={styles.modelMasterView}>
              <View style={styles.modelSubmasterView}>
                <Text style={{fontFamily: FontFamilyMid}}>
                  Are you sure you want to Apply?
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    margin: 10,
                    justifyContent: 'space-between',
                  }}>
                  <TouchableOpacity
                    style={styles.yesButton}
                    onPress={() => {
                      this.setModalVisible(!this.state.modalVisible);
                      {
                        this.props.navigation.navigate('Notification');
                      }
                    }}>
                    <Text style={{fontFamily: FontFamilyMid}}>YES</Text>
                  </TouchableOpacity>
                  <View style={{width: 10}} />
                  <TouchableOpacity
                    style={styles.noButton}
                    onPress={() => {
                      this.setModalVisible(!this.state.modalVisible);
                    }}>
                    <Text style={{fontFamily: FontFamilyMid}}>No</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </Modal>

 modelMasterView: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.54)',
  },
  modelSubmasterView: {
    width: '90%',
    justifyContent: 'center',
    borderRadius: 10,
    padding: 20,
    backgroundColor: '#ffffff',
    alignItems: 'center',
  },
  yesButton: {
    width: width * 0.2 + 30,
    padding: 5,
    borderRadius: 5,
    borderColor: YellowColor,
    borderWidth: 2,
    backgroundColor: YellowColor,
    justifyContent: 'center',
    alignItems: 'center',
  },
  noButton: {
    width: width * 0.2 + 30,
    padding: 5,
    borderRadius: 5,
    borderColor: YellowColor,
    borderWidth: 2,
    backgroundColor: WhiteColor,
    justifyContent: 'center',
    alignItems: 'center',
  },