React Native Picker Component Library (Date, Time, DateTime, List, State)
npm install react-native-ultimate-modal-picker

* Features
* Built With
* Pending Items
* Picker Types (iOS)
* Picker Types (Android)
* Getting Started
* Props
* Building & Publishing
* Changelog











npm i react-native-ultimate-modal-picker
`2. Install additional dependencies:
Note: This NPM Package uses the Native Modules
@react-native-community/datetimepicker and @react-native-picker/picker, so it must be installed in your project.`
npm i @react-native-community/datetimepicker @react-native-picker/picker
`3. Install Cocoapods:
`
cd iospod install
`4. Add Example Code:
`typescript
// Imports: Dependencies
import React, { useState } from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import {
// Pickers
PickerTime,
PickerDate,
PickerDateTime,
PickerDateRange,
// Dropdowns
DropdownList,
DropdownMeasurements,
DropdownNumber,
DropdownState,
// TypeScript Types
PickerItem,
} from 'react-native-ultimate-modal-picker';// React Native App
const App: React.FC = (): JSX.Element => {
// React Hooks: State
// Pickers
const [ date, setDate ] = useState(new Date());
const [ time, setTime ] = useState(new Date());
const [ dateTime, setDateTime ] = useState(new Date());
const [ fromDate, setFromDate ] = useState(new Date());
const [ toDate, setToDate ] = useState(new Date());
// Dropdowns
const [ listValue, setListValue ] = useState('');
const [ numberValue, setNumberValue ] = useState('');
const [ measurementValue, setMeasurementValue ] = useState('');
const [ stateValue, setStateValue ] = useState('');
// Items
const items: Array = [
{ label: '1', value: '1' },
{ label: '2', value: '2' },
{ label: '3', value: '3' },
{ label: '4', value: '4' },
{ label: '5', value: '5' },
{ label: '6', value: '6' },
{ label: '7', value: '7' },
{ label: '8', value: '8' },
{ label: '9', value: '9' },
{ label: '10', value: '10' },
];
return (
{/ Picker: Date (Modes: spinner/calendar) /}
title="Date"
onChange={(date: Date) => setDate(date)}
mode="spinner"
/>
{/ Picker: Time (Modes: spinner/clock) /}
title="Time"
onChange={(date: Date) => setTime(date)}
mode="spinner"
/>
{/ Picker: Date Time (iOS Only) /}
title="Date/Time"
onChange={(date: Date) => setDateTime(date)}
/>
{/ Picker (Date Range) /}
title="Date Range"
onFromChange={(date: Date) => setFromDate(date)}
onToChange={(date: Date) => setToDate(date)}
mode="spinner"
/>
{/ Dropdown: List /}
title="List"
items={items}
onChange={(value: string) => setListValue(value)}
/>
{/ Dropdown: Number /}
title="Number"
onChange={(value: string) => setNumberValue(value)}
/>
{/ Dropdown: Measurements /}
title="Measurement"
onChange={(value: string) => setMeasurementValue(value)}
/>
{/ Dropdown: State /}
title="State"
onChange={(value: string) => setStateValue(value)}
/>
{/ Picker: Date (Custom Styles) /}
title="Date (Custom Styles)"
onChange={(date: Date) => setDate(date)}
mode="spinner"
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
/>
{/ Picker: Time (Custom Styles) /}
title="Time (Custom Styles)"
onChange={(date: Date) => setTime(date)}
mode="spinner"
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
/>
{/ Picker: Date Time (Custom Styles) /}
title="Date/Time (Custom Styles)"
onChange={(date: Date) => setDateTime(date)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
/>
{/ Picker (Custom Styles) /}
title="Date Range"
onFromChange={(date: Date) => setFromDate(date)}
onToChange={(date: Date) => setToDate(date)}
mode="spinner"
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
},
containerDark: {
backgroundColor: '#000000',
},
}}
customStyleTitleText={{
titleTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
titleTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleDivider={{
dividerLight: {
marginTop: 16,
marginBottom: 16,
borderBottomWidth: 2,
borderColor: 'red',
},
dividerDark: {
marginTop: 16,
marginBottom: 16,
borderBottomWidth: 2,
borderColor: 'red',
},
}}
/>
{/ Dropdown: List (Custom Styles) /}
title="List (Custom Styles)"
items={items}
onChange={(value: string) => setListValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
{/ Dropdown: Number (Custom Styles) /}
title="Number"
onChange={(value: string) => setNumberValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
{/ Dropdown: Measurements (Custom Styles) /}
title="Measurement"
onChange={(value: string) => setMeasurementValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
{/ Dropdown: State (Custom Styles) /}
title="State"
onChange={(value: string) => setStateValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
);
};
// Exports
export default App;
`
6. Run Project:
Android
`javascript
react-native run-android
`iOS
`javascript
react-native run-ios
`
Props
Building & Publishing
Build
`
npm run build
`Publish
`
npm publish
`
Changelog
$3
Changed
- Add
cancelText and doneText optional props to all dropdowns.$3
Changed
- Changed
import React from 'react to import * as React from 'react.
- Updated example code in README.$3
Added
- Added
@react-native-picker/picker as a peerDependency.Changed
- Changed
"jsx": "react-native" to "jsx": "react-jsx" in tsconfig.json.$3
Changed
- Updated Getting Started in
README.Added
- Added
@react-native-picker/picker as a devDependency and peerDependency.$3
Changed
- Updated Getting Started in
README.Added
- Added
react-native-community/datetimepicker as a devDependency.$3
Added
- Added
@react-native-community/datetimepicker as a peerDependency.$3
Added
- Added support to
src/components/pickers for iOS 14.
- Added react-native-slide-modal to package.json.$3
Changed
- Changed
peerDependency react from "react": "*" to "react": ">=16.8.3".
- Changed peerDependency react-native from "react-native": "*" to "react-native": ">=0.60".
- Updated example code in README.$3
Added
- Added
react-native-slide-modal dependency.
- Added .npmignore.
- Added Props section to README.Changed
- Changed
src/index.js to src/index.tsx.
- Changed package.json build script to cd src && tsc && cp ../package.json && Echo Build completed!.
- Updated package.json dependencies.
- Updated tsconfig.json.
- Fixed peerDependencies issue.Removed
- Removed
react-native-modal dependency.
- Removed React Native dependencies.$3
Changed
- Fixed
peerDependencies issue.$3
Changed
- Changed
@react-native-community/datetimepicker to peerDependency.
- Changed @react-native-picker/picker to peerDependency.
- Changed react-native-modal to peerDependency.
- Updated README Getting Started for iOS pods.
- Updated README Getting Started for Android dependencies.$3
Added
- Added
useState to App.tsx and state management fro dropdowns and pickers.Changed
- Changed
onChange(item: string) to onChange(item: value).
- Changed onChange(state: string) to onChange(item: value).$3
Changed
- Fixed
onChange, onFromChange, onToChange issues.$3
Changed
- Fixed
onChange, onFromChange, onToChange issues.$3
Added
- Added custom style prop
customStyleContainer.
- Added custom style prop customStyleTitleText.
- Added custom style prop customStyleLabelText.
- Added custom style prop customStyleFieldText.
- Added custom style prop customStyleModalHeaderContainer.
- Added custom style prop customStyleCancelText.
- Added custom style prop customStyleDoneText.
- Added custom style prop customStyleModalContentContainer.
- Added custom style prop customStylePickerItemText.
- Added custom style prop customStyleDivider.Changed
- Updated to
iOS 14 styling.
- Updated react dependency to React 17.
- Updated react-native dependency to React 0.64.
- Updated react-native-modal dependency.
- Updated @react-native-community/datetimepicker dependency.
- Updated @react-native-community/picker dependency with @react-native-picker/picker.
- Changed DatePicker to PickerDate.
- Changed DateTimePicker to PickerDateTime.
- Changed DateRangePicker to PickerDateRange.
- Changed TimePicker to PickerTime.
- Changed ListPicker to DropdownList.
- Changed CookingMeasurementsPicker to DropdownMeasurements.
- Changed NumberPicker to DropdownNumber.
- Changed StatePicker to DropdownState.Removed
- Removed to
StatePickerSmall.
$3
Added
- Added Dark Mode support. Please upgrade to
React Native 0.62 for this to work.
- Added @react-native-community/picker dependency (Picker is soon to be deprecated).$3
Changed
- Updated
react dependency.
- Updated react-native dependency.
- Updated react-native-modal dependency.Removed
- Removed
moment dependency.$3
Changed
- Updated
@react-native-community/datetimepicker to 2.3.2.
- Removed unnecessary try/catch blocks.$3
Changed
- Updated dependencies.
$3
Changed
- Changed
CookingAmountPicker to CookingAmountPicker.
- Fixed defaultValue prop for CookingAmountPicker and ListPicker.$3
Added
- Added
defaultValue prop for CookingAmountPicker and ListPicker.$3
Changed
- Fixed
selectItem string/number type issue.$3
Added
- Added
NumberPicker.
- Added CookingAmountPicker.Changed
- Increased
inputTitleContainer width.$3
Changed
- Increased
fieldTextContainer marginBottom to 12px.$3
Changed
- Fixed
@react-native-community/datetimepicker ^2.1.1 vs 2.1.1 issue.$3
Changed
- Updated
@react-native-community/datetimepicker to 2.1.1.
- Changing backdrop opacity to 30%.
- Increased TouchableOpacity size for DateRangePicker.
- Increased pickerHeaderContainer height to 45px.
- Fixed README podspec issue.Removed
- Removed
react-native-vector-icons.$3
Changed
- Fixed
onChange issue.
- Done button is now disabled unless a new item or state is picked.$3
Added
- Adding typings for
onChange.
- Passing initial date to parent component (useEffect) for Date, Time, Datetime, and Date Range Pickers.Changed
- Date Range's
toDate is now defaulted to "Select."$3
Changed
- Fixed
Picker Done button issue. Done button is now disabled unless new date is picked.
- Increased Picker container size for iOS.Removed
- Removed
async/await due to that it was not the root cause of the issue.$3
Changed
- Fixed
onChange TypeScript typings.$3
Changed
- Fixed React Hook state +
onValueChange issue due to having the same name of "state."
$3
Changed
- Added
Keyboard.dismiss() to toggleModal().$3
Added
- Added
Keyboard.dismiss() to work better with form fields.$3
Changed
- Fixed
README Formatting.$3
Added
- Added cancel button to
iOS ListPicker.
- Added test data items for ListPicker on README.
- Added props to App.tsx for testing.
- Title props can be added to any Picker. Default titles are shown if no prop is added.Changed
- Reformatted
App.tsx for when testing.
- Fixed onChange TypeScript Typings.
- Updated README screenshot GIFs.$3
Changed
- Updated
README for NPM package.$3
Added
- Added
podfile installation instructions to README.
- Added cancel button for iOS modals.Changed
- Fixed
if/else toggle issue.
- Fixed undefined date issue.
- Fixed onChange issue.
- Changed if statements for Platform to if/else`, so only one would ever run.