React Native Ultimate Modal Picker


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

Features

* ✅ iOS/Android
* ✅ Dark Mode
* ✅ Custom Styles
* ✅ Built with TypeScript
* ✅ Built with React Hooks

Built With

* TypeScript - Programming Language
* React Native - Mobile (iOS/Android) Framework
* React Native Slide Modal - Modal
* React Native Picker - Native Picker
* React Native Datetime Picker - Native Date/Time Picker
* React Hooks - Functional Component State/Lifecycle Methods

Pending Items

- [ ] Fix Android issues

Picker Types (iOS)

$3

$3

$3

$3

$3

Picker Types (Android)

$3

$3

$3

$3

$3

$3

Getting Started

1. Install Package:
``
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 ios

pod 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.