Skip to main content
React Native Date Picker offers two ways to display the picker: using the built-in modal or rendering it inline within your layout. The built-in modal provides a pre-configured overlay that handles opening, closing, and user interactions with confirm/cancel buttons.

​
When to Use Modal

Use the modal picker when:
  • You want a quick, out-of-the-box solution
  • You need a standard modal overlay experience
  • You want built-in confirm/cancel actions
  • You prefer minimal code for common use cases

​
Basic Modal Example

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

​
Required Modal Props

When using modal={true}, you must also provide:
  • open - Boolean controlling modal visibility
  • onConfirm - Callback when user confirms the selection
  • onCancel - Callback when user cancels or closes the modal
<DatePicker
  modal
  open={isOpen}
  date={selectedDate}
  onConfirm={(date) => {
    setIsOpen(false)
    setSelectedDate(date)
  }}
  onCancel={() => {
    setIsOpen(false)
  }}
/>
These props only work when modal={true}:
PropTypeDescription
openbooleanControls modal visibility
onConfirm(date: Date) => voidCalled when user confirms
onCancel() => voidCalled when user cancels or taps outside
titlestring | nullModal title text (set to null to hide)
confirmTextstringCustom confirm button text (default: “Confirm”)
cancelTextstringCustom cancel button text (default: “Cancel”)
buttonColorstringColor of confirm/cancel buttons (Android only)

​
Customizing Modal Text

<DatePicker
  modal
  open={open}
  date={date}
  title="Select your birthday"
  confirmText="Done"
  cancelText="Go back"
  onConfirm={(date) => {
    setOpen(false)
    setDate(date)
  }}
  onCancel={() => setOpen(false)}
/>

​
Removing Modal Title

Set title to null to remove the title entirely: 
<DatePicker
  modal
  open={open}
  date={date}
  title={null}
  onConfirm={(date) => {
    setOpen(false)
    setDate(date)
  }}
  onCancel={() => setOpen(false)}
/>

​
Inline Picker

The inline picker renders directly in your component tree, giving you full control over layout and positioning.

​
When to Use Inline

Use the inline picker when:
  • You want to build a custom modal or overlay
  • You need the picker to be part of your page layout
  • You want full control over the surrounding UI
  • You’re building a custom form with embedded pickers

​
Basic Inline Example

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())

  return <DatePicker date={date} onDateChange={setDate} />
}

​
Inline-Only Props

When using inline mode (without modal prop):
PropTypeDescription
onDateChange(date: Date) => voidCalled when user changes the date/time
onStateChange(state: ‘spinning’ | ‘idle’) => voidTracks spinner state (Android only)
When using inline mode, do NOT set the modal prop. The onConfirm and onCancel callbacks will not work.

​
Building a Custom Modal

You can use the inline picker with your own modal component: 
import React, { useState } from 'react'
import { Modal, View, Button, StyleSheet } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [tempDate, setTempDate] = useState(new Date())
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button title="Select Date" onPress={() => setVisible(true)} />
      
      <Modal visible={visible} transparent animationType="slide">
        <View style={styles.modalContainer}>
          <View style={styles.pickerContainer}>
            <DatePicker date={tempDate} onDateChange={setTempDate} />
            
            <View style={styles.buttons}>
              <Button 
                title="Cancel" 
                onPress={() => setVisible(false)} 
              />
              <Button 
                title="Confirm" 
                onPress={() => {
                  setDate(tempDate)
                  setVisible(false)
                }} 
              />
            </View>
          </View>
        </View>
      </Modal>
    </>
  )
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  pickerContainer: {
    backgroundColor: 'white',
    margin: 20,
    borderRadius: 10,
    padding: 20,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
  },
})

​
Tracking Spinner State

Use onStateChange to track when the picker wheel is spinning (Android inline only): 
const [state, setState] = useState('idle')

<DatePicker 
  date={date}
  onDateChange={setDate}
  onStateChange={setState}
/>

<Button 
  title="Confirm" 
  disabled={state === 'spinning'}
  onPress={handleConfirm}
/>
This prevents users from confirming before the wheel has stopped spinning, ensuring they select the intended date.

​
Comparison

FeatureModalInline
Built-in overlayYesNo
Confirm/Cancel buttonsBuilt-inYou implement
Custom positioningNoYes
Custom stylingLimitedFull control
Setup complexitySimpleMore control needed
Use caseQuick standard modalCustom layouts/modals

​
Choosing Between Modal and Inline

Use Modal When

  • You want a standard modal experience
  • You need minimal setup
  • Built-in confirm/cancel is sufficient
  • You prefer the default styling

Use Inline When

  • You need custom layout positioning
  • You’re building a custom modal
  • You want full UI control
  • The picker is part of a form

Build docs developers (and LLMs) love

Get started for freeTalk to us