Package Exports

react-native-nice-picker
react-native-nice-picker/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-nice-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Nice 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-nice-picker
yarn add react-native-nice-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-nice-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.