Why doesn't my date picker work inside a modal in React Native?

If your date picker opens behind the modal, pops up again every time the screen re-renders, or shows a blank wheel, it isn’t something you did wrong in the modal itself. If you’re using @react-native-community/datetimepicker, it’s a thin layer over each platform’s own picker, and the two platforms work very differently, so we’ll fix each one separately.

Why it happens

On Android, the picker is a system dialog. If you render <DateTimePicker /> all the time, the dialog opens every time that component renders, which is why it seems to reopen on its own, and a dialog shown while a React Native Modal is open can end up in the wrong place.

On iOS, the picker is drawn inside your layout. The default compact style opens its own small popover, which can fail to show above a Modal. The spinner style uses the system color for its text, so in dark mode you can get light text on your light modal background, which looks like a blank wheel.

How to fix it

1. On Android, open the picker from a button instead of rendering it. The library has an imperative API for exactly this:

   import { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
   
   function openPicker() {
     DateTimePickerAndroid.open({
       value: date,
       mode: "date",
       onChange: (event, selected) => {
         if (event.type === "set" && selected) setDate(selected);
       },
     });
   }

   If you’d rather keep the component, render it only while a showPicker state is true, and set that state back to false in onChange for both the set and dismissed events.

2. On iOS, render the picker inline in the modal with an explicit style. Use display="inline" for a calendar or display="spinner" for a wheel, and set the colors so they don’t depend on the phone’s theme:

   <DateTimePicker
     value={date}
     mode="date"
     display="spinner"
     themeVariant="light"
     onChange={(_, selected) => selected && setDate(selected)}
   />

   Use themeVariant="dark" instead if your modal has a dark background.

3. If you don’t need a custom modal at all, you can replace your own modal with react-native-modal-datetime-picker, which puts each platform’s picker in a modal that’s already set up for these cases.

How you know it’s fixed

On Android, tapping your button opens the dialog once, and picking a date closes it and updates the screen. On iOS, the picker shows readable dates in the modal in both light and dark mode.

If it still happens

Check that you’re only rendering one picker at a time, and that nothing re-renders the modal in a loop (for example, a state update inside onChange that changes the picker’s own value on every render). The library’s GitHub issues are also a good place to search for your exact symptom and library version.