DatePicker

[1995mars]

I have gone through these following points

• [] Check latest documentation: https://docs.nativebase.io/
• [] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

I want to use the DatePicker to get the time, but when I click on it, it shows the error

Steps to reproduce

import {DatePicker} from 'native-base';
<DatePicker
locale={"en"}
value={new Date()}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
textStyle={{ color: 'black' }}
placeHolderTextStyle={{ color: 'black' }}
placeHolderText="wew"
disabled={false}
/>

Is the bug present in both iOS and Android

error message

ERROR Invariant Violation: A date or time should be specified as value.
This error is located at:
in RNDateTimePicker (at DatePicker.js:97)

[vtur]

The same problem in clear project. As well not working even in NativeBaseKitchenSink on my android.

[Gabsys]

Same issue here. Workaround is to downgrade to v2.13.15 first before this issue is resolved.

[minkbear]

Same problem.

[darlanhms]

this is not working cause when they changed the deprecated components DatePickerAndroid and DatePickerIOS they didn't verified the different fields that have in the community solution

[artus]

Will this thread be updated when a fix has been implemented?

[1995mars]

I have yet to see the issue resolved

[409Error]

When will you fix it?

[409Error]

Does anyone know how to get around this error? Thx

[timothydillan]

Hey guys! A beginner to React Native stuff here! I found a fix and have uploaded a fixed version of the package on the npm platform if you need to fix this issue on your apps quickly.

All you need to do is:

1. npm install my-react-native-base --save
2. Replace native-base with my-react-native-base on your imports
3. cd ios && npx pod install (only if your app is targeted for iOS too).
4. Done!

The problem is most likely related to the date time picker being used in the package does not set any date value for the value attribute, it instead sets the default date value for the date attribute which is already deprecated.

[netevolution]

Hey guys! A beginner to React Native stuff here! I found a fix and have uploaded a fixed version of the package on the npm platform if you need to fix this issue on your apps quickly.

All you need to do is:

1. npm install my-react-native-base --save
2. Replace native-base with my-react-native-base on your imports
3. cd ios && npx pod install (only if your app is targeted for iOS too).
4. Done!

The problem is most likely related to the date time picker being used in the package does not set any date value for the value attribute, it instead sets the default date value for the date attribute which is already deprecated.

Hi,
the error no longer appears but I don't know how to open the datepicker. The original showDatePicker method is missing.

How do I display the datepicker?

I'm currently interested in Android.

[timothydillan]

Hey guys! A beginner to React Native stuff here! I found a fix and have uploaded a fixed version of the package on the npm platform if you need to fix this issue on your apps quickly.
All you need to do is:

1. npm install my-react-native-base --save
2. Replace native-base with my-react-native-base on your imports
3. cd ios && npx pod install (only if your app is targeted for iOS too).
4. Done!

The problem is most likely related to the date time picker being used in the package does not set any date value for the value attribute, it instead sets the default date value for the date attribute which is already deprecated.

Hi,
the error no longer appears but I don't know how to open the datepicker. The original showDatePicker method is missing.

How do I display the datepicker?

I'm currently interested in Android.

Hm.. not sure about that. I'm implementing the date picker as per the documentation, and the datepicker shows just fine. However, I only tested the datepicker on iOS. Could you perhaps give a picture/video of your issue?

[truongthuc]

Hey guys, finaly i resolved this by check document in @react-native-community/datetimepicker repo.

1. Replace onDateChange prop to onChange
2. onChange will recive two args (event, newDate)

this is my edit and allready check in IOS, not yet in Android

import { Text, DatePicker } from 'native-base';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
const InputDateTime = () => {
  const [datevalue, setDate] = useState(new Date());
  const _onDateChange = (e, newDate) => {
    setDate(newDate);
  };

  return (
    <View>
      <DatePicker
        defaultDate={new Date(2021, 4, 4)}
        minimumDate={new Date(2021, 1, 1)}
        maximumDate={new Date(2021, 12, 31)}
        locale={'en'}
        timeZoneOffsetInMinutes={undefined}
        modalTransparent={false}
        animationType={'fade'}
        androidMode={'default'}
        placeHolderText="Select date"
        textStyle={{ color: 'green' }}
        placeHolderTextStyle={{ color: '#d3d3d3' }}
        disabled={false}

        onChange={_onDateChange}
        value={datevalue}
      />
      <Text>{datevalue.toString().substr(4, 12)}</Text>
    </View>
  );
};

export default InputDateTime;

I hope it will help you guys

[aarthigovardhanan88]

Hey guys, finaly i resolved this by check document in @react-native-community/datetimepicker repo.

1. Replace onDateChange prop to onChange
2. onChange will recive two args (event, newDate)

this is my edit and allready check in IOS, not yet in Android

import { Text, DatePicker } from 'native-base';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
const InputDateTime = () => {
  const [datevalue, setDate] = useState(new Date());
  const _onDateChange = (e, newDate) => {
    setDate(newDate);
  };

  return (
    <View>
      <DatePicker
        defaultDate={new Date(2021, 4, 4)}
        minimumDate={new Date(2021, 1, 1)}
        maximumDate={new Date(2021, 12, 31)}
        locale={'en'}
        timeZoneOffsetInMinutes={undefined}
        modalTransparent={false}
        animationType={'fade'}
        androidMode={'default'}
        placeHolderText="Select date"
        textStyle={{ color: 'green' }}
        placeHolderTextStyle={{ color: '#d3d3d3' }}
        disabled={false}

        onChange={_onDateChange}
        value={datevalue}
      />
      <Text>{datevalue.toString().substr(4, 12)}</Text>
    </View>
  );
};

export default InputDateTime;

I hope it will help you guys

I tried it and it open a blank screen. Any idea on what is wrong?

[darlanhms]

Hey guys, finaly i resolved this by check document in @react-native-community/datetimepicker repo.

1. Replace onDateChange prop to onChange
2. onChange will recive two args (event, newDate)

this is my edit and allready check in IOS, not yet in Android

import { Text, DatePicker } from 'native-base';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
const InputDateTime = () => {
  const [datevalue, setDate] = useState(new Date());
  const _onDateChange = (e, newDate) => {
    setDate(newDate);
  };

  return (
    <View>
      <DatePicker
        defaultDate={new Date(2021, 4, 4)}
        minimumDate={new Date(2021, 1, 1)}
        maximumDate={new Date(2021, 12, 31)}
        locale={'en'}
        timeZoneOffsetInMinutes={undefined}
        modalTransparent={false}
        animationType={'fade'}
        androidMode={'default'}
        placeHolderText="Select date"
        textStyle={{ color: 'green' }}
        placeHolderTextStyle={{ color: '#d3d3d3' }}
        disabled={false}

        onChange={_onDateChange}
        value={datevalue}
      />
      <Text>{datevalue.toString().substr(4, 12)}</Text>
    </View>
  );
};

export default InputDateTime;

I hope it will help you guys

I tried it and it open a blank screen. Any idea on what is wrong?

Try npm i @react-native-community/datetimepicker and pod install again.

you'll probrably have build problems in android with this approach because the same component will be builded twice

[AoNoOokami]

I tried it and it open a blank screen. Any idea on what is wrong?

Hello, I'm having the same issue on Android with the message Possible Unhandled Promise Rejection (id:0): TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNTimePickerAndroid.open)

UPDATE: "Solved" by installing v2.13.15 of native-base. But some dependecies are deprecated anyway.

UPDATE: Actually, there may be some issues with autolinking on projects that started with a quite old version of react-native and upgraded to a version with autolinking (0.49 for the one I'm working on). You'll have to link manually @react-native-community/datetimepicker and update MainApplication.java and android/app/build.gradle accordingly. Hope it helps.

[qasimgit]

Solved 🚀 🚀

Just Reversed back to the old Version from latest to V: 2.13.8 and now it's all working Fine.

[melissatully]

Does anyone know how to have it show date and time rather than just date?

[aligenc]

I have solved this bug by adding value field to DatePicker component.

<DatePicker
            value={new Date(2018, 12, 31)}
            defaultDate={new Date(2018, 4, 4)}
            minimumDate={new Date(2018, 1, 1)}
            maximumDate={new Date(2018, 12, 31)}
            locale={"en"}
            timeZoneOffsetInMinutes={undefined}
            modalTransparent={false}
            animationType={"fade"}
            androidMode={"default"}
            placeHolderText="Select date"
            textStyle={{ color: "green" }}
            placeHolderTextStyle={{ color: "#d3d3d3" }}
            onDateChange={this.setDate}
            disabled={false}
            />

[SimonErm]

I could make it work by explicit installing @react-native-community/datetimepicker since the autolinking of native-base doesn't seem to work correctly and with following patch(also includes keyboard listener fix ):

diff --git a/node_modules/native-base/dist/src/basic/DatePicker.js b/node_modules/native-base/dist/src/basic/DatePicker.js
index 2165d09..a7db6f9 100644
--- a/node_modules/native-base/dist/src/basic/DatePicker.js
+++ b/node_modules/native-base/dist/src/basic/DatePicker.js
@@ -1,2 +1,2 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.DatePicker=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/DatePicker.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _datetimepicker=require('@react-native-community/datetimepicker');var _datetimepicker2=_interopRequireDefault(_datetimepicker);var _platform=require('../theme/variables/platform');var _platform2=_interopRequireDefault(_platform);var _Text=require('./Text');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var DatePicker=exports.DatePicker=function(_React$Component){_inherits(DatePicker,_React$Component);function DatePicker(props){_classCallCheck(this,DatePicker);var _this=_possibleConstructorReturn(this,(DatePicker.__proto__||Object.getPrototypeOf(DatePicker)).call(this,props));_this.showDatePicker=function(){_this.setState({modalVisible:true});};_this.state={modalVisible:false,defaultDate:props.defaultDate?props.defaultDate:new Date(),chosenDate:!props.placeHolderText&&props.defaultDate?props.defaultDate:undefined};return _this;}_createClass(DatePicker,[{key:'setDate',value:function setDate(date){this.setState({chosenDate:new Date(date)});if(this.props.onDateChange){this.props.onDateChange(date);}}},{key:'formatChosenDate',value:function formatChosenDate(date){if(this.props.formatChosenDate){return this.props.formatChosenDate(date);}return[date.getDate(),date.getMonth()+1,date.getFullYear()].join('/');}},{key:'render',value:function render(){var _this2=this;var _props=this.props,animationType=_props.animationType,disabled=_props.disabled,locale=_props.locale,maximumDate=_props.maximumDate,minimumDate=_props.minimumDate,modalTransparent=_props.modalTransparent,placeHolderText=_props.placeHolderText,placeHolderTextStyle=_props.placeHolderTextStyle,textStyle=_props.textStyle,timeZoneOffsetInMinutes=_props.timeZoneOffsetInMinutes;var variables=this.context.theme?this.context.theme['@@shoutem.theme/themeStyle'].variables:_platform2.default;return _react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:63}},_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:64}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return!disabled?_this2.showDatePicker():undefined;},style:[{padding:variables.datePickerPadding,color:variables.datePickerTextColor},this.state.chosenDate?textStyle:placeHolderTextStyle],__source:{fileName:_jsxFileName,lineNumber:65}},this.state.chosenDate?this.formatChosenDate(this.state.chosenDate):placeHolderText||'Select Date'),_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:79}},_react2.default.createElement(_reactNative.Modal,{supportedOrientations:['portrait','landscape'],animationType:animationType,transparent:modalTransparent,visible:this.state.modalVisible,onRequestClose:function onRequestClose(){},__source:{fileName:_jsxFileName,lineNumber:80}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return _this2.setState({modalVisible:false});},style:{backgroundColor:variables.datePickerBg,flex:variables.datePickerFlex},__source:{fileName:_jsxFileName,lineNumber:87}}),_react2.default.createElement(_datetimepicker2.default,_extends({date:this.state.chosenDate?this.state.chosenDate:this.state.defaultDate,onDateChange:function onDateChange(date){return _this2.setDate(date);},minimumDate:minimumDate,maximumDate:maximumDate,mode:'date',locale:locale,timeZoneOffsetInMinutes:timeZoneOffsetInMinutes},this.props,{__source:{fileName:_jsxFileName,lineNumber:94}}))))));}}]);return DatePicker;}(_react2.default.Component);DatePicker.defaultProps={disabled:false};
+Object.defineProperty(exports,"__esModule",{value:true});exports.DatePicker=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/DatePicker.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _datetimepicker=require('@react-native-community/datetimepicker');var _datetimepicker2=_interopRequireDefault(_datetimepicker);var _platform=require('../theme/variables/platform');var _platform2=_interopRequireDefault(_platform);var _Text=require('./Text');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var DatePicker=exports.DatePicker=function(_React$Component){_inherits(DatePicker,_React$Component);function DatePicker(props){_classCallCheck(this,DatePicker);var _this=_possibleConstructorReturn(this,(DatePicker.__proto__||Object.getPrototypeOf(DatePicker)).call(this,props));_this.showDatePicker=function(){_this.setState({modalVisible:true});};_this.state={modalVisible:false,defaultDate:props.defaultDate?props.defaultDate:new Date(),chosenDate:!props.placeHolderText&&props.defaultDate?props.defaultDate:undefined};return _this;}_createClass(DatePicker,[{key:'setDate',value:function setDate(date){  if(date.type=='set'){ this.setState({ chosenDate: new Date(date.nativeEvent.timestamp),modalVisible:false });if (this.props.onDateChange) {this.props.onDateChange(new Date(date.nativeEvent.timestamp));}}else{this.setState({ modalVisible:false });}}},{key:'formatChosenDate',value:function formatChosenDate(date){if(this.props.formatChosenDate){return this.props.formatChosenDate(date);}return[date.getDate(),date.getMonth()+1,date.getFullYear()].join('/');}},{key:'render',value:function render(){var _this2=this;var _props=this.props,animationType=_props.animationType,disabled=_props.disabled,locale=_props.locale,maximumDate=_props.maximumDate,minimumDate=_props.minimumDate,modalTransparent=_props.modalTransparent,placeHolderText=_props.placeHolderText,placeHolderTextStyle=_props.placeHolderTextStyle,textStyle=_props.textStyle,timeZoneOffsetInMinutes=_props.timeZoneOffsetInMinutes;var variables=this.context.theme?this.context.theme['@@shoutem.theme/themeStyle'].variables:_platform2.default;return _react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:63}},_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:64}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return!disabled?_this2.showDatePicker():undefined;},style:[{padding:variables.datePickerPadding,color:variables.datePickerTextColor},this.state.chosenDate?textStyle:placeHolderTextStyle],__source:{fileName:_jsxFileName,lineNumber:65}},this.state.chosenDate?this.formatChosenDate(this.state.chosenDate):placeHolderText||'Select Date'),_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:79}},_react2.default.createElement(_reactNative.Modal,{supportedOrientations:['portrait','landscape'],animationType:animationType,transparent:modalTransparent,visible:this.state.modalVisible,onRequestClose:function onRequestClose(){},__source:{fileName:_jsxFileName,lineNumber:80}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return _this2.setState({modalVisible:false});},style:{backgroundColor:variables.datePickerBg,flex:variables.datePickerFlex},__source:{fileName:_jsxFileName,lineNumber:87}}),_react2.default.createElement(_datetimepicker2.default,_extends({value:this.state.chosenDate?this.state.chosenDate:this.state.defaultDate,onChange:function onDateChange(date){return _this2.setDate(date);},minimumDate:minimumDate,maximumDate:maximumDate,mode:'date',locale:locale,timeZoneOffsetInMinutes:timeZoneOffsetInMinutes},this.props,{__source:{fileName:_jsxFileName,lineNumber:94}}))))));}}]);return DatePicker;}(_react2.default.Component);DatePicker.defaultProps={disabled:false};
 //# sourceMappingURL=DatePicker.js.map
\ No newline at end of file
diff --git a/node_modules/native-base/dist/src/basic/ToastContainer.js b/node_modules/native-base/dist/src/basic/ToastContainer.js
index 832b3e8..9645ea7 100644
--- a/node_modules/native-base/dist/src/basic/ToastContainer.js
+++ b/node_modules/native-base/dist/src/basic/ToastContainer.js
@@ -1,2 +1,2 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){_reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){_reactNative.Keyboard.removeListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.removeListener('keyboardDidHide',this.keyboardDidHide);}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
+Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){this.kbDidShow = _reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);this.kbDidHide = _reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.kbDidShow?.remove();this.kbDidHide?.remove();}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
 //# sourceMappingURL=ToastContainer.js.map
\ No newline at end of file
diff --git a/node_modules/native-base/src/basic/DatePicker.js b/node_modules/native-base/src/basic/DatePicker.js
index fcc68e4..83bcb31 100644
--- a/node_modules/native-base/src/basic/DatePicker.js
+++ b/node_modules/native-base/src/basic/DatePicker.js
@@ -24,9 +24,13 @@ export class DatePicker extends React.Component {
   }
 
   setDate(date) {
-    this.setState({ chosenDate: new Date(date) });
-    if (this.props.onDateChange) {
-      this.props.onDateChange(date);
+    if(date.type=='set'){ 
+      this.setState({ chosenDate: new Date(date.nativeEvent.timestamp),modalVisible:false });
+      if (this.props.onDateChange) {
+        this.props.onDateChange(new Date(date.nativeEvent.timestamp));
+      }
+    }else{
+      this.setState({ modalVisible:false });
     }
   }
 
@@ -92,12 +96,12 @@ export class DatePicker extends React.Component {
                 }}
               />
               <DateTimePicker
-                date={
+                value={
                   this.state.chosenDate
                     ? this.state.chosenDate
                     : this.state.defaultDate
                 }
-                onDateChange={date => this.setDate(date)}
+                onChange={date => this.setDate(date)}
                 minimumDate={minimumDate}
                 maximumDate={maximumDate}
                 mode="date"
diff --git a/node_modules/native-base/src/basic/ToastContainer.js b/node_modules/native-base/src/basic/ToastContainer.js
index 4bd57ac..88f1c49 100644
--- a/node_modules/native-base/src/basic/ToastContainer.js
+++ b/node_modules/native-base/src/basic/ToastContainer.js
@@ -59,13 +59,13 @@ class ToastContainer extends Component {
   }
 
   componentDidMount() {
-    Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+    this.kbDidHide = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
   }
 
   componentWillUnmount() {
-    Keyboard.removeListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.removeListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow?.remove();
+    this.kbDidHide?.remove();
   }
 
   getToastStyle() {

[alphazhe]

NativeBase 3.2.2 docs date picker is mentioned as coming soon. Any timeline for this, when this will be released?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ckswopnera]

### For class component datetimepicker

class Productdetails extends Component {
constructor(props) {
super();
this.state = {
rentStartDate: new Date(),
startDate: "",
endDate: "",
mode: false,}
this.onChangeStart = this.onChangeStart.bind(this);
}
onChangeStart(event, selectedDate) {
let currentDate = selectedDate || this.state.rentStartDate;
this.setState({ show: Platform.OS === "ios", rentStartDate: currentDate });
let mydate = JSON.stringify(currentDate)
.split("T")[0]
.trim()
.replace('"', "");

    this.setState({ startDate: mydate });
  }
 showMode(currentMode) {
    this.setState({
      show: true,
      mode: currentMode,
    });
  }

return(<View style={{ flex: 1}}>
              <Text style={{ textAlign: "center" }}>Start Date</Text>
              <View
                style={{
                  flex: 1,
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center",
                  marginBottom: 5,
                  height: 40,
                  borderRadius: 2,
                  color: "black",
                  borderColor: "rgba(38, 38, 38,0.8)",
                  borderWidth: 1,
                  backgroundColor: "white",
                  paddingEnd: 5,
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    paddingLeft: 5,
                    backgroundColor: "white",
                    color: "black",
                  }}
                >
                  {this.state.startDate}
                </Text>
                <TouchableHighlight onPress={() => this.showMode("date")}>
                  <Image
                    source={require("../images/calender.png")}
                    style={{ height: 24, width: 24 }}
                  />
                </TouchableHighlight>
                <Overlay
                  isVisible={this.state.show}
                  onBackdropPress={() => {
                    this.setState({ show: false });
                  }}
                >
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={this.state.rentStartDate}
                    mode={this.state.mode} //The enum of date, datetime and time
                    placeholder="select date"
                    format="DD-MM-YYYY"
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    timeZoneOffsetInMinutes={undefined}
                    modalTransparent={false}
                    animationType={"fade"}
                    display="default"
                    onChange={this.onChangeStart}
                    style={{ width: 320, backgroundColor: "white" }}
                  />
                </Overlay>
              </View>
              <View></View>
            </View>)

export default React.memo(Productdetails);

[tosebikan]

This happens when you cancel the picker instead of selecting a new date, it sets the date's value to an undefined value, the solution is the check the event of the onChange function and set it to the previous date state if dismissed eg.

const [date, setDate] = useState(new Date())

const onChange = (event, selectedDate) => {
        setShowDate(false);

        // on cancel set date value to previous date
        if (event?.type === 'dismissed') {
            setDate(date);
            return;
        }
        setDate(selectedDate);
    };

    {showDate && (
                <DateTimePicker
                    value={date}
                    mode="date"
                    onChange={onChange}
                />
            )}