# React Native Ultimate Modal Picker

[![npm version](https://badge.fury.io/js/react-native-ultimate-modal-picker.svg)](https://badge.fury.io/js/react-native-ultimate-modal-picker)
[![npm downloads](https://img.shields.io/npm/dm/react-native-ultimate-modal-picker.svg)](https://www.npmjs.com/package/react-native-ultimate-modal-picker)

*  [Features](#features)
*  [Built With](#built-with)
*  [Pending Items](#pending-items)
*  [Picker Types (iOS)](#picker-types-ios)
*  [Picker Types (Android)](#picker-types-android)
*  [Getting Started](#getting-started)
*  [Props](#props)
*  [Building & Publishing](#building-&-publishing)
*  [Changelog](#changelog)


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


## Built With
* [TypeScript](https://github.com/microsoft/TypeScript) - Programming Language
* [React Native](https://facebook.github.io/react-native/) - Mobile (iOS/Android) Framework
* [React Native Slide Modal](https://www.npmjs.com/package/react-native-slide-modal) - Modal
* [React Native Picker](https://github.com/react-native-picker/picker) - Native Picker
* [React Native Datetime Picker](https://github.com/react-native-community/react-native-datetimepicker) - Native Date/Time Picker
* [React Hooks](https://reactjs.org/docs/hooks-intro.html) - Functional Component State/Lifecycle Methods

## Pending Items
- [ ] Fix Android issues


## Picker Types (iOS)
### 1. Date
<div align="center">
  <img src="./assets/screenshots/ios/iosDate.gif" width="40%" height="40%" />
</div>

### 2. Time
<div align="center">
  <img src="./assets/screenshots/ios/iosTime.gif" width="40%" height="40%" />
</div>

### 3. Date/Time (iOS Only)
<div align="center">
  <img src="./assets/screenshots/ios/iosDateTime.gif" width="40%" height="40%" />
</div>

### 4. List
<div align="center">
  <img src="./assets/screenshots/ios/iosList.gif" width="40%" height="40%" />
</div>


### 5. State (50 United States)
<div align="center">
  <img src="./assets/screenshots/ios/iosState.gif" width="40%" height="40%" />
</div>

## Picker Types (Android)
### 1. Date (Mode: Spinner)
<div align="center">
  <img src="./assets/screenshots/android/androidDateSpinner.gif" width="40%" height="40%" />
</div>

### 2. Date (Mode: Calendar)
<div align="center">
  <img src="./assets/screenshots/android/androidDateCalendar.gif" width="40%" height="40%" />
</div>

### 3. Time (Mode: Spinner)
<div align="center">
  <img src="./assets/screenshots/android/androidTimeSpinner.gif" width="40%" height="40%" />
</div>

### 4. Time (Mode: Clock)
<div align="center">
  <img src="./assets/screenshots/android/androidTimeClock.gif" width="40%" height="40%" />
</div>

### 5. List
<div align="center">
  <img src="./assets/screenshots/android/androidList.gif" width="40%" height="40%" />
</div>


### 6. State (50 United States)
<div align="center">
  <img src="./assets/screenshots/android/androidState.gif" width="40%" height="40%" />
</div>


## Getting Started
**1. Install Package:**
```
npm i react-native-ultimate-modal-picker
```

**2. Install additional dependencies:**

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

```
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<Date>(new Date());
  const [ time, setTime ] = useState<Date>(new Date());
  const [ dateTime, setDateTime ] = useState<Date>(new Date());
  const [ fromDate, setFromDate ] = useState<Date>(new Date());
  const [ toDate, setToDate ] = useState<Date>(new Date());
  // Dropdowns
  const [ listValue, setListValue ] = useState<string>('');
  const [ numberValue, setNumberValue ] = useState<string>('');
  const [ measurementValue, setMeasurementValue ] = useState<string>('');
  const [ stateValue, setStateValue ] = useState<string>('');

  // Items
  const items: Array<PickerItem> = [
    { 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 (
    <SafeAreaView style={{ display: 'flex', flex: 1 }}>
      <ScrollView>
        {/* Picker: Date (Modes: spinner/calendar) */}
        <PickerDate
          title="Date"
          onChange={(date: Date) => setDate(date)}
          mode="spinner"
        />

        {/* Picker: Time (Modes: spinner/clock) */}
        <PickerTime
          title="Time"
          onChange={(date: Date) => setTime(date)}
          mode="spinner"
        />

        {/* Picker: Date Time (iOS Only) */}
        <PickerDateTime
          title="Date/Time"
          onChange={(date: Date) => setDateTime(date)}
        />

        {/* Picker (Date Range) */}
        <PickerDateRange
          title="Date Range"
          onFromChange={(date: Date) => setFromDate(date)}
          onToChange={(date: Date) => setToDate(date)}
          mode="spinner"
        />

        {/* Dropdown: List */}
        <DropdownList
          title="List"
          items={items}
          onChange={(value: string) => setListValue(value)}
        />

        {/* Dropdown: Number */}
        <DropdownNumber
          title="Number"
          onChange={(value: string) => setNumberValue(value)}
        />

        {/* Dropdown: Measurements */}
        <DropdownMeasurements
          title="Measurement"
          onChange={(value: string) => setMeasurementValue(value)}
        />

        {/* Dropdown: State */}
        <DropdownState
          title="State"
          onChange={(value: string) => setStateValue(value)}
        />

        {/* Picker: Date (Custom Styles) */}
        <PickerDate
          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) */}
        <PickerTime
          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) */}
        <PickerDateTime
          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) */}
        <PickerDateRange
          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) */}
        <DropdownList
          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) */}
        <DropdownNumber
          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) */}
        <DropdownMeasurements
          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) */}
        <DropdownState
          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',
            }
          }}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

// 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

### [1.1.0] - 5/26/2021 - **BREAKING CHANGES**

***Changed***

- Add `cancelText` and `doneText` optional props to all `dropdowns`.

### [1.0.0] - 5/26/2021 - **BREAKING CHANGES**

***Changed***

- Changed `import React from 'react` to `import * as React from 'react`.
- Updated example code in `README`.

### [0.3.14] - 5/24/2021 - **BREAKING CHANGES**

***Added***

- Added `@react-native-picker/picker` as a `peerDependency`.

***Changed***

- Changed `"jsx": "react-native"` to `"jsx": "react-jsx"` in `tsconfig.json`.

### [0.3.13] - 5/24/2021 - **BREAKING CHANGES**

***Changed***

- Updated Getting Started in `README`.

***Added***

- Added `@react-native-picker/picker` as a `devDependency` and `peerDependency`.

### [0.3.12] - 5/24/2021 - **BREAKING CHANGES**

***Changed***

- Updated Getting Started in `README`.

***Added***

- Added `react-native-community/datetimepicker` as a `devDependency`.

### [0.3.9] - 5/22/2021 - **BREAKING CHANGES**

***Added***

- Added `@react-native-community/datetimepicker` as a `peerDependency`.

### [0.3.8] - 5/22/2021 - **BREAKING CHANGES**

***Added***

- Added support to `src/components/pickers` for `iOS 14`.
- Added `react-native-slide-modal` to `package.json`.

### [0.3.7] - 5/22/2021 - **BREAKING CHANGES**

***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`.

### [0.3.6] - 5/22/2021 - **BREAKING CHANGES**

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

### [0.3.5] - 5/16/2021 - **BREAKING CHANGES**

***Changed***

- Fixed `peerDependencies` issue.

### [0.3.4] - 5/13/2021 - **BREAKING CHANGES**

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

### [0.3.3] - 5/13/2021 - **BREAKING CHANGES**

***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)`.

### [0.3.2] - 5/13/2021 - **BREAKING CHANGES**

***Changed***

- Fixed `onChange`, `onFromChange`, `onToChange` issues.

### [0.3.1] - 5/13/2021 - **BREAKING CHANGES**

***Changed***

- Fixed `onChange`, `onFromChange`, `onToChange` issues.

### [0.3.0] - 5/12/2021 - **BREAKING CHANGES**

***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`.


### [0.2.2] - 8/10/2020

***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).

### [0.2.1] - 8/10/2020

***Changed***
- Updated `react` dependency.
- Updated `react-native` dependency.
- Updated `react-native-modal` dependency.

***Removed***
- Removed `moment` dependency.

### [0.2.0] - 4/21/2020

***Changed***
- Updated `@react-native-community/datetimepicker` to `2.3.2`.
- Removed unnecessary `try/catch` blocks.

### [0.1.64] - 3/13/2020

***Changed***
- Updated dependencies.

### [0.1.63] - 3/13/2020

***Changed***
- Changed `CookingAmountPicker` to `CookingAmountPicker`.
- Fixed `defaultValue` prop for `CookingAmountPicker` and `ListPicker`.

### [0.1.62] - 3/13/2020

***Added***

- Added `defaultValue` prop for `CookingAmountPicker` and `ListPicker`.

### [0.1.59] - 3/5/2020

***Changed***

- Fixed `selectItem` string/number type issue.

### [0.1.59] - 3/5/2020

***Added***

- Added `NumberPicker`.
- Added `CookingAmountPicker`.

***Changed***

- Increased `inputTitleContainer` `width`.

### [0.1.58] - 2/7/2020

***Changed***

- Increased `fieldTextContainer` `marginBottom` to `12px`.

### [0.1.57] - 2/7/2020

***Changed***

- Fixed `@react-native-community/datetimepicker` `^2.1.1` vs `2.1.1` issue.

### [0.1.56] - 2/7/2020

***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`.

### [0.1.55] - 1/28/2020

***Changed***

- Fixed `onChange` issue.
- Done button is now `disabled` unless a new item or state is picked.

### [0.1.54] - 1/28/2020

***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."

### [0.1.53] - 1/27/2020

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

### [0.1.47] - 1/26/2020

***Changed***

- Fixed `onChange` TypeScript typings.

### [0.1.46] - 1/26/2020

***Changed***

- Fixed React Hook state + `onValueChange` issue due to having the same name of "state."


### [0.1.45] - 1/26/2020

***Changed***

- Added `Keyboard.dismiss()` to `toggleModal()`.

### [0.1.44] - 1/25/2020

***Added***

- Added `Keyboard.dismiss()` to work better with form fields.

### [0.1.43] - 1/24/2020

***Changed***

- Fixed `README` Formatting.

### [0.1.42] - 1/24/2020

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

### [0.1.41] - 1/23/2020

***Changed***

- Updated `README` for NPM package.

### [0.1.40] - 1/23/2020

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