Unable to dimiss a modal (react-native-date-picker)

Question

So we are using this lib react-native-date-picker for date picking (obviously).

When user is timeout from app, we are navigating the user back to login screen. However if the date picker (this is a modal) is opened, it will remain on top of screen as always. Within the library I see no option to decide when the modal should stay visible/invisible.

Here's few approaches I've tried with no success

1. Using forwardRef wrapping my child component (which shows the date picker), trying to access the component via Ref. No success, always receive NULL in return. I think the library don't support this either?

2. Based on the timeout props we stored in Redux, within the function componentdidupdate we setState to re-render the screen by telling DatePicker's prop open as FALSE. No success either.

Im curious on the reason behind why is this happening. What are the possible solution?

Answer 1

react-native-date-picker uses the corresponding Date picker native module for each platform. When the native modal is opened, it runs on the Native thread while your code runs on the JavaScript thread.

When the user session expired and the app navigates to Login Screen, React Navigation tries to unmount the current screen component but Date Picker is not mounted because it runs on Native Thread.

Your app logic should detect if the modal is opened before and close it before navigating to Login screen