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)

1. Date

2. Time

3. Date/Time (iOS Only)

4. List

5. State (50 United States)

Picker Types (Android)

1. Date (Mode: Spinner)

2. Date (Mode: Calendar)

3. Time (Mode: Spinner)

4. Time (Mode: Clock)

5. List

6. State (50 United States)

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:

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

react-native run-android

iOS

react-native run-ios

Props

Building & Publishing

Build

npm run build

Publish

npm publish

Changelog

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

Changed

• Added 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.