For some reason my app crashes when trying to pick date with react-native-date-picker.
I have a re-useable component for the datepicker and I am using it in 2 different screens. On one screen it works without any issues and on the other screen it crashes when I try to pick a date/time.
CustomDatePicker.js
class CustomDateTimePickerModal extends Component {
constructor(props) {
super(props);
this.state = {
value: new Date(),
date:Moment(new Date()).format('DD/MM/YYYY'),
mode: 'datetime',
time: Moment(new Date()).format('HH:mm'),
};
}
handleDatePicked = value => {
const dateCheck = new Date()
if(dateCheck.getTime() > value.getTime() ){
this.setState({
value: new Date()
})
}
else{
this.setState({
value
})
}
};
savePickedDateAndTime = () => {
const date = Moment(this.state.value).format('DD/MM/YYYY')
const time = Moment(this.state.value).format("HH:mm")
this.setState({
date,
time,
});
//api call to fetch data with date and time
this.props.sendDateAndTimeToParent(date,time)
this.hideModal()
}
hideModal =() => {
this.props.sendModalVisibiltyToParent(false)
}
render() {
return (
<>
<Modal visible={true} transparent={true} statusBarTranslucent={true}>
<TouchableOpacity onPress={this.hideModal} style={{position: 'absolute', backgroundColor:'rgba(0, 0, 0, 0.5)', bottom: 0,width: '100%', height:'100%'}}>
</TouchableOpacity>
<View style={{position: 'absolute',flex:1, bottom: 0, width: '100%', alignItems: 'center', backgroundColor: 'white'}}>
<DatePicker
date={this.state.value ? this.state.value : new Date()}
mode={this.state.mode}
onDateChange={this.handleDatePicked}
is24hourSource={'device'}
/>
<View style={{flexDirection: 'row', width: 120, justifyContent: 'space-around', marginTop:5, marginBottom:5}}>
<TouchableOpacity onPress={this.savePickedDateAndTime} style={{margin:10}}>
{vMarkFilledIcon(mainColor.secondaryColor, 32)}
</TouchableOpacity>
<TouchableOpacity onPress={this.hideModal} style={{margin:10}}>
{cancelIcon(cancelButton.color, 32)}
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
}
}
Results.js
//imports
getDateAndTimeFromChild = (date, time) => {
//api call to fetch data with date and time
this.setState({
date,
time
},
() => {
this.arrangeSearchCriteriaParameters()
})
}
changeModalVisibilityFromChild = (isVisible) => {
//clean all date data that is left
this.setState({
show: isVisible
})
}
render() {
return (
//...
{this.state.show ?
<CustomDateTimePickerModal
sendModalVisibiltyToParent={this.changeModalVisibilityFromChild}
sendDateAndTimeToParent={this.getDateAndTimeFromChild}
/>
:
null}
)
}
OtherScreen.js
changeModalVisibilityFromChild = (isVisible) => {
//clean all date data that is left
this.setState({
show: isVisible
})
}
getDateAndTimeFromChild = (date, time) => {
//API call to get the estimated arrival time
this.setState({
date,
time,
})
}
render(){
return(
//....
{this.state.show ?
<CustomDateTimePickerModal
sendModalVisibiltyToParent={this.changeModalVisibilityFromChild}
sendDateAndTimeToParent={this.getDateAndTimeFromChild}
/>
:
null}
)
}
For some reason the Results.js datepicker works but the one in OtherScreen.js does not.
Am I missing something??
UPDATE:
Adding some errors seen:
05-23 19:09:01.645 4021 23926 W GmsLocationProvider: Error removing location updates: 16
05-23 19:09:01.791 1747 24952 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0)
05-23 19:09:02.281 24955 24955 W cmd : Can't find service car_service
05-23 19:09:02.842 24568 24568 E InputEventReceiver: Exception dispatching input event.
05-23 19:09:02.842 24568 24568 E MessageQueue-JNI: Exception in MessageQueue callback: handleReceiveCallback
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: java.lang.IllegalArgumentException: Unable to find JSIModule for class UIManager
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.bridge.JSIModuleRegistry.getModule(JSIModuleRegistry.java:24)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.bridge.CatalystInstanceImpl.getJSIModule(CatalystInstanceImpl.java:564)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:90)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:46)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.uimanager.UIManagerHelper.getUIManagerForReactTag(UIManagerHelper.java:40)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:505)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch(NativeAnimatedNodesManager.java:483)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.uimanager.events.EventDispatcherImpl.dispatchEvent(EventDispatcherImpl.java:116)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent(JSTouchDispatcher.java:74)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.facebook.react.views.modal.ReactModalHostView$DialogRootViewGroup.onInterceptTouchEvent(ReactModalHostView.java:497)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2609)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:465)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1849)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.app.Dialog.dispatchTouchEvent(Dialog.java:861)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:423)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.View.dispatchPointerEvent(View.java:13674)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:5482)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:5285)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4788)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4841)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4807)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4947)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4815)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:5004)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4788)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4841)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4807)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4815)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4788)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:7505)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:7474)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:7435)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:7630)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:188)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.os.MessageQueue.nativePollOnce(Native Method)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.os.MessageQueue.next(MessageQueue.java:336)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.os.Looper.loop(Looper.java:174)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at android.app.ActivityThread.main(ActivityThread.java:7356)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at java.lang.reflect.Method.invoke(Native Method)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
05-23 19:09:02.845 24568 24568 E MessageQueue-JNI: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
05-23 19:09:02.845 24568 24568 D AndroidRuntime: Shutting down VM
05-23 19:09:02.849 24568 24568 E AndroidRuntime: FATAL EXCEPTION: main
05-23 19:09:02.849 24568 24568 E AndroidRuntime: Process: com.joyride_client, PID: 24568
05-23 19:09:02.849 24568 24568 E AndroidRuntime: java.lang.IllegalArgumentException: Unable to find JSIModule for class UIManager
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.bridge.JSIModuleRegistry.getModule(JSIModuleRegistry.java:24)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.bridge.CatalystInstanceImpl.getJSIModule(CatalystInstanceImpl.java:564)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:90)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:46)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.uimanager.UIManagerHelper.getUIManagerForReactTag(UIManagerHelper.java:40)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:505)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch(NativeAnimatedNodesManager.java:483)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.uimanager.events.EventDispatcherImpl.dispatchEvent(EventDispatcherImpl.java:116)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent(JSTouchDispatcher.java:74)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.facebook.react.views.modal.ReactModalHostView$DialogRootViewGroup.onInterceptTouchEvent(ReactModalHostView.java:497)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2609)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2698)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:465)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1849)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.app.Dialog.dispatchTouchEvent(Dialog.java:861)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:423)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.View.dispatchPointerEvent(View.java:13674)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:5482)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:5285)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4788)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4841)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4807)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4947)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4815)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:5004)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4788)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4841)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4807)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4815)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4788)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:7505)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:7474)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:7435)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:7630)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:188)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.os.MessageQueue.nativePollOnce(Native Method)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.os.MessageQueue.next(MessageQueue.java:336)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.os.Looper.loop(Looper.java:174)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at android.app.ActivityThread.main(ActivityThread.java:7356)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at java.lang.reflect.Method.invoke(Native Method)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
05-23 19:09:02.849 24568 24568 E AndroidRuntime: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
05-23 19:09:02.854 2008 4762 W ActivityTaskManager: Force finishing activity com.joyride_client/.MainActivity
05-23 19:09:02.857 2008 4762 W InputReader: Device has associated, but no associated display id.
05-23 19:09:02.872 2008 24959 I DropBoxManagerService: add tag=data_app_crash isTagEnabled=true flags=0x2
05-23 19:09:02.857 2008 4762 I chatty : uid=1000(system) Binder:2008_19 identical 8 lines
05-23 19:09:02.858 2008 4762 W InputReader: Device has associated, but no associated display id.
05-23 19:09:02.881 24568 24568 I Process : Sending signal. PID: 24568 SIG: 9
05-23 19:09:02.882 2008 2040 W BroadcastQueue: Background execution not allowed: receiving Intent { act=android.intent.action.DROPBOX_ENTRY_ADDED flg=0x10 (has extras) } to com.google.android.gms/.stats.service.DropBoxEntryAddedReceiver
05-23 19:09:02.883 2008 2040 W BroadcastQueue: Background execution not allowed: receiving Intent { act=android.intent.action.DROPBOX_ENTRY_ADDED flg=0x10 (has extras) } to com.google.android.gms/.chimera.GmsIntentOperationService$PersistentTrustedReceiver
05-23 19:09:02.886 1754 1933 W audio_hw_generic: Not supplying enough data to HAL, expected position 21944832 , only wrote 21807712
I built this ugly code, it's not ideal, but it works
The components below the datepicker (touchableOpacity) overwrite onClick in the region where the App crashes:
<View>
<DatePicker
style={{alignSelf: 'center'}}
mode='date'
date={this.state.dataReport}
onDateChange={this.setDate}
/>
<TouchableOpacity
style={{ position: 'absolute', marginTop: 0}}>
<Text style={{fontSize: 20}}>SOME CONTENT</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ position: 'absolute', marginTop: 155}}>
<Text style={{fontSize: 20}}>SOME CONTENT</Text>
</TouchableOpacity>
I tried this solution because this problem is still open, see component github!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With