react-native-ultimate-modal-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    React Native Ultimate Modal Picker

    npm version npm downloads

    Features

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

    Built With

    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

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

    Install

    npm i react-native-ultimate-modal-picker

    DownloadsWeekly Downloads

    418

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    289 kB

    Total Files

    37

    Last publish

    Collaborators

    • jefelewis