react-native-timer-picker 1.5.2 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -48
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -11,29 +11,32 @@ Great for timers, alarms and duration inputs ⏰🕰️⏳
|
|
|
11
11
|
|
|
12
12
|
Works with Expo and bare React Native apps.
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
14
|
+
- [Demos 📱](#demos-)
|
|
15
|
+
- [Peer Dependencies 👶](#peer-dependencies-)
|
|
16
|
+
- [Installation 🚀](#installation-)
|
|
17
|
+
- [Examples 😎](#examples-)
|
|
18
|
+
- [Timer Picker Modal (Dark Mode) 🌚](#timer-picker-modal-dark-mode-)
|
|
19
|
+
- [Timer Picker Modal (Light Mode) 🌞](#timer-picker-modal-light-mode-)
|
|
20
|
+
- [Timer Picker with Customisation (Dark Mode) 🌒](#timer-picker-with-customisation-dark-mode-)
|
|
21
|
+
- [Timer Picker with Customisation (Light Mode) 🌔](#timer-picker-with-customisation-light-mode-)
|
|
22
|
+
- [Props 💅](#props-)
|
|
23
|
+
- [TimerPicker ⏲️](#timerpicker-️)
|
|
24
|
+
- [Custom Styles 👗](#custom-styles-)
|
|
25
|
+
- [TimerPickerModal ⏰](#timerpickermodal-)
|
|
26
|
+
- [Custom Styles 👕](#custom-styles--1)
|
|
27
|
+
- [Methods 🔄](#methods-)
|
|
28
|
+
- [TimerPicker](#timerpicker)
|
|
29
|
+
- [TimerPickerModal](#timerpickermodal)
|
|
30
|
+
- [Contributing 🧑🤝🧑](#contributing-)
|
|
31
|
+
- [Dev Setup](#dev-setup)
|
|
32
|
+
- [GitHub Guidelines](#github-guidelines)
|
|
33
|
+
- [License 📝](#license-)
|
|
31
34
|
|
|
32
35
|
<br>
|
|
33
36
|
|
|
34
37
|
## Demos 📱
|
|
35
38
|
|
|
36
|
-
**Try it out for yourself on [Expo Snack](https://snack.expo.dev/@nuumi/react-native-timer-picker-demo)!** Make sure to run it on
|
|
39
|
+
**Try it out for yourself on [Expo Snack](https://snack.expo.dev/@nuumi/react-native-timer-picker-demo)!** Make sure to run it on a mobile to see it working properly.
|
|
37
40
|
|
|
38
41
|
<p>
|
|
39
42
|
<img src="demos/example1.gif" width="250" height="550" style="margin-right:50px"/>
|
|
@@ -316,34 +319,34 @@ return (
|
|
|
316
319
|
|
|
317
320
|
### TimerPicker ⏲️
|
|
318
321
|
|
|
319
|
-
| Prop | Description
|
|
320
|
-
| :------------------------------: |
|
|
321
|
-
| onDurationChange | Callback when the duration changes
|
|
322
|
-
| initialHours | Initial value for hours
|
|
323
|
-
| initialMinutes | Initial value for minutes
|
|
324
|
-
| initialSeconds | Initial value for seconds
|
|
325
|
-
| hideHours | Hide the hours picker
|
|
326
|
-
| hideMinutes | Hide the minutes picker
|
|
327
|
-
| hideSeconds | Hide the seconds picker
|
|
328
|
-
| hourLimit | Limit on the hours it is possible to select
|
|
329
|
-
| minuteLimit | Limit on the minutes it is possible to select
|
|
330
|
-
| secondLimit | Limit on the seconds it is possible to select
|
|
331
|
-
| hourLabel | Label for the hours picker
|
|
332
|
-
| minuteLabel | Label for the minutes picker
|
|
333
|
-
| secondLabel | Label for the seconds picker
|
|
334
|
-
| padWithNItems | Number of items to pad the picker with on either side
|
|
335
|
-
|
|
|
336
|
-
|
|
|
337
|
-
|
|
|
338
|
-
|
|
|
339
|
-
|
|
|
340
|
-
| disableInfiniteScroll | Disable the infinite scroll feature
|
|
341
|
-
| LinearGradient | Linear Gradient Component
|
|
342
|
-
| pickerContainerProps | Props for the picker container
|
|
343
|
-
| pickerGradientOverlayProps | Props for both gradient overlays
|
|
344
|
-
| topPickerGradientOverlayProps | Props for the top gradient overlay
|
|
345
|
-
| bottomPickerGradientOverlayProps | Props for the bottom gradient overlay
|
|
346
|
-
| styles | Custom styles for the timer picker
|
|
322
|
+
| Prop | Description | Type | Default | Required |
|
|
323
|
+
| :------------------------------: | :------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | :------: |
|
|
324
|
+
| onDurationChange | Callback when the duration changes | `(duration: { hours: number, minutes: number, seconds: number }) => void` | - | false |
|
|
325
|
+
| initialHours | Initial value for hours | Number | - | false |
|
|
326
|
+
| initialMinutes | Initial value for minutes | Number | - | false |
|
|
327
|
+
| initialSeconds | Initial value for seconds | Number | - | false |
|
|
328
|
+
| hideHours | Hide the hours picker | Boolean | false | false |
|
|
329
|
+
| hideMinutes | Hide the minutes picker | Boolean | false | false |
|
|
330
|
+
| hideSeconds | Hide the seconds picker | Boolean | false | false |
|
|
331
|
+
| hourLimit | Limit on the hours it is possible to select | { max?: Number, min?: Number } | - | false |
|
|
332
|
+
| minuteLimit | Limit on the minutes it is possible to select | { max?: Number, min?: Number } | - | false |
|
|
333
|
+
| secondLimit | Limit on the seconds it is possible to select | { max?: Number, min?: Number } | - | false |
|
|
334
|
+
| hourLabel | Label for the hours picker | String \| React.ReactElement | h | false |
|
|
335
|
+
| minuteLabel | Label for the minutes picker | String \| React.ReactElement | m | false |
|
|
336
|
+
| secondLabel | Label for the seconds picker | String \| React.ReactElement | s | false |
|
|
337
|
+
| padWithNItems | Number of items to pad the picker with on either side | Number | 1 | false |
|
|
338
|
+
| aggressivelyGetLatestDuration | Set to True to ask DurationScroll to aggressively update the latestDuration ref | Boolean | false | false |
|
|
339
|
+
| allowFontScaling | Allow font in the picker to scale with accessibility settings | Boolean | false | false |
|
|
340
|
+
| use12HourPicker | Switch the hour picker to 12-hour format with an AM / PM label | Boolean | false | false |
|
|
341
|
+
| amLabel | Set the AM label if using the 12-hour picker | String | am | false |
|
|
342
|
+
| pmLabel | Set the PM label if using the 12-hour picker | String | pm | false |
|
|
343
|
+
| disableInfiniteScroll | Disable the infinite scroll feature | Boolean | false | false |
|
|
344
|
+
| LinearGradient | Linear Gradient Component | [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient).LinearGradient or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).default | - | false |
|
|
345
|
+
| pickerContainerProps | Props for the picker container | `React.ComponentProps<typeof View>` | - | false |
|
|
346
|
+
| pickerGradientOverlayProps | Props for both gradient overlays | `Partial<LinearGradientProps>` | - | false |
|
|
347
|
+
| topPickerGradientOverlayProps | Props for the top gradient overlay | `Partial<LinearGradientProps>` | - | false |
|
|
348
|
+
| bottomPickerGradientOverlayProps | Props for the bottom gradient overlay | `Partial<LinearGradientProps>` | - | false |
|
|
349
|
+
| styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles-) | - | false |
|
|
347
350
|
|
|
348
351
|
#### Custom Styles 👗
|
|
349
352
|
|
|
@@ -357,8 +360,8 @@ The following custom styles can be supplied to re-style the component in any way
|
|
|
357
360
|
| pickerContainer | Main container for the picker | ViewStyle |
|
|
358
361
|
| pickerLabelContainer | Container for the picker's labels | ViewStyle |
|
|
359
362
|
| pickerLabel | Style for the picker's labels | TextStyle |
|
|
360
|
-
|
|
|
361
|
-
|
|
|
363
|
+
| pickerAmPmContainer | Style for the picker's labels | ViewStyle |
|
|
364
|
+
| pickerAmPmLabel | Style for the picker's labels | TextStyle |
|
|
362
365
|
| pickerItemContainer | Container for each number in the picker | ViewStyle |
|
|
363
366
|
| pickerItem | Style for each individual picker number | TextStyle |
|
|
364
367
|
| disabledPickerItem | Style for any numbers outside any set limits | TextStyle |
|
|
@@ -446,6 +449,29 @@ An identical ref is also exposed for the TimerPickerModal component.
|
|
|
446
449
|
|
|
447
450
|
<br>
|
|
448
451
|
|
|
452
|
+
## Contributing 🧑🤝🧑
|
|
453
|
+
|
|
454
|
+
Contributions to this project are more than welcome.
|
|
455
|
+
|
|
456
|
+
### Dev Setup
|
|
457
|
+
|
|
458
|
+
To get this project running locally:
|
|
459
|
+
|
|
460
|
+
1. Clone the Git repo.
|
|
461
|
+
2. Run `yarn setup` from the project root (this installs the dev dependencies and the example's additional dependencies)
|
|
462
|
+
3. Run `yarn start` to start the example in Expo Go.
|
|
463
|
+
4. Start adding cool stuff! Your changes should be immediately reflected in the Expo Go app.
|
|
464
|
+
|
|
465
|
+
### GitHub Guidelines
|
|
466
|
+
|
|
467
|
+
There are two permenant branches: `main` and `develop`. You should never work directly on either of these branches.
|
|
468
|
+
|
|
469
|
+
1. Create a new branch off `develop` for your work using the pattern `feature/{DESCRIPTION}`.
|
|
470
|
+
2. When you think your work is ready for review, submit a PR from your branch back to `develop`.
|
|
471
|
+
3. Once the PR is resolved, your work will be merged into `develop`, and will be included in the next major/minor release.
|
|
472
|
+
|
|
473
|
+
<br>
|
|
474
|
+
|
|
449
475
|
## License 📝
|
|
450
476
|
|
|
451
477
|
This project is licensed under the [MIT License](LICENSE).
|
package/package.json
CHANGED
|
@@ -6,14 +6,15 @@
|
|
|
6
6
|
"url": "https://github.com/troberts-28"
|
|
7
7
|
},
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"version": "1.5.
|
|
9
|
+
"version": "1.5.3",
|
|
10
10
|
"main": "dist/commonjs/index.js",
|
|
11
11
|
"types": "dist/typescript/src/index.d.ts",
|
|
12
12
|
"scripts": {
|
|
13
|
+
"setup": "yarn && cd example && yarn",
|
|
14
|
+
"start": " cd example && yarn start",
|
|
13
15
|
"test": "jest --forceExit --silent",
|
|
14
16
|
"build": "bob build",
|
|
15
17
|
"clean": "rm yarn.lock && rm -rf ./node_modules && yarn install",
|
|
16
|
-
"start": "cp -Rf src example && cd example && npx expo install && npx expo start",
|
|
17
18
|
"lint": "eslint --ext .ts,.tsx .",
|
|
18
19
|
"lint:fix": "eslint --ext .ts,.tsx . --fix",
|
|
19
20
|
"prepare": "yarn build"
|