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 | ```
|
37 | npm i react-native-ultimate-modal-picker
|
38 | ```
|
39 |
|
40 | **2. Add Pod (For iOS)**
|
41 |
|
42 | Add the following line to ios/podfile:
|
43 | ```javascript
|
44 | # Pods for testing
|
45 | pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'
|
46 | ```
|
47 |
|
48 | **3. Install Pods (For iOS)**
|
49 | ```
|
50 | cd ios
|
51 | pod install
|
52 | ```
|
53 |
|
54 | **4. Add Dependencies (For Android)**
|
55 |
|
56 | Add the following lines to android/settings.gradle:
|
57 | ```javascript
|
58 | include ':@react-native-community_datetimepicker'
|
59 | project(':@react-native-community_datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')
|
60 | ```
|
61 |
|
62 | Add the following line to android/app/build.gradle:
|
63 | ```javascript
|
64 | dependencies {
|
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
|
79 | react-native run-ios
|
80 | ```
|
81 |
|
82 |
|
83 | ## Example Code
|
84 | ```typescript
|
85 | // Imports: Dependencies
|
86 | import React, { useState } from 'react';
|
87 | import { SafeAreaView, ScrollView } from 'react-native';
|
88 |
|
89 | // Imports: Components
|
90 | import {
|
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
|
104 | import { PickerValue } from './src/types/types';
|
105 |
|
106 | // React Native App
|
107 | const 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
|
779 | export 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 | ```
|
846 | npm run build
|
847 | ```
|
848 |
|
849 | **Publish**
|
850 | ```
|
851 | npm 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.
|