react-native-ultimate-modal-picker
React Native Picker Component Library (Date, Time, DateTime, List, State)
Last updated 3 months ago by jefelewis .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-ultimate-modal-picker 
SYNC missed versions from official npm registry.

React Native Ultimate Modal Picker

npm version npm downloads

Features

✅ iOS/Android ✅ Dark Mode ✅ Built with TypeScript ✅ Built with React Hooks

Built With

Pending Items

  • [ ]

Getting Started

1. Install Package:

npm i react-native-ultimate-modal-picker

2. Add Pod (For iOS)

Add the following line to ios/podfile:

pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'

3. Install Pods (For iOS)

cd ios
pod install

4. Add Dependencies (For Android)

Add the following lines to android/settings.gradle:

include ':react-native-datetimepicker'
project(':react-native-datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')

Add the following line to android/app/build.gradle:

dependencies {
  ...
  implementation project(':react-native-datetimepicker')
}

5. Run Project:

react-native run-ios

Example Code

// Imports: Dependencies
import React from 'react';
import { SafeAreaView } from 'react-native';
import {
  DateRangePicker,
  DatePicker,
  TimePicker,
  DateTimePicker,
  ListPicker,
  NumberPicker,
  CookingAmountPicker,
  StatePicker,
  StatePickerSmall,
  TextField,
} from 'react-native-ultimate-modal-picker';

// React Native App
const App = () => {

  // Test Data
  const items: any = [
    { 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 }}>
      {/* Date Picker (Modes: spinner/calendar) */}
      <DatePicker
        title="Date"
        onChange={(date) => console.log(date)}
        mode="spinner"
      />

      {/* Time Picker (Modes: spinner/clock) */}
      <TimePicker
        title="Time"
        onChange={(date) => console.log(date)}
        mode="spinner"
      />

      {/* Date Time Picker (iOS Only) */}
      <DateTimePicker
        title="Date/Time"
        onChange={(date) => console.log(date)}
      />

      {/* List Picker */}
      <ListPicker
        title="List"
        items={items}
        onChange={(item) => console.log(item)}
      />

      {/* Number Picker */}
      <NumberPicker
        title="Number"
        onChange={(item) => console.log(item)}
      />

      {/* Cooking Measurement Picker */}
      <CookingAmountPicker
        title="Measurement"
        onChange={(item) => console.log(item)}
      />

      {/* State Picker */}
      <StatePicker
        title="State"
        onChange={(state) => console.log(state)}
      />

      {/* State Picker (Small) */}
      <StatePickerSmall
        title="State"
        onChange={(state) => console.log(state)}
      />

      {/* Date Range Picker */}
      <DateRangePicker
        title="Date Range"
        onFromChange={(date) => console.log(date)}
        onToChange={(date) => console.log(date)}
        mode="spinner"
      />

      {/* Text Field */}
      <TextField
        title="Text"
        value={(text: string | number) => console.log(text)}
      />
    </SafeAreaView>
  );
};

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)

Changelog

[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 else/if so only one would ever run.

Current Tags

  • 0.2.2                                ...           latest (3 months ago)

76 Versions

  • 0.2.2                                ...           3 months ago
  • 0.2.1                                ...           3 months ago
  • 0.2.0                                ...           6 months ago
  • 0.1.64                                ...           7 months ago
  • 0.1.63                                ...           7 months ago
  • 0.1.62                                ...           7 months ago
  • 0.1.61                                ...           8 months ago
  • 0.1.60                                ...           8 months ago
  • 0.1.59                                ...           8 months ago
  • 0.1.58                                ...           9 months ago
  • 0.1.57                                ...           9 months ago
  • 0.1.56                                ...           9 months ago
  • 0.1.55                                ...           9 months ago
  • 0.1.54                                ...           9 months ago
  • 0.1.53                                ...           9 months ago
  • 0.1.52                                ...           9 months ago
  • 0.1.51                                ...           9 months ago
  • 0.1.50                                ...           9 months ago
  • 0.1.49                                ...           9 months ago
  • 0.1.48                                ...           9 months ago
  • 0.1.47                                ...           9 months ago
  • 0.1.46                                ...           9 months ago
  • 0.1.45                                ...           9 months ago
  • 0.1.44                                ...           9 months ago
  • 0.1.43                                ...           9 months ago
  • 0.1.42                                ...           9 months ago
  • 0.1.41                                ...           9 months ago
  • 0.1.40                                ...           9 months ago
  • 0.1.39                                ...           9 months ago
  • 0.1.38                                ...           9 months ago
  • 0.1.37                                ...           9 months ago
  • 0.1.36                                ...           9 months ago
  • 0.1.35                                ...           9 months ago
  • 0.1.34                                ...           9 months ago
  • 0.1.33                                ...           9 months ago
  • 0.1.32                                ...           9 months ago
  • 0.1.31                                ...           9 months ago
  • 0.1.30                                ...           9 months ago
  • 0.1.29                                ...           9 months ago
  • 0.1.28                                ...           9 months ago
  • 0.1.27                                ...           9 months ago
  • 0.1.26                                ...           9 months ago
  • 0.1.25                                ...           9 months ago
  • 0.1.24                                ...           9 months ago
  • 0.1.23                                ...           9 months ago
  • 0.1.22                                ...           9 months ago
  • 0.1.21                                ...           9 months ago
  • 0.1.20                                ...           9 months ago
  • 0.1.19                                ...           9 months ago
  • 0.1.18                                ...           9 months ago
  • 0.1.17                                ...           9 months ago
  • 0.1.15                                ...           9 months ago
  • 0.1.14                                ...           9 months ago
  • 0.1.13                                ...           9 months ago
  • 0.1.12                                ...           9 months ago
  • 0.1.11                                ...           9 months ago
  • 0.1.10                                ...           9 months ago
  • 0.1.9                                ...           9 months ago
  • 0.1.8                                ...           9 months ago
  • 0.1.7                                ...           9 months ago
  • 0.1.6                                ...           9 months ago
  • 0.1.5                                ...           9 months ago
  • 0.1.4                                ...           9 months ago
  • 0.1.3                                ...           9 months ago
  • 0.1.2                                ...           9 months ago
  • 0.1.1                                ...           9 months ago
  • 0.1.0                                ...           9 months ago
  • 0.0.9                                ...           9 months ago
  • 0.0.8                                ...           9 months ago
  • 0.0.7                                ...           9 months ago
  • 0.0.6                                ...           9 months ago
  • 0.0.5                                ...           9 months ago
  • 0.0.4                                ...           9 months ago
  • 0.0.3                                ...           9 months ago
  • 0.0.2                                ...           10 months ago
  • 0.0.1                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |