React Native Ultimate Modal Picker
Built With
Known Issues
Pending Items
Picker Types (iOS)
1. Date
2. Time
3. Date/Time (iOS Only)
4. List
5. State (50 United States)
Picker Types (Android)
1. Date (Mode: Spinner)
2. Date (Mode: Calendar)
3. Time (Mode: Spinner)
4. Time (Mode: Clock)
5. List
6. State (50 United States)
Example Code
// Imports: Dependencies
import React from ' react' ;
import { SafeAreaView } from ' react-native' ;
import {
DateRangePicker ,
DatePicker ,
TimePicker ,
DateTimePicker ,
ListPicker ,
StatePicker ,
StatePickerSmall ,
} from ' react-native-ultimate-modal-picker' ;
// React Native App
const App = () => {
return (
< SafeAreaView>
// Date Picker (Modes: spinner/calendar)
< DatePicker
title= " Date"
onValueChange= {(date ) => console .log (` Date Value: ${ date} ` )}
mode= " spinner"
/ >
// Time Picker (Modes: spinner/clock)
< TimePicker
title= " Time"
onValueChange= {(date ) => console .log (` Time Value: ${ date} ` )}
mode= " spinner"
/ >
// Date Time Picker (iOS Only)
< DateTimePicker
title= " Date/Time"
onValueChange= {(date ) => console .log (` Date/Time Value: ${ date} ` )}
/ >
// List Picker
< ListPicker title= " List" items= {items} onValueChange= {(value ) => console .log (` List Value: ${ value} ` )}/ >
// State Picker
< StatePicker onValueChange= {(state ) => console .log (` State Value: ${ state} ` )}/ >
// State Picker (Small)
< StatePickerSmall onValueChange= {(state ) => console .log (` State Value: ${ state} ` )}/ >
// Date Range Picker
< DateRangePicker
title= " Date/Range"
onFromValueChange= {(date ) => console .log (` From Date Value: ${ date} ` )}
onToValueChange= {(date ) => console .log (` To Date Value: ${ date} ` )}
mode= " spinner"
/ >
< / SafeAreaView>
)
}