UNPKG

30.2 kBMarkdownView Raw
1# React Native Ultimate Modal Picker
2
3[![npm version](https://badge.fury.io/js/react-native-ultimate-modal-picker.svg)](https://badge.fury.io/js/react-native-ultimate-modal-picker)
4[![npm downloads](https://img.shields.io/npm/dm/react-native-ultimate-modal-picker.svg)](https://www.npmjs.com/package/react-native-ultimate-modal-picker)
5
6* [Features](#features)
7* [Built With](#built-with)
8* [Pending Items](#pending-items)
9* [Getting Started](#getting-started)
10* [Example Code](#example-code)
11* [Picker Types (iOS)](#picker-types-ios)
12* [Picker Types (Android)](#picker-types-android)
13* [Building & Publishing](#building-&-publishing)
14* [Changelog](#changelog)
15
16## Features
17* ✅ iOS/Android
18* ✅ Dark Mode
19* ✅ Custom Styles
20* ✅ Built with TypeScript
21* ✅ Built with React Hooks
22
23## Built With
24* [TypeScript](https://github.com/microsoft/TypeScript) - Programming Language
25* [React Native](https://facebook.github.io/react-native/) - Mobile (iOS/Android) Framework
26* [React Native Modal](https://github.com/react-native-community/react-native-modal) - Modal
27* [React Native Picker](https://github.com/react-native-picker/picker) - Native Picker
28* [React Native Datetime Picker](https://github.com/react-native-community/react-native-datetimepicker) - Native Date/Time Picker
29* [React Hooks](https://reactjs.org/docs/hooks-intro.html) - Functional Component State/Lifecycle Methods
30
31## Pending Items
32- [ ] Fix Android issues
33
34## Getting Started
35**1. Install Package:**
36```
37npm i react-native-ultimate-modal-picker
38```
39
40**2. Add Pod (For iOS)**
41
42Add the following line to ios/podfile:
43```javascript
44# Pods for testing
45pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'
46```
47
48**3. Install Pods (For iOS)**
49```
50cd ios
51pod install
52```
53
54**4. Add Dependencies (For Android)**
55
56Add the following lines to android/settings.gradle:
57```javascript
58include ':@react-native-community_datetimepicker'
59project(':@react-native-community_datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')
60```
61
62Add the following line to android/app/build.gradle:
63```javascript
64dependencies {
65 ...
66 implementation project(':@react-native-community_datetimepicker')
67}
68```
69
70**5. Run Project:**
71
72**Android**
73```javascript
74
75```
76
77**iOS**
78```javascript
79react-native run-ios
80```
81
82
83## Example Code
84```typescript
85// Imports: Dependencies
86import React, { useState } from 'react';
87import { SafeAreaView, ScrollView } from 'react-native';
88
89// Imports: Components
90import {
91 // Pickers
92 PickerTime,
93 PickerDate,
94 PickerDateTime,
95 PickerDateRange,
96 // Dropdowns
97 DropdownList,
98 DropdownMeasurements,
99 DropdownNumber,
100 DropdownState,
101} from './src/index';
102
103// Imports: TypeScript Types
104import { PickerValue } from './src/types/types';
105
106// React Native App
107const App: React.FC = (): JSX.Element => {
108 // React Hooks: State
109 // Pickers
110 const [ date, setDate ] = useState<Date>(new Date());
111 const [ time, setTime ] = useState<Date>(new Date());
112 const [ dateTime, setDateTime ] = useState<Date>(new Date());
113 const [ fromDate, setFromDate ] = useState<Date>(new Date());
114 const [ toDate, setToDate ] = useState<Date>(new Date());
115 // Dropdowns
116 const [ listValue, setListValue ] = useState<string>('');
117 const [ numberValue, setNumberValue ] = useState<string>('');
118 const [ measurementValue, setMeasurementValue ] = useState<string>('');
119 const [ stateValue, setStateValue ] = useState<string>('');
120
121 // Items
122 const items: Array<PickerValue> = [
123 { label: '1', value: '1' },
124 { label: '2', value: '2' },
125 { label: '3', value: '3' },
126 { label: '4', value: '4' },
127 { label: '5', value: '5' },
128 { label: '6', value: '6' },
129 { label: '7', value: '7' },
130 { label: '8', value: '8' },
131 { label: '9', value: '9' },
132 { label: '10', value: '10' },
133 ];
134
135 return (
136 <SafeAreaView style={{ display: 'flex', flex: 1 }}>
137 <ScrollView>
138 {/* Picker: Date (Modes: spinner/calendar) */}
139 <PickerDate
140 title="Date"
141 onChange={(date: Date) => setDate(date)}
142 mode="spinner"
143 />
144
145 {/* Picker: Date (Custom Styles) */}
146 <PickerDate
147 title="Date (Custom Styles)"
148 onChange={(date: Date) => setDate(date)}
149 mode="spinner"
150 customStyleContainer={{
151 containerLight: {
152 backgroundColor: '#000000',
153 borderColor: '#000000',
154 borderBottomWidth: 2,
155 },
156 containerDark: {
157 backgroundColor: '#000000',
158 borderColor: '#000000',
159 borderBottomWidth: 2,
160 },
161 }}
162 customStyleLabelText={{
163 labelTextLight: {
164 fontFamily: 'System',
165 fontSize: 22,
166 fontWeight: '800',
167 textTransform: 'lowercase',
168 color: 'red',
169 },
170 labelTextDark: {
171 fontFamily: 'System',
172 fontSize: 22,
173 fontWeight: '800',
174 textTransform: 'lowercase',
175 color: 'red',
176 },
177 }}
178 />
179
180 {/* Picker: Time (Modes: spinner/clock) */}
181 <PickerTime
182 title="Time"
183 onChange={(date: Date) => setTime(date)}
184 mode="spinner"
185 />
186
187 {/* Picker: Time (Custom Styles) */}
188 <PickerTime
189 title="Time (Custom Styles)"
190 onChange={(date: Date) => setTime(date)}
191 mode="spinner"
192 customStyleContainer={{
193 containerLight: {
194 backgroundColor: '#000000',
195 borderColor: '#000000',
196 borderBottomWidth: 2,
197 },
198 containerDark: {
199 backgroundColor: '#000000',
200 borderColor: '#000000',
201 borderBottomWidth: 2,
202 },
203 }}
204 customStyleLabelText={{
205 labelTextLight: {
206 fontFamily: 'System',
207 fontSize: 22,
208 fontWeight: '800',
209 textTransform: 'lowercase',
210 color: 'red',
211 },
212 labelTextDark: {
213 fontFamily: 'System',
214 fontSize: 22,
215 fontWeight: '800',
216 textTransform: 'lowercase',
217 color: 'red',
218 },
219 }}
220 />
221
222 {/* Picker: Date Time (iOS Only) */}
223 <PickerDateTime
224 title="Date/Time"
225 onChange={(date: Date) => setDateTime(date)}
226 />
227
228 {/* Picker: Date Time (Custom Styles) */}
229 <PickerDateTime
230 title="Date/Time (Custom Styles)"
231 onChange={(date: Date) => setDateTime(date)}
232 customStyleContainer={{
233 containerLight: {
234 backgroundColor: '#000000',
235 borderColor: '#000000',
236 borderBottomWidth: 2,
237 },
238 containerDark: {
239 backgroundColor: '#000000',
240 borderColor: '#000000',
241 borderBottomWidth: 2,
242 },
243 }}
244 customStyleLabelText={{
245 labelTextLight: {
246 fontFamily: 'System',
247 fontSize: 22,
248 fontWeight: '800',
249 textTransform: 'lowercase',
250 color: 'red',
251 },
252 labelTextDark: {
253 fontFamily: 'System',
254 fontSize: 22,
255 fontWeight: '800',
256 textTransform: 'lowercase',
257 color: 'red',
258 },
259 }}
260 />
261
262 {/* Picker (Date Range) */}
263 <PickerDateRange
264 title="Date Range"
265 onFromChange={(date: Date) => setFromDate(date)}
266 onToChange={(date: Date) => setToDate(date)}
267 mode="spinner"
268 />
269
270 {/* Picker (Custom Styles) */}
271 <PickerDateRange
272 title="Date Range"
273 onFromChange={(date: Date) => setFromDate(date)}
274 onToChange={(date: Date) => setToDate(date)}
275 mode="spinner"
276 customStyleContainer={{
277 containerLight: {
278 backgroundColor: '#000000',
279 },
280 containerDark: {
281 backgroundColor: '#000000',
282 },
283 }}
284 customStyleTitleText={{
285 titleTextLight: {
286 fontFamily: 'System',
287 fontSize: 22,
288 fontWeight: '800',
289 textTransform: 'lowercase',
290 color: 'red',
291 },
292 titleTextDark: {
293 fontFamily: 'System',
294 fontSize: 22,
295 fontWeight: '800',
296 textTransform: 'lowercase',
297 color: 'red',
298 },
299 }}
300 customStyleLabelText={{
301 labelTextLight: {
302 fontFamily: 'System',
303 fontSize: 22,
304 fontWeight: '800',
305 textTransform: 'lowercase',
306 color: 'red',
307 },
308 labelTextDark: {
309 fontFamily: 'System',
310 fontSize: 22,
311 fontWeight: '800',
312 textTransform: 'lowercase',
313 color: 'red',
314 },
315 }}
316 customStyleDivider={{
317 dividerLight: {
318 marginTop: 16,
319 marginBottom: 16,
320 borderBottomWidth: 2,
321 borderColor: 'red',
322 },
323 dividerDark: {
324 marginTop: 16,
325 marginBottom: 16,
326 borderBottomWidth: 2,
327 borderColor: 'red',
328 },
329 }}
330 />
331
332 {/* Dropdown: List */}
333 <DropdownList
334 title="List"
335 items={items}
336 onChange={(value: string) => setListValue(value)}
337 />
338
339 {/* Dropdown: List (Custom Styles) */}
340 <DropdownList
341 title="List (Custom Styles)"
342 items={items}
343 onChange={(value: string) => setListValue(value)}
344 customStyleContainer={{
345 containerLight: {
346 backgroundColor: '#000000',
347 borderColor: '#000000',
348 borderBottomWidth: 2,
349 },
350 containerDark: {
351 backgroundColor: '#000000',
352 borderColor: '#000000',
353 borderBottomWidth: 2,
354 },
355 }}
356 customStyleLabelText={{
357 labelTextLight: {
358 fontFamily: 'System',
359 fontSize: 22,
360 fontWeight: '800',
361 textTransform: 'lowercase',
362 color: 'red',
363 },
364 labelTextDark: {
365 fontFamily: 'System',
366 fontSize: 22,
367 fontWeight: '800',
368 textTransform: 'lowercase',
369 color: 'red',
370 },
371 }}
372 customStyleFieldText={{
373 fieldTextLight: {
374 fontFamily: 'System',
375 fontSize: 22,
376 fontWeight: '800',
377 textTransform: 'lowercase',
378 color: 'red',
379 },
380 fieldTextDark: {
381 fontFamily: 'System',
382 fontSize: 22,
383 fontWeight: '800',
384 textTransform: 'lowercase',
385 color: 'red',
386 },
387 }}
388 customStyleModalHeaderContainer={{
389 modalHeaderContainerLight: {
390 height: 55,
391 backgroundColor: '#000000',
392 borderColor: '#000000',
393 borderBottomWidth: 2,
394 },
395 modalHeaderContainerDark: {
396 height: 55,
397 backgroundColor: '#000000',
398 borderColor: '#000000',
399 borderBottomWidth: 2,
400 },
401 }}
402 customStyleCancelText={{
403 cancelTextLight: {
404 fontFamily: 'System',
405 fontSize: 22,
406 fontWeight: '800',
407 color: 'red',
408 },
409 cancelTextDark: {
410 fontFamily: 'System',
411 fontSize: 22,
412 fontWeight: '800',
413 color: 'red',
414 },
415 }}
416 customStyleDoneText={{
417 doneTextLight: {
418 color: 'red',
419 },
420 doneTextDark: {
421 color: 'red',
422 },
423 }}
424 customStyleModalContentContainer={{
425 modalContentContainerLight: {
426 height: 400,
427 backgroundColor: '#000000',
428 },
429 modalContentContainerDark: {
430 height: 400,
431 backgroundColor: '#000000',
432 },
433 }}
434 customStylePickerItemText={{
435 pickerItemTextLight: {
436 color: 'red',
437 },
438 pickerItemTextDark: {
439 color: 'red',
440 }
441 }}
442 />
443
444 {/* Dropdown: Number */}
445 <DropdownNumber
446 title="Number"
447 onChange={(value: string) => setNumberValue(value)}
448 />
449
450 {/* Dropdown: Number (Custom Styles) */}
451 <DropdownNumber
452 title="Number"
453 onChange={(value: string) => setNumberValue(value)}
454 customStyleContainer={{
455 containerLight: {
456 backgroundColor: '#000000',
457 borderColor: '#000000',
458 borderBottomWidth: 2,
459 },
460 containerDark: {
461 backgroundColor: '#000000',
462 borderColor: '#000000',
463 borderBottomWidth: 2,
464 },
465 }}
466 customStyleLabelText={{
467 labelTextLight: {
468 fontFamily: 'System',
469 fontSize: 22,
470 fontWeight: '800',
471 textTransform: 'lowercase',
472 color: 'red',
473 },
474 labelTextDark: {
475 fontFamily: 'System',
476 fontSize: 22,
477 fontWeight: '800',
478 textTransform: 'lowercase',
479 color: 'red',
480 },
481 }}
482 customStyleFieldText={{
483 fieldTextLight: {
484 fontFamily: 'System',
485 fontSize: 22,
486 fontWeight: '800',
487 textTransform: 'lowercase',
488 color: 'red',
489 },
490 fieldTextDark: {
491 fontFamily: 'System',
492 fontSize: 22,
493 fontWeight: '800',
494 textTransform: 'lowercase',
495 color: 'red',
496 },
497 }}
498 customStyleModalHeaderContainer={{
499 modalHeaderContainerLight: {
500 height: 55,
501 backgroundColor: '#000000',
502 borderColor: '#000000',
503 borderBottomWidth: 2,
504 },
505 modalHeaderContainerDark: {
506 height: 55,
507 backgroundColor: '#000000',
508 borderColor: '#000000',
509 borderBottomWidth: 2,
510 },
511 }}
512 customStyleCancelText={{
513 cancelTextLight: {
514 fontFamily: 'System',
515 fontSize: 22,
516 fontWeight: '800',
517 color: 'red',
518 },
519 cancelTextDark: {
520 fontFamily: 'System',
521 fontSize: 22,
522 fontWeight: '800',
523 color: 'red',
524 },
525 }}
526 customStyleDoneText={{
527 doneTextLight: {
528 color: 'red',
529 },
530 doneTextDark: {
531 color: 'red',
532 },
533 }}
534 customStyleModalContentContainer={{
535 modalContentContainerLight: {
536 height: 400,
537 backgroundColor: '#000000',
538 },
539 modalContentContainerDark: {
540 height: 400,
541 backgroundColor: '#000000',
542 },
543 }}
544 customStylePickerItemText={{
545 pickerItemTextLight: {
546 color: 'red',
547 },
548 pickerItemTextDark: {
549 color: 'red',
550 }
551 }}
552 />
553
554 {/* Dropdown: Measurements */}
555 <DropdownMeasurements
556 title="Measurement"
557 onChange={(value: string) => setMeasurementValue(value)}
558 />
559
560 {/* Dropdown: Measurements (Custom Styles) */}
561 <DropdownMeasurements
562 title="Measurement"
563 onChange={(value: string) => setMeasurementValue(value)}
564 customStyleContainer={{
565 containerLight: {
566 backgroundColor: '#000000',
567 borderColor: '#000000',
568 borderBottomWidth: 2,
569 },
570 containerDark: {
571 backgroundColor: '#000000',
572 borderColor: '#000000',
573 borderBottomWidth: 2,
574 },
575 }}
576 customStyleLabelText={{
577 labelTextLight: {
578 fontFamily: 'System',
579 fontSize: 22,
580 fontWeight: '800',
581 textTransform: 'lowercase',
582 color: 'red',
583 },
584 labelTextDark: {
585 fontFamily: 'System',
586 fontSize: 22,
587 fontWeight: '800',
588 textTransform: 'lowercase',
589 color: 'red',
590 },
591 }}
592 customStyleFieldText={{
593 fieldTextLight: {
594 fontFamily: 'System',
595 fontSize: 22,
596 fontWeight: '800',
597 textTransform: 'lowercase',
598 color: 'red',
599 },
600 fieldTextDark: {
601 fontFamily: 'System',
602 fontSize: 22,
603 fontWeight: '800',
604 textTransform: 'lowercase',
605 color: 'red',
606 },
607 }}
608 customStyleModalHeaderContainer={{
609 modalHeaderContainerLight: {
610 height: 55,
611 backgroundColor: '#000000',
612 borderColor: '#000000',
613 borderBottomWidth: 2,
614 },
615 modalHeaderContainerDark: {
616 height: 55,
617 backgroundColor: '#000000',
618 borderColor: '#000000',
619 borderBottomWidth: 2,
620 },
621 }}
622 customStyleCancelText={{
623 cancelTextLight: {
624 fontFamily: 'System',
625 fontSize: 22,
626 fontWeight: '800',
627 color: 'red',
628 },
629 cancelTextDark: {
630 fontFamily: 'System',
631 fontSize: 22,
632 fontWeight: '800',
633 color: 'red',
634 },
635 }}
636 customStyleDoneText={{
637 doneTextLight: {
638 color: 'red',
639 },
640 doneTextDark: {
641 color: 'red',
642 },
643 }}
644 customStyleModalContentContainer={{
645 modalContentContainerLight: {
646 height: 400,
647 backgroundColor: '#000000',
648 },
649 modalContentContainerDark: {
650 height: 400,
651 backgroundColor: '#000000',
652 },
653 }}
654 customStylePickerItemText={{
655 pickerItemTextLight: {
656 color: 'red',
657 },
658 pickerItemTextDark: {
659 color: 'red',
660 }
661 }}
662 />
663
664 {/* Dropdown: State */}
665 <DropdownState
666 title="State"
667 onChange={(value: string) => setStateValue(value)}
668 />
669
670 {/* Dropdown: State (Custom Styles) */}
671 <DropdownState
672 title="State"
673 onChange={(value: string) => setStateValue(value)}
674 customStyleContainer={{
675 containerLight: {
676 backgroundColor: '#000000',
677 borderColor: '#000000',
678 borderBottomWidth: 2,
679 },
680 containerDark: {
681 backgroundColor: '#000000',
682 borderColor: '#000000',
683 borderBottomWidth: 2,
684 },
685 }}
686 customStyleLabelText={{
687 labelTextLight: {
688 fontFamily: 'System',
689 fontSize: 22,
690 fontWeight: '800',
691 textTransform: 'lowercase',
692 color: 'red',
693 },
694 labelTextDark: {
695 fontFamily: 'System',
696 fontSize: 22,
697 fontWeight: '800',
698 textTransform: 'lowercase',
699 color: 'red',
700 },
701 }}
702 customStyleFieldText={{
703 fieldTextLight: {
704 fontFamily: 'System',
705 fontSize: 22,
706 fontWeight: '800',
707 textTransform: 'lowercase',
708 color: 'red',
709 },
710 fieldTextDark: {
711 fontFamily: 'System',
712 fontSize: 22,
713 fontWeight: '800',
714 textTransform: 'lowercase',
715 color: 'red',
716 },
717 }}
718 customStyleModalHeaderContainer={{
719 modalHeaderContainerLight: {
720 height: 55,
721 backgroundColor: '#000000',
722 borderColor: '#000000',
723 borderBottomWidth: 2,
724 },
725 modalHeaderContainerDark: {
726 height: 55,
727 backgroundColor: '#000000',
728 borderColor: '#000000',
729 borderBottomWidth: 2,
730 },
731 }}
732 customStyleCancelText={{
733 cancelTextLight: {
734 fontFamily: 'System',
735 fontSize: 22,
736 fontWeight: '800',
737 color: 'red',
738 },
739 cancelTextDark: {
740 fontFamily: 'System',
741 fontSize: 22,
742 fontWeight: '800',
743 color: 'red',
744 },
745 }}
746 customStyleDoneText={{
747 doneTextLight: {
748 color: 'red',
749 },
750 doneTextDark: {
751 color: 'red',
752 },
753 }}
754 customStyleModalContentContainer={{
755 modalContentContainerLight: {
756 height: 400,
757 backgroundColor: '#000000',
758 },
759 modalContentContainerDark: {
760 height: 400,
761 backgroundColor: '#000000',
762 },
763 }}
764 customStylePickerItemText={{
765 pickerItemTextLight: {
766 color: 'red',
767 },
768 pickerItemTextDark: {
769 color: 'red',
770 }
771 }}
772 />
773 </ScrollView>
774 </SafeAreaView>
775 );
776};
777
778// Exports
779export default App;
780```
781
782## Picker Types (iOS)
783### 1. Date
784<div align="center">
785 <img src="/screenshots/ios/iosDate.gif" width="40%" height="40%" />
786</div>
787
788### 2. Time
789<div align="center">
790 <img src="/screenshots/ios/iosTime.gif" width="40%" height="40%" />
791</div>
792
793### 3. Date/Time (iOS Only)
794<div align="center">
795 <img src="/screenshots/ios/iosDateTime.gif" width="40%" height="40%" />
796</div>
797
798### 4. List
799<div align="center">
800 <img src="/screenshots/ios/iosList.gif" width="40%" height="40%" />
801</div>
802
803
804### 5. State (50 United States)
805<div align="center">
806 <img src="/screenshots/ios/iosState.gif" width="40%" height="40%" />
807</div>
808
809## Picker Types (Android)
810### 1. Date (Mode: Spinner)
811<div align="center">
812 <img src="/screenshots/android/androidDateSpinner.gif" width="40%" height="40%" />
813</div>
814
815### 2. Date (Mode: Calendar)
816<div align="center">
817 <img src="/screenshots/android/androidDateCalendar.gif" width="40%" height="40%" />
818</div>
819
820### 3. Time (Mode: Spinner)
821<div align="center">
822 <img src="/screenshots/android/androidTimeSpinner.gif" width="40%" height="40%" />
823</div>
824
825### 4. Time (Mode: Clock)
826<div align="center">
827 <img src="/screenshots/android/androidTimeClock.gif" width="40%" height="40%" />
828</div>
829
830### 5. List
831<div align="center">
832 <img src="/screenshots/android/androidList.gif" width="40%" height="40%" />
833</div>
834
835
836### 6. State (50 United States)
837<div align="center">
838 <img src="/screenshots/android/androidState.gif" width="40%" height="40%" />
839</div>
840
841
842## Building & Publishing
843
844**Build**
845```
846npm run build
847```
848
849**Publish**
850```
851npm publish
852```
853
854
855## Changelog
856
857### [0.3.4] - 5/13/2021 - **BREAKING CHANGES ([See Updated Example Code](#example-code))**
858
859***Changed***
860
861- Changed `@react-native-community/datetimepicker` to `peerDependency`.
862- Changed `@react-native-picker/picker` to `peerDependency`.
863- Changed `react-native-modal` to `peerDependency`.
864- Updated `README` Getting Started for `iOS` pods.
865- Updated `README` Getting Started for `Android` dependencies.
866
867### [0.3.3] - 5/13/2021 - **BREAKING CHANGES ([See Updated Example Code](#example-code))**
868
869***Added***
870
871- Added `useState` to `App.tsx` and state management fro dropdowns and pickers.
872
873***Changed***
874
875- Changed `onChange(item: string)` to `onChange(item: value)`.
876- Changed `onChange(state: string)` to `onChange(item: value)`.
877
878### [0.3.2] - 5/13/2021 - **BREAKING CHANGES ([See Updated Example Code](#example-code))**
879
880***Changed***
881
882- Fixed `onChange`, 'onFromChange`, `onToChange` issues.
883
884### [0.3.1] - 5/13/2021 - **BREAKING CHANGES ([See Updated Example Code](#example-code))**
885
886***Changed***
887
888- Fixed `onChange`, 'onFromChange`, `onToChange` issues.
889
890### [0.3.0] - 5/12/2021 - **BREAKING CHANGES ([See Updated Example Code](#example-code))**
891
892***Added***
893
894- Added custom style prop `customStyleContainer`.
895- Added custom style prop `customStyleTitleText`.
896- Added custom style prop `customStyleLabelText`.
897- Added custom style prop `customStyleFieldText`.
898- Added custom style prop `customStyleModalHeaderContainer`.
899- Added custom style prop `customStyleCancelText`.
900- Added custom style prop `customStyleDoneText`.
901- Added custom style prop `customStyleModalContentContainer`.
902- Added custom style prop `customStylePickerItemText`.
903- Added custom style prop `customStyleDivider`.
904
905***Changed***
906
907- Updated to `iOS 14` styling.
908- Updated `react` dependency to `React 17`.
909- Updated `react-native` dependency to `React 0.64`.
910- Updated `react-native-modal` dependency.
911- Updated `@react-native-community/datetimepicker` dependency.
912- Updated `@react-native-community/picker` dependency with `@react-native-picker/picker`.
913- Changed `DatePicker` to `PickerDate`.
914- Changed `DateTimePicker` to `PickerDateTime`.
915- Changed `DateRangePicker` to `PickerDateRange`.
916- Changed `TimePicker` to `PickerTime`.
917- Changed `ListPicker` to `DropdownList`.
918- Changed `CookingMeasurementsPicker` to `DropdownMeasurements`.
919- Changed `NumberPicker` to `DropdownNumber`.
920- Changed `StatePicker` to `DropdownState`.
921
922***Removed***
923
924- Removed to `StatePickerSmall`.
925
926
927### [0.2.2] - 8/10/2020
928
929***Added***
930- Added Dark Mode support. Please upgrade to `React Native 0.62` for this to work.
931- Added `@react-native-community/picker` dependency (`Picker` is soon to be deprecated).
932
933### [0.2.1] - 8/10/2020
934
935***Changed***
936- Updated `react` dependency.
937- Updated `react-native` dependency.
938- Updated `react-native-modal` dependency.
939
940***Removed***
941- Removed `moment` dependency.
942
943### [0.2.0] - 4/21/2020
944
945***Changed***
946- Updated `@react-native-community/datetimepicker` to `2.3.2`.
947- Removed unnecessary `try/catch` blocks.
948
949### [0.1.64] - 3/13/2020
950
951***Changed***
952- Updated dependencies.
953
954### [0.1.63] - 3/13/2020
955
956***Changed***
957- Changed `CookingAmountPicker` to `CookingAmountPicker`.
958- Fixed `defaultValue` prop for `CookingAmountPicker` and `ListPicker`.
959
960### [0.1.62] - 3/13/2020
961
962***Added***
963
964- Added `defaultValue` prop for `CookingAmountPicker` and `ListPicker`.
965
966### [0.1.59] - 3/5/2020
967
968***Changed***
969
970- Fixed `selectItem` string/number type issue.
971
972### [0.1.59] - 3/5/2020
973
974***Added***
975
976- Added `NumberPicker`.
977- Added `CookingAmountPicker`.
978
979***Changed***
980
981- Increased `inputTitleContainer` `width`.
982
983### [0.1.58] - 2/7/2020
984
985***Changed***
986
987- Increased `fieldTextContainer` `marginBottom` to `12px`.
988
989### [0.1.57] - 2/7/2020
990
991***Changed***
992
993- Fixed `@react-native-community/datetimepicker` `^2.1.1` vs `2.1.1` issue.
994
995### [0.1.56] - 2/7/2020
996
997***Changed***
998
999- Updated `@react-native-community/datetimepicker` to `2.1.1`.
1000- Changing backdrop `opacity` to `30%`.
1001- Increased `TouchableOpacity` size for `DateRangePicker`.
1002- Increased `pickerHeaderContainer` `height` to `45px`.
1003- Fixed `README` `podspec` issue.
1004
1005***Removed***
1006
1007- Removed `react-native-vector-icons`.
1008
1009### [0.1.55] - 1/28/2020
1010
1011***Changed***
1012
1013- Fixed `onChange` issue.
1014- Done button is now `disabled` unless a new item or state is picked.
1015
1016### [0.1.54] - 1/28/2020
1017
1018***Added***
1019
1020- Adding typings for `onChange`.
1021- Passing initial date to parent component (`useEffect`) for Date, Time, Datetime, and Date Range Pickers.
1022
1023***Changed***
1024
1025- Date Range's `toDate` is now defaulted to "Select."
1026
1027### [0.1.53] - 1/27/2020
1028
1029***Changed***
1030
1031- Fixed `Picker` Done button issue. Done button is now `disabled` unless new date is picked.
1032- Increased `Picker` container size for `iOS`.
1033
1034***Removed***
1035
1036- Removed `async/await` due to that it was not the root cause of the issue.
1037
1038### [0.1.47] - 1/26/2020
1039
1040***Changed***
1041
1042- Fixed `onChange` TypeScript typings.
1043
1044### [0.1.46] - 1/26/2020
1045
1046***Changed***
1047
1048- Fixed React Hook state + `onValueChange` issue due to having the same name of "state."
1049
1050
1051### [0.1.45] - 1/26/2020
1052
1053***Changed***
1054
1055- Added `Keyboard.dismiss()` to `toggleModal()`.
1056
1057### [0.1.44] - 1/25/2020
1058
1059***Added***
1060
1061- Added `Keyboard.dismiss()` to work better with form fields.
1062
1063### [0.1.43] - 1/24/2020
1064
1065***Changed***
1066
1067- Fixed `README` Formatting.
1068
1069### [0.1.42] - 1/24/2020
1070
1071***Added***
1072
1073- Added cancel button to `iOS` `ListPicker`.
1074- Added test data items for `ListPicker` on `README`.
1075- Added `props` to `App.tsx` for testing.
1076- Title `props` can be added to any `Picker`. Default titles are shown if no `prop` is added.
1077
1078***Changed***
1079
1080- Reformatted `App.tsx` for when testing.
1081- Fixed `onChange` TypeScript Typings.
1082- Updated `README` screenshot GIFs.
1083
1084### [0.1.41] - 1/23/2020
1085
1086***Changed***
1087
1088- Updated `README` for NPM package.
1089
1090### [0.1.40] - 1/23/2020
1091
1092***Added***
1093
1094- Added `podfile` installation instructions to `README`.
1095- Added cancel button for `iOS` modals.
1096
1097***Changed***
1098
1099- Fixed `if/else` toggle issue.
1100- Fixed `undefined` date issue.
1101- Fixed `onChange` issue.
1102- Changed if statements for `Platform` to `if/else`, so only one would ever run.