@partypoison/react-native-ultimate-modal-picker NP

React Native Ultimate Modal Picker

Features

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

Built With

TypeScript - Programming Language
React Native - Mobile (iOS/Android) Framework
React Native Modal - Modal
React Native Picker - Native Picker
React Native Datetime Picker - Native Date/Time Picker
React Hooks - Functional Component State/Lifecycle Methods

Pending Items

Getting Started

1. Install Package:

npm i @partypoison/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, StyleSheet } from 'react-native';
import {
  DateRangePicker,
  DatePicker,
  TimePicker,
  DateTimePicker,
  ListPicker,
  NumberPicker,
  CookingAmountPicker,
  StatePicker,
  StatePickerSmall,
  TextField,
} from 'react-native-ultimate-modal-picker';

// Override styles
const overrideStyles = StyleSheet.create({
  inputTitle: {
    color: '#7D7D7D',
    borderColor: '#7D7D7D',
    fontSize: 17,
    fontWeight: '600',
    textTransform: 'uppercase',
  },
  fieldTextContainer: {
    borderColor: '#029cf5',
    borderBottomWidth: 2,
  },
});

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

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

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

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

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

      {/* Cooking Amount Picker styled*/}
      <CookingAmountPicker
        title="Amount"
        onChange={(item) => console.log(item)}
        style={overrideStyles}
      />
      {/* State Picker styled*/}
      <StatePicker
        title="State"
        onChange={(state) => console.log(state)}
        style={overrideStyles}
      />

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

      {/* Date Range Picker styled*/}
      <DateRangePicker
        title="Date Range"
        onFromChange={(date) => console.log(date)}
        onToChange={(date) => console.log(date)}
        mode="spinner"
        style={overrideStyles}
      />
    </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.3.0 - 03/19/2021

Added

Added support to override styles. Approve tonyduanesmith pool request.

0.2.3 - 10/03/2020

Added

Added support to override styles.

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