I'm writing a To-do application for a hackathon I'm taking part in. I'm implemented a time picker in a pop up but as soon as I press the cancel button on the time picker it doesn't close at all. Any reason why this might happen, I tried setting an onCancel but that doesn't seem to work. I can't find any information on how to close the picker when I click cancel in the documentation.

import React, {Component, useState} from 'react';
import {withNavigation} from 'react-navigation';
import {
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Text,
  Modal,
  View,
  Image,
  ImageBackground,
  ScrollView,
  TextInput,
} from 'react-native';
import Arrow from '../components/assets/arrow_left.png';
import Background from '../components/assets/reminder_back.png';
import add from '../components/assets/add.png';
import Card from './Card';
import {openDatabase} from 'react-native-sqlite-storage';
import DateTimePicker from '@react-native-community/datetimepicker';

var db = openDatabase({name: 'UserDatabase.db'});

class Reminder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reminder_name: '',
      reminder_time: '',
      reminder_date: '',
      reminder_complete: '',
      reminders: [],      
      modalVisible: false,
      date: new Date(1598051730000),
      showDate: false,
      mode: ''
    };
  }

  setModalVisible = visible => {
    this.setState({modalVisible: visible});
  };

  componentDidMount = () => {
    db.transaction(tx => {
      tx.executeSql(
        "SELECT * FROM data WHERE reminder_type='reminder'",
        [],
        (tx, result) => {
          for (let i = 0; i < result.rows.length;   i) {
            this.state.reminders.push(result.rows.item);
          }
        },
      );
    });
  };

  OnChangeTime = (event, selectedDate) => {
    const currentDate = selectedDate || this.state.date;   
    this.setState({date: currentDate});
  };

  SelectTime = (visible) => {
    this.setState({showDate: visible, mode: 'time'});    
  }

  HandleTime = (time) => {
    this.setState({reminder_time: time})
  }


  render() {
    const {modalVisible, date, showDate, mode} = this.state;
    return (
      <View>
        <ImageBackground source={Background} style={styles.background} />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          style={styles.popup}>
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <TextInput placeholder="Reminder Title" />
              <TouchableOpacity onPress={() => this.SelectTime(true)}>
                  <Text>Select Time</Text>
              </TouchableOpacity>
              
              <TouchableOpacity
                onPress={() => this.setModalVisible(!modalVisible)}>
                <Text>Close Popup</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
        <View style={styles.root}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Dashboard')}>
            <Image source={Arrow} style={styles.back} />
          </TouchableOpacity>
        </View>

        <View>
          <ScrollView style={styles.container}>
            {this.state.reminders.map(function (item) {
              return (
                <Card id={item.id}>
                  <TouchableOpacity
                    style={styles.complete}
                    onPress={() => alert(item.id)}                    
                  />
                  <Text style={styles.reminder_title}>{item.name}</Text>
                </Card>
              );
            })}
          </ScrollView>
        </View>
        <TouchableOpacity
          style={styles.filter_button}
          onPress={() => this.setModalVisible(true)}>
          <Image source={add} style={styles.filter} />
        </TouchableOpacity>
        {showDate && (
            <DateTimePicker
                testID="dateTimePicker"
                display="default"
                value={date}
                is24Hour={true}
                mode={mode}
                onChange={() => this.OnChangeTime()}
                onConfirm={() => this.HandleTime()}
                onCancel={() => this.setModalVisible(!modalVisible)}
                />
        )}
      </View>
      
    );
  }
}

const styles = StyleSheet.create({
  popup: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  centeredView: {    
    
    marginTop: 22,
    width: 250,
    height: 250,
  },
  modalView: {
    marginLeft: 55,
    marginTop: 95,
    backgroundColor: 'white',   
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    padding: 35,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    width: 250,
    height: 250,
  },
  buttonClose: {
    backgroundColor: '#2196F3',
  },
  complete: {
    width: 35,
    height: 35,
    borderRadius: 25,
    borderColor: '#C0C0C0',
    borderWidth: 1,
    marginTop: 18,
    marginLeft: 15,
  },
  reminder_title: {
    fontSize: 16,
    marginTop: 25,
    marginLeft: 15,
  },
  filter_button: {
    backgroundColor: '#4169e1',
    width: 60,
    height: 60,
    marginTop: 15,
    borderRadius: 50,
    alignSelf: 'center',
  },
  filter: {
    alignSelf: 'center',
    width: 50,
    height: 50,
    marginTop: 5,
    borderRadius: 25,
  },
  container: {
    alignSelf: 'center',
    width: 350,
    height: 465,
  },
  root: {
    width: Dimensions.get('window').width,
    height: 45,
  },
  back: {
    marginLeft: 10,
  },
  background: {
    resizeMode: 'contain',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    zIndex: 0,
    position: 'absolute',
  },
});

export default Reminder;

UPDATE

I've added an event.type in the my OnChangeTime function but now it's closing and I'm getting a warning saying undefined is not an object (evaluating 'event.type')

  OnChangeTime = (event, selectedDate) => {
    const currentDate = selectedDate || this.state.date;   
    if (event.type == "set"){
        this.setState({date: currentDate});
    }else if (event.type == "dismissed") {
        this.setState({showDate: false});
    }   
  };

CodePudding user response：

The onCancel is calling setModalVisible but the picker doesn't seem to be part of the modal. You should have onCancel={() => this.setState({showDate: false})}

EDIT

Given you're update, you need to pass the event and date attribute from the onChange handler:

  <DateTimePicker
    testID="dateTimePicker"
    display="default"
    value={date}
    is24Hour={true}
    mode={mode}
    onChange={this.OnChangeTime} // or more explicit onChange={(event, date) => this.OnChangeTime(event, date)}
    // you can remove this => onConfirm={() => this.HandleTime()}
    // you can remove this => onCancel={() => this.setModalVisible(!modalVisible)}
  />