{"id":23384471,"url":"https://github.com/jefelewis/react-native-ultimate-modal-picker","last_synced_at":"2026-04-02T02:36:48.538Z","repository":{"id":39916781,"uuid":"231270146","full_name":"jefelewis/react-native-ultimate-modal-picker","owner":"jefelewis","description":"NPM Link: https://www.npmjs.com/package/react-native-ultimate-modal-picker","archived":false,"fork":false,"pushed_at":"2023-03-04T05:34:08.000Z","size":22104,"stargazers_count":42,"open_issues_count":9,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T12:44:22.215Z","etag":null,"topics":["npm-package","react-native-modal","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jefelewis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-01T22:20:29.000Z","updated_at":"2023-11-07T03:27:36.000Z","dependencies_parsed_at":"2024-06-19T00:13:52.908Z","dependency_job_id":"6d4da05c-ebfb-42db-8e04-219ff1e6170b","html_url":"https://github.com/jefelewis/react-native-ultimate-modal-picker","commit_stats":{"total_commits":318,"total_committers":1,"mean_commits":318.0,"dds":0.0,"last_synced_commit":"002850a30099c3a38bed122fd029628d4e16f2c1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jefelewis/react-native-ultimate-modal-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-ultimate-modal-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-ultimate-modal-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-ultimate-modal-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-ultimate-modal-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jefelewis","download_url":"https://codeload.github.com/jefelewis/react-native-ultimate-modal-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jefelewis%2Freact-native-ultimate-modal-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259952457,"owners_count":22936956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["npm-package","react-native-modal","typescript"],"created_at":"2024-12-21T23:27:24.964Z","updated_at":"2026-04-02T02:36:48.415Z","avatar_url":"https://github.com/jefelewis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Ultimate Modal Picker\n\n[![npm version](https://badge.fury.io/js/react-native-ultimate-modal-picker.svg)](https://badge.fury.io/js/react-native-ultimate-modal-picker)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-ultimate-modal-picker.svg)](https://www.npmjs.com/package/react-native-ultimate-modal-picker)\n\n*  [Features](#features)\n*  [Built With](#built-with)\n*  [Pending Items](#pending-items)\n*  [Picker Types (iOS)](#picker-types-ios)\n*  [Picker Types (Android)](#picker-types-android)\n*  [Getting Started](#getting-started)\n*  [Props](#props)\n*  [Building \u0026 Publishing](#building-\u0026-publishing)\n*  [Changelog](#changelog)\n\n\n## Features\n*  ✅ iOS/Android\n*  ✅ Dark Mode\n*  ✅ Custom Styles\n*  ✅ Built with TypeScript\n*  ✅ Built with React Hooks\n\n\n## Built With\n* [TypeScript](https://github.com/microsoft/TypeScript) - Programming Language\n* [React Native](https://facebook.github.io/react-native/) - Mobile (iOS/Android) Framework\n* [React Native Slide Modal](https://www.npmjs.com/package/react-native-slide-modal) - Modal\n* [React Native Picker](https://github.com/react-native-picker/picker) - Native Picker\n* [React Native Datetime Picker](https://github.com/react-native-community/react-native-datetimepicker) - Native Date/Time Picker\n* [React Hooks](https://reactjs.org/docs/hooks-intro.html) - Functional Component State/Lifecycle Methods\n\n## Pending Items\n- [ ] Fix Android issues\n\n\n## Picker Types (iOS)\n### 1. Date\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosDate.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 2. Time\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosTime.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 3. Date/Time (iOS Only)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosDateTime.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 4. List\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosList.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n\n### 5. State (50 United States)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/ios/iosState.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n## Picker Types (Android)\n### 1. Date (Mode: Spinner)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/android/androidDateSpinner.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 2. Date (Mode: Calendar)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/android/androidDateCalendar.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 3. Time (Mode: Spinner)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/android/androidTimeSpinner.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 4. Time (Mode: Clock)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/android/androidTimeClock.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n### 5. List\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/android/androidList.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n\n### 6. State (50 United States)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/screenshots/android/androidState.gif\" width=\"40%\" height=\"40%\" /\u003e\n\u003c/div\u003e\n\n\n## Getting Started\n**1. Install Package:**\n```\nnpm i react-native-ultimate-modal-picker\n```\n\n**2. Install additional dependencies:**\n\n**Note:** This NPM Package uses the [Native Modules](https://reactnative.dev/docs/native-modules-intro)  [`@react-native-community/datetimepicker`](https://github.com/react-native-datetimepicker/datetimepicker) and [`@react-native-picker/picker`](https://github.com/react-native-picker/picker), so it must be installed in your project.\n\n```\nnpm i @react-native-community/datetimepicker @react-native-picker/picker\n```\n\n**3. Install Cocoapods:**\n```\ncd ios\n\npod install\n```\n\n**4. Add Example Code:**\n```typescript\n// Imports: Dependencies\nimport React, { useState } from 'react';\nimport { SafeAreaView, ScrollView } from 'react-native';\nimport {\n  // Pickers\n  PickerTime,\n  PickerDate,\n  PickerDateTime,\n  PickerDateRange,\n  // Dropdowns\n  DropdownList,\n  DropdownMeasurements,\n  DropdownNumber,\n  DropdownState,\n  // TypeScript Types\n  PickerItem,\n} from 'react-native-ultimate-modal-picker';\n\n// React Native App\nconst App: React.FC = (): JSX.Element =\u003e {\n  // React Hooks: State\n  // Pickers\n  const [ date, setDate ] = useState\u003cDate\u003e(new Date());\n  const [ time, setTime ] = useState\u003cDate\u003e(new Date());\n  const [ dateTime, setDateTime ] = useState\u003cDate\u003e(new Date());\n  const [ fromDate, setFromDate ] = useState\u003cDate\u003e(new Date());\n  const [ toDate, setToDate ] = useState\u003cDate\u003e(new Date());\n  // Dropdowns\n  const [ listValue, setListValue ] = useState\u003cstring\u003e('');\n  const [ numberValue, setNumberValue ] = useState\u003cstring\u003e('');\n  const [ measurementValue, setMeasurementValue ] = useState\u003cstring\u003e('');\n  const [ stateValue, setStateValue ] = useState\u003cstring\u003e('');\n\n  // Items\n  const items: Array\u003cPickerItem\u003e = [\n    { label: '1', value: '1' },\n    { label: '2', value: '2' },\n    { label: '3', value: '3' },\n    { label: '4', value: '4' },\n    { label: '5', value: '5' },\n    { label: '6', value: '6' },\n    { label: '7', value: '7' },\n    { label: '8', value: '8' },\n    { label: '9', value: '9' },\n    { label: '10', value: '10' },\n  ];\n\n  return (\n    \u003cSafeAreaView style={{ display: 'flex', flex: 1 }}\u003e\n      \u003cScrollView\u003e\n        {/* Picker: Date (Modes: spinner/calendar) */}\n        \u003cPickerDate\n          title=\"Date\"\n          onChange={(date: Date) =\u003e setDate(date)}\n          mode=\"spinner\"\n        /\u003e\n\n        {/* Picker: Time (Modes: spinner/clock) */}\n        \u003cPickerTime\n          title=\"Time\"\n          onChange={(date: Date) =\u003e setTime(date)}\n          mode=\"spinner\"\n        /\u003e\n\n        {/* Picker: Date Time (iOS Only) */}\n        \u003cPickerDateTime\n          title=\"Date/Time\"\n          onChange={(date: Date) =\u003e setDateTime(date)}\n        /\u003e\n\n        {/* Picker (Date Range) */}\n        \u003cPickerDateRange\n          title=\"Date Range\"\n          onFromChange={(date: Date) =\u003e setFromDate(date)}\n          onToChange={(date: Date) =\u003e setToDate(date)}\n          mode=\"spinner\"\n        /\u003e\n\n        {/* Dropdown: List */}\n        \u003cDropdownList\n          title=\"List\"\n          items={items}\n          onChange={(value: string) =\u003e setListValue(value)}\n        /\u003e\n\n        {/* Dropdown: Number */}\n        \u003cDropdownNumber\n          title=\"Number\"\n          onChange={(value: string) =\u003e setNumberValue(value)}\n        /\u003e\n\n        {/* Dropdown: Measurements */}\n        \u003cDropdownMeasurements\n          title=\"Measurement\"\n          onChange={(value: string) =\u003e setMeasurementValue(value)}\n        /\u003e\n\n        {/* Dropdown: State */}\n        \u003cDropdownState\n          title=\"State\"\n          onChange={(value: string) =\u003e setStateValue(value)}\n        /\u003e\n\n        {/* Picker: Date (Custom Styles) */}\n        \u003cPickerDate\n          title=\"Date (Custom Styles)\"\n          onChange={(date: Date) =\u003e setDate(date)}\n          mode=\"spinner\"\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n        /\u003e\n\n        {/* Picker: Time (Custom Styles) */}\n        \u003cPickerTime\n          title=\"Time (Custom Styles)\"\n          onChange={(date: Date) =\u003e setTime(date)}\n          mode=\"spinner\"\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n        /\u003e\n\n        {/* Picker: Date Time (Custom Styles) */}\n        \u003cPickerDateTime\n          title=\"Date/Time (Custom Styles)\"\n          onChange={(date: Date) =\u003e setDateTime(date)}\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n        /\u003e\n\n        {/* Picker (Custom Styles) */}\n        \u003cPickerDateRange\n          title=\"Date Range\"\n          onFromChange={(date: Date) =\u003e setFromDate(date)}\n          onToChange={(date: Date) =\u003e setToDate(date)}\n          mode=\"spinner\"\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n            },\n          }}\n          customStyleTitleText={{\n            titleTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            titleTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleDivider={{\n            dividerLight: {\n              marginTop: 16,\n              marginBottom: 16,\n              borderBottomWidth: 2,\n              borderColor: 'red',\n            },\n            dividerDark: {\n              marginTop: 16,\n              marginBottom: 16,\n              borderBottomWidth: 2,\n              borderColor: 'red',\n            },\n          }}\n        /\u003e\n\n        {/* Dropdown: List (Custom Styles) */}\n        \u003cDropdownList\n          title=\"List (Custom Styles)\"\n          items={items}\n          onChange={(value: string) =\u003e setListValue(value)}\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleFieldText={{\n            fieldTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            fieldTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleModalHeaderContainer={{\n            modalHeaderContainerLight: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            modalHeaderContainerDark: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleCancelText={{\n            cancelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n            cancelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n          }}\n          customStyleDoneText={{\n            doneTextLight: {\n              color: 'red',\n            },\n            doneTextDark: {\n              color: 'red',\n            },\n          }}\n          customStyleModalContentContainer={{\n            modalContentContainerLight: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n            modalContentContainerDark: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n          }}\n          customStylePickerItemText={{\n            pickerItemTextLight: {\n              color: 'red',\n            },\n            pickerItemTextDark: {\n              color: 'red',\n            }\n          }}\n        /\u003e\n\n        {/* Dropdown: Number (Custom Styles) */}\n        \u003cDropdownNumber\n          title=\"Number\"\n          onChange={(value: string) =\u003e setNumberValue(value)}\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleFieldText={{\n            fieldTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            fieldTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleModalHeaderContainer={{\n            modalHeaderContainerLight: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            modalHeaderContainerDark: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleCancelText={{\n            cancelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n            cancelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n          }}\n          customStyleDoneText={{\n            doneTextLight: {\n              color: 'red',\n            },\n            doneTextDark: {\n              color: 'red',\n            },\n          }}\n          customStyleModalContentContainer={{\n            modalContentContainerLight: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n            modalContentContainerDark: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n          }}\n          customStylePickerItemText={{\n            pickerItemTextLight: {\n              color: 'red',\n            },\n            pickerItemTextDark: {\n              color: 'red',\n            }\n          }}\n        /\u003e\n\n        {/* Dropdown: Measurements (Custom Styles) */}\n        \u003cDropdownMeasurements\n          title=\"Measurement\"\n          onChange={(value: string) =\u003e setMeasurementValue(value)}\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleFieldText={{\n            fieldTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            fieldTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleModalHeaderContainer={{\n            modalHeaderContainerLight: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            modalHeaderContainerDark: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleCancelText={{\n            cancelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n            cancelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n          }}\n          customStyleDoneText={{\n            doneTextLight: {\n              color: 'red',\n            },\n            doneTextDark: {\n              color: 'red',\n            },\n          }}\n          customStyleModalContentContainer={{\n            modalContentContainerLight: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n            modalContentContainerDark: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n          }}\n          customStylePickerItemText={{\n            pickerItemTextLight: {\n              color: 'red',\n            },\n            pickerItemTextDark: {\n              color: 'red',\n            }\n          }}\n        /\u003e\n\n        {/* Dropdown: State (Custom Styles) */}\n        \u003cDropdownState\n          title=\"State\"\n          onChange={(value: string) =\u003e setStateValue(value)}\n          customStyleContainer={{\n            containerLight: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            containerDark: {\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleLabelText={{\n            labelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            labelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleFieldText={{\n            fieldTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n            fieldTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              textTransform: 'lowercase',\n              color: 'red',\n            },\n          }}\n          customStyleModalHeaderContainer={{\n            modalHeaderContainerLight: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n            modalHeaderContainerDark: {\n              height: 55,\n              backgroundColor: '#000000',\n              borderColor: '#000000',\n              borderBottomWidth: 2,\n            },\n          }}\n          customStyleCancelText={{\n            cancelTextLight: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n            cancelTextDark: {\n              fontFamily: 'System',\n              fontSize: 22,\n              fontWeight: '800',\n              color: 'red',\n            },\n          }}\n          customStyleDoneText={{\n            doneTextLight: {\n              color: 'red',\n            },\n            doneTextDark: {\n              color: 'red',\n            },\n          }}\n          customStyleModalContentContainer={{\n            modalContentContainerLight: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n            modalContentContainerDark: {\n              height: 400,\n              backgroundColor: '#000000',\n            },\n          }}\n          customStylePickerItemText={{\n            pickerItemTextLight: {\n              color: 'red',\n            },\n            pickerItemTextDark: {\n              color: 'red',\n            }\n          }}\n        /\u003e\n      \u003c/ScrollView\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\n// Exports\nexport default App;\n```\n\n\n**6. Run Project:**\n\n**Android**\n```javascript\nreact-native run-android\n```\n\n**iOS**\n```javascript\nreact-native run-ios\n```\n\n\n## Props\n\n\n\n\n## Building \u0026 Publishing\n\n**Build**\n```\nnpm run build\n```\n\n**Publish**\n```\nnpm publish\n```\n\n\n## Changelog\n\n### [1.1.0] - 5/26/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Added `cancelText` and `doneText` optional props to all `dropdowns`.\n\n### [1.0.0] - 5/26/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Changed `import React from 'react` to `import * as React from 'react`.\n- Updated example code in `README`.\n\n### [0.3.14] - 5/24/2021 - **BREAKING CHANGES**\n\n***Added***\n\n- Added `@react-native-picker/picker` as a `peerDependency`.\n\n***Changed***\n\n- Changed `\"jsx\": \"react-native\"` to `\"jsx\": \"react-jsx\"` in `tsconfig.json`.\n\n### [0.3.13] - 5/24/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Updated Getting Started in `README`.\n\n***Added***\n\n- Added `@react-native-picker/picker` as a `devDependency` and `peerDependency`.\n\n### [0.3.12] - 5/24/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Updated Getting Started in `README`.\n\n***Added***\n\n- Added `react-native-community/datetimepicker` as a `devDependency`.\n\n### [0.3.9] - 5/22/2021 - **BREAKING CHANGES**\n\n***Added***\n\n- Added `@react-native-community/datetimepicker` as a `peerDependency`.\n\n### [0.3.8] - 5/22/2021 - **BREAKING CHANGES**\n\n***Added***\n\n- Added support to `src/components/pickers` for `iOS 14`.\n- Added `react-native-slide-modal` to `package.json`.\n\n### [0.3.7] - 5/22/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Changed `peerDependency` `react` from `\"react\": \"*\"` to `\"react\": \"\u003e=16.8.3\"`.\n- Changed `peerDependency` `react-native` from `\"react-native\": \"*\"` to `\"react-native\": \"\u003e=0.60\"`.\n- Updated example code in `README`.\n\n### [0.3.6] - 5/22/2021 - **BREAKING CHANGES**\n\n***Added***\n\n- Added `react-native-slide-modal` dependency.\n- Added `.npmignore`.\n- Added Props section to `README`.\n\n***Changed***\n\n- Changed `src/index.js` to `src/index.tsx`.\n- Changed `package.json` build script to `cd src \u0026\u0026 tsc \u0026\u0026 cp ../package.json \u0026\u0026 Echo Build completed!`.\n- Updated `package.json` dependencies.\n- Updated `tsconfig.json`.\n- Fixed `peerDependencies` issue.\n\n***Removed***\n\n- Removed `react-native-modal` dependency.\n- Removed React Native dependencies.\n\n### [0.3.5] - 5/16/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Fixed `peerDependencies` issue.\n\n### [0.3.4] - 5/13/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Changed `@react-native-community/datetimepicker` to `peerDependency`.\n- Changed `@react-native-picker/picker` to `peerDependency`.\n- Changed `react-native-modal` to `peerDependency`.\n- Updated `README` Getting Started for `iOS` pods.\n- Updated `README` Getting Started for `Android` dependencies.\n\n### [0.3.3] - 5/13/2021 - **BREAKING CHANGES**\n\n***Added***\n\n- Added `useState` to `App.tsx` and state management fro dropdowns and pickers.\n\n***Changed***\n\n- Changed `onChange(item: string)` to `onChange(item: value)`.\n- Changed `onChange(state: string)` to `onChange(item: value)`.\n\n### [0.3.2] - 5/13/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Fixed `onChange`, `onFromChange`, `onToChange` issues.\n\n### [0.3.1] - 5/13/2021 - **BREAKING CHANGES**\n\n***Changed***\n\n- Fixed `onChange`, `onFromChange`, `onToChange` issues.\n\n### [0.3.0] - 5/12/2021 - **BREAKING CHANGES**\n\n***Added***\n\n- Added custom style prop `customStyleContainer`.\n- Added custom style prop `customStyleTitleText`.\n- Added custom style prop `customStyleLabelText`.\n- Added custom style prop `customStyleFieldText`.\n- Added custom style prop `customStyleModalHeaderContainer`.\n- Added custom style prop `customStyleCancelText`.\n- Added custom style prop `customStyleDoneText`.\n- Added custom style prop `customStyleModalContentContainer`.\n- Added custom style prop `customStylePickerItemText`.\n- Added custom style prop `customStyleDivider`.\n\n***Changed***\n\n- Updated to `iOS 14` styling.\n- Updated `react` dependency to `React 17`.\n- Updated `react-native` dependency to `React 0.64`.\n- Updated `react-native-modal` dependency.\n- Updated `@react-native-community/datetimepicker` dependency.\n- Updated `@react-native-community/picker` dependency with `@react-native-picker/picker`.\n- Changed `DatePicker` to `PickerDate`.\n- Changed `DateTimePicker` to `PickerDateTime`.\n- Changed `DateRangePicker` to `PickerDateRange`.\n- Changed `TimePicker` to `PickerTime`.\n- Changed `ListPicker` to `DropdownList`.\n- Changed `CookingMeasurementsPicker` to `DropdownMeasurements`.\n- Changed `NumberPicker` to `DropdownNumber`.\n- Changed `StatePicker` to `DropdownState`.\n\n***Removed***\n\n- Removed to `StatePickerSmall`.\n\n\n### [0.2.2] - 8/10/2020\n\n***Added***\n- Added Dark Mode support. Please upgrade to `React Native 0.62` for this to work.\n- Added `@react-native-community/picker` dependency (`Picker` is soon to be deprecated).\n\n### [0.2.1] - 8/10/2020\n\n***Changed***\n- Updated `react` dependency.\n- Updated `react-native` dependency.\n- Updated `react-native-modal` dependency.\n\n***Removed***\n- Removed `moment` dependency.\n\n### [0.2.0] - 4/21/2020\n\n***Changed***\n- Updated `@react-native-community/datetimepicker` to `2.3.2`.\n- Removed unnecessary `try/catch` blocks.\n\n### [0.1.64] - 3/13/2020\n\n***Changed***\n- Updated dependencies.\n\n### [0.1.63] - 3/13/2020\n\n***Changed***\n- Changed `CookingAmountPicker` to `CookingAmountPicker`.\n- Fixed `defaultValue` prop for `CookingAmountPicker` and `ListPicker`.\n\n### [0.1.62] - 3/13/2020\n\n***Added***\n\n- Added `defaultValue` prop for `CookingAmountPicker` and `ListPicker`.\n\n### [0.1.59] - 3/5/2020\n\n***Changed***\n\n- Fixed `selectItem` string/number type issue.\n\n### [0.1.59] - 3/5/2020\n\n***Added***\n\n- Added `NumberPicker`.\n- Added `CookingAmountPicker`.\n\n***Changed***\n\n- Increased `inputTitleContainer` `width`.\n\n### [0.1.58] - 2/7/2020\n\n***Changed***\n\n- Increased `fieldTextContainer` `marginBottom` to `12px`.\n\n### [0.1.57] - 2/7/2020\n\n***Changed***\n\n- Fixed `@react-native-community/datetimepicker` `^2.1.1` vs `2.1.1` issue.\n\n### [0.1.56] - 2/7/2020\n\n***Changed***\n\n- Updated `@react-native-community/datetimepicker` to `2.1.1`.\n- Changing backdrop `opacity` to `30%`.\n- Increased `TouchableOpacity` size for `DateRangePicker`.\n- Increased `pickerHeaderContainer` `height` to `45px`.\n- Fixed `README` `podspec` issue.\n\n***Removed***\n\n- Removed `react-native-vector-icons`.\n\n### [0.1.55] - 1/28/2020\n\n***Changed***\n\n- Fixed `onChange` issue.\n- Done button is now `disabled` unless a new item or state is picked.\n\n### [0.1.54] - 1/28/2020\n\n***Added***\n\n- Adding typings for `onChange`.\n- Passing initial date to parent component (`useEffect`) for Date, Time, Datetime, and Date Range Pickers.\n\n***Changed***\n\n- Date Range's `toDate` is now defaulted to \"Select.\"\n\n### [0.1.53] - 1/27/2020\n\n***Changed***\n\n- Fixed `Picker` Done button issue. Done button is now `disabled` unless new date is picked.\n- Increased `Picker` container size for `iOS`.\n\n***Removed***\n\n- Removed `async/await` due to that it was not the root cause of the issue.\n\n### [0.1.47] - 1/26/2020\n\n***Changed***\n\n- Fixed `onChange` TypeScript typings.\n\n### [0.1.46] - 1/26/2020\n\n***Changed***\n\n- Fixed React Hook state + `onValueChange` issue due to having the same name of \"state.\"\n\n\n### [0.1.45] - 1/26/2020\n\n***Changed***\n\n- Added `Keyboard.dismiss()` to `toggleModal()`.\n\n### [0.1.44] - 1/25/2020\n\n***Added***\n\n- Added `Keyboard.dismiss()` to work better with form fields.\n\n### [0.1.43] - 1/24/2020\n\n***Changed***\n\n- Fixed `README` Formatting.\n\n### [0.1.42] - 1/24/2020\n\n***Added***\n\n- Added cancel button to `iOS` `ListPicker`.\n- Added test data items for `ListPicker` on `README`.\n- Added `props` to `App.tsx` for testing.\n- Title `props` can be added to any `Picker`. Default titles are shown if no `prop` is added.\n\n***Changed***\n\n- Reformatted `App.tsx` for when testing.\n- Fixed `onChange` TypeScript Typings.\n- Updated `README` screenshot GIFs.\n\n### [0.1.41] - 1/23/2020\n\n***Changed***\n\n- Updated `README` for NPM package.\n\n### [0.1.40] - 1/23/2020\n\n***Added***\n\n- Added `podfile` installation instructions to `README`.\n- Added cancel button for `iOS` modals.\n\n***Changed***\n\n- Fixed `if/else` toggle issue.\n- Fixed `undefined` date issue.\n- Fixed `onChange` issue.\n- Changed if statements for `Platform` to `if/else`, so only one would ever run.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjefelewis%2Freact-native-ultimate-modal-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjefelewis%2Freact-native-ultimate-modal-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjefelewis%2Freact-native-ultimate-modal-picker/lists"}