react-native-timer-picker 2.4.0 → 2.6.0

package/README.md

@@ -13,6 +13,7 @@ Works with Expo and bare React Native apps ✅
 
 Includes iOS-style haptic and audio feedback 🍏
 
+- [React Native Timer Picker ⏰🕰️⏳](#react-native-timer-picker-️)
   - [Demos 📱](#demos-)
   - [Installation 🚀](#installation-)
     - [Peer Dependencies 👶](#peer-dependencies-)
@@ -289,6 +290,9 @@ return (
             setIsVisible={setShowPicker}
             styles={{
                 theme: "light",
+                pickerColumnWidth: {
+                    hours: 90,
+                },
             }}
             use12HourPicker
             visible={showPicker}
@@ -426,6 +430,8 @@ return (
             setIsVisible={setShowPicker}
             styles={{
                 theme: "dark",
+                pickerLabelGap: 10,
+                text: { fontSize: 18 },
             }}
             visible={showPicker}
         />
@@ -464,14 +470,13 @@ return (
                 pickerItem: {
                     fontSize: 34,
                 },
-                pickerLabelContainer: {
-                    marginTop: -4,
-                    right: 0,
-                    left: undefined,
-                },
                 pickerLabel: {
                     fontSize: 32,
                 },
+                pickerLabelContainer: {
+                    marginTop: -4,
+                },
+                pickerLabelGap: 23,
                 pickerContainer: {
                     paddingHorizontal: 50,
                 },
@@ -502,7 +507,7 @@ return (
             secondLabel="sec"
             styles={{
                 theme: "light",
-                labelOffsetPercentage: 0,
+                pickerLabelGap: 8,
                 pickerItem: {
                     fontSize: 34,
                 },
@@ -580,16 +585,20 @@ return (
 |            styles             | Custom styles for the timer picker                                                                                                                                                                                       |                                                                           [CustomTimerPickerStyles](#custom-styles-)                                                                            |               -                |  false   |
 |       decelerationRate        | Set how quickly the picker decelerates after the user lifts their finger                                                                                                                                                 |                                                                                   'fast', 'normal', or Number                                                                                   |              0.88              |  false   |
 
-#### Custom Styles 👗 
+#### Custom Styles 👗
 
-The component should look good straight out of the box, but you can use these styles to make it fit in with your App's theme:
+The component should look good straight out of the box, but you can use these easy styles to make it fit in with your App's theme:
 
-|               Style Prop               | Description                                                          |                   Type                   |
-| :------------------------------------: | :------------------------------------------------------------------- | :--------------------------------------: |
-|                 theme                  | Theme of the component                                               |            "light" \| "dark"             |
-|            backgroundColor             | Main background color                                                |                  string                  |
-|                  text                  | Base text style                                                      |                TextStyle                 |
-|       labelOffsetPercentage            | Percentage offset for horizonal label positioning relative to the picker                        |                  number                  |
+|                Style Prop                 | Description                                                                                                                                              |        Type        |
+| :---------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------: |
+|                   theme                   | Theme of the component                                                                                                                                   | "light" \| "dark"  |
+|              backgroundColor              | Main background color                                                                                                                                    |       string       |
+|                   text                    | Base text style                                                                                                                                          |     TextStyle      |
+|              pickerLabelGap               | Pixel gap between the label and the picker number column. Can be a single number or a per-column object (e.g. `{ hours: 10, minutes: 8 }`). Default: `6` | `PerColumnValue`\* |
+|             pickerColumnWidth             | Width of individual picker columns in pixels. Can be a single number or a per-column object. Overrides default flex-based sizing when set                 | `PerColumnValue`\* |
+| labelOffsetPercentage **(DEPRECATED)**    | Percentage offset for horizontal label positioning relative to the picker (use `pickerLabelGap` instead)                                                 |       number       |
+
+**\*`PerColumnValue` type:** `number | { days?: number, hours?: number, minutes?: number, seconds?: number }` — pass a single number for all columns, or an object to set values per column. Omitted columns use the default.
 
 For deeper style customization, you can supply the following custom styles to adjust the component in any way. These are applied on top of the default styling so take a look at those [styles](src/components/TimerPicker/styles.ts) if something isn't adjusting in the way you'd expect.
 
@@ -601,8 +610,9 @@ For deeper style customization, you can supply the following custom styles to ad
 |          pickerAmPmContainer           | Style for the picker's labels                                        |                ViewStyle                 |
 |            pickerAmPmLabel             | Style for the picker's labels                                        |                TextStyle                 |
 |          pickerItemContainer           | Container for each number in the picker                              |     ViewStyle & { height?: number }      |
-|               pickerItem               | Style for each individual picker number                              |                TextStyle                 |
+|               pickerItem               | Style for each number                                                |                TextStyle                 |
 |           disabledPickerItem           | Style for any numbers outside any set limits                         |                TextStyle                 |
+|           selectedPickerItem           | Style for the currently selected number                              |                TextStyle                 |
 |        disabledPickerContainer         | Style for disabled pickers                                           |                ViewStyle                 |
 |         pickerGradientOverlay          | Style for the gradient overlay (fade out)                            |                ViewStyle                 |
 |         durationScrollFlatList         | Style for the Flatlist in each picker                                |                ViewStyle                 |
@@ -672,16 +682,16 @@ The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️)
 
 The following custom styles can be supplied to re-style the component in any way. You can also supply all of the styles specified in [CustomTimerPickerStyles](#custom-styles-). These are applied on top of the default styling so take a look at those [styles](src/components/TimerPickerModal/styles.ts) if something isn't adjusting in the way you'd expect.
 
-|    Style Prop    | Description                                |   Type    |
-| :--------------: | :----------------------------------------- | :-------: |
-|    container     | Style for the modal container              | ViewStyle |
-| contentContainer | Style for the modal content's container    | ViewStyle |
-| buttonContainer  | Style for the container for the buttons    | ViewStyle |
-|      button      | General style for both buttons             | TextStyle |
-|   cancelButton   | Style for the cancel button                | TextStyle |
-|  confirmButton   | Style for the confirm button               | TextStyle |
-|    modalTitle    | Style for the title of the modal           | TextStyle |
-|    ...           | Supply any of [TimerPicker's custom styles]((#custom-styles-))  | -         |
+|    Style Prop    | Description                                                      |   Type    |
+| :--------------: | :--------------------------------------------------------------- | :-------: |
+|    container     | Style for the modal container                                    | ViewStyle |
+| contentContainer | Style for the modal content's container                          | ViewStyle |
+| buttonContainer  | Style for the container for the buttons                          | ViewStyle |
+|      button      | General style for both buttons                                   | TextStyle |
+|   cancelButton   | Style for the cancel button                                      | TextStyle |
+|  confirmButton   | Style for the confirm button                                     | TextStyle |
+|    modalTitle    | Style for the title of the modal                                 | TextStyle |
+|       ...        | Supply any of [TimerPicker's custom styles](<(#custom-styles-)>) |     -     |
 
 <br>
 

package/package.json

@@ -1,130 +1,147 @@
 {
-    "name": "react-native-timer-picker",
-    "description": "A simple, flexible, performant duration picker for React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳\n\nIncludes iOS-style haptic and audio feedback 🍏",
-    "author": {
-        "name": "Tim Roberts",
-        "url": "https://github.com/troberts-28"
-    },
-    "license": "MIT",
-    "version": "2.4.0",
-    "main": "dist/commonjs/index.js",
-    "module": "dist/module/index.js",
-    "types": "dist/typescript/index.d.ts",
-    "typings": "dist/typescript/index.d.ts",
-    "packageManager": "yarn@4.11.0",
-    "workspaces": {
-        "packages": [
-            "examples/*"
-        ]
-    },
-    "scripts": {
-        "setup": "yarn install",
-        "start": " yarn workspace example-expo start",
-        "start-bare:android": "yarn workspace example-bare android && yarn workspace example-bare start",
-        "start-bare:ios": "yarn workspace example-bare ios && yarn workspace example-bare start",
-        "test": "jest --forceExit --silent",
-        "build": "bob build",
-        "clean": "rm yarn.lock && rm -rf ./node_modules && yarn install",
-        "lint": "eslint --ext .ts,.tsx .",
-        "lint:fix": "eslint --ext .ts,.tsx . --fix",
-        "ts": "tsc --noEmit",
-        "prepare": "yarn build"
-    },
-    "homepage": "https://github.com/troberts-28/react-native-timer-picker",
-    "bugs": {
-        "url": "https://github.com/troberts-28/react-native-timer-picker/issues"
-    },
-    "repository": {
-        "name": "GitHub",
-        "type": "git",
-        "url": "git+https://github.com/troberts-28/react-native-timer-picker.git"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "files": [
-        "dist",
-        "package.json",
-        "README.md",
-        "LICENSE"
-    ],
-    "keywords": [
-        "react",
-        "react-native",
-        "expo",
-        "duration",
-        "picker",
-        "time",
-        "timer",
-        "alarm",
-        "modal",
-        "durationpicker",
-        "duration-picker",
-        "duration-picker-modal",
-        "react-native-duration-picker",
-        "react-native-duration-picker-modal",
-        "timepicker",
-        "time-picker",
-        "alarmpicker",
-        "alarm-picker",
-        "alarm-picker-modal",
-        "react-native-alarm-picker",
-        "timerpicker",
-        "timer-picker",
-        "timer-picker-modal",
-        "react-native-duration-picker-modal",
-        "expo-duration-picker",
-        "expo-time-picker",
-        "expo-timepicker",
-        "expo-durationpicker",
-        "expo-duration-picker",
-        "expo-time-picker",
-        "expo-timepicker",
-        "expo-durationpicker"
+  "name": "react-native-timer-picker",
+  "description": "A simple, flexible, performant duration picker for React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳\n\nIncludes iOS-style haptic and audio feedback 🍏",
+  "author": {
+    "name": "Tim Roberts",
+    "url": "https://github.com/troberts-28"
+  },
+  "license": "MIT",
+  "version": "2.6.0",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/module/index.js",
+  "types": "dist/typescript/index.d.ts",
+  "typings": "dist/typescript/index.d.ts",
+  "packageManager": "yarn@4.12.0",
+  "workspaces": {
+    "packages": [
+      "examples/*"
+    ]
+  },
+  "scripts": {
+    "setup": "yarn install",
+    "start": " yarn workspace example-expo start",
+    "start-bare:android": "yarn workspace example-bare android && yarn workspace example-bare start",
+    "start-bare:ios": "yarn workspace example-bare ios && yarn workspace example-bare start",
+    "test": "jest --forceExit --silent",
+    "build": "bob build",
+    "ts": "tsc --noEmit && tsc --noEmit -p examples/example-expo && tsc --noEmit -p examples/example-bare",
+    "clean": "rm yarn.lock && rm -rf ./node_modules && yarn install",
+    "lint": "eslint src/ examples/",
+    "lint:fix": "eslint src/ examples/ --fix",
+    "format": "prettier --check ./src ./examples",
+    "format:fix": "prettier --write ./src ./examples",
+    "prepare": "simple-git-hooks"
+  },
+  "homepage": "https://github.com/troberts-28/react-native-timer-picker",
+  "bugs": {
+    "url": "https://github.com/troberts-28/react-native-timer-picker/issues"
+  },
+  "repository": {
+    "name": "GitHub",
+    "type": "git",
+    "url": "git+https://github.com/troberts-28/react-native-timer-picker.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "expo",
+    "duration",
+    "picker",
+    "time",
+    "timer",
+    "alarm",
+    "modal",
+    "durationpicker",
+    "duration-picker",
+    "duration-picker-modal",
+    "react-native-duration-picker",
+    "react-native-duration-picker-modal",
+    "timepicker",
+    "time-picker",
+    "alarmpicker",
+    "alarm-picker",
+    "alarm-picker-modal",
+    "react-native-alarm-picker",
+    "timerpicker",
+    "timer-picker",
+    "timer-picker-modal",
+    "react-native-duration-picker-modal",
+    "expo-duration-picker",
+    "expo-time-picker",
+    "expo-timepicker",
+    "expo-durationpicker",
+    "expo-duration-picker",
+    "expo-time-picker",
+    "expo-timepicker",
+    "expo-durationpicker"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.38.0",
+    "@testing-library/react-native": "^12.0.0",
+    "@types/jest": "^29.0.0",
+    "@types/react": ">=18.2.0",
+    "@types/react-native": "0.72.0",
+    "@types/react-test-renderer": ">=18.2.0",
+    "babel-jest": "^29.6.2",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-perfectionist": "^4.13.0",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "jest": "^29.0.0",
+    "lint-staged": "^16.2.7",
+    "metro-react-native-babel-preset": "^0.71.1",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-native": "0.72.0",
+    "react-native-builder-bob": "^0.18.3",
+    "react-test-renderer": "18.2.0",
+    "simple-git-hooks": "^2.13.1",
+    "typescript": "~5.8.0",
+    "typescript-eslint": "^8.33.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
     ],
-    "engines": {
-        "node": ">=16.0.0"
-    },
-    "peerDependencies": {
-        "react": ">=18.2.0",
-        "react-native": ">=0.72.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.20.0",
-        "@testing-library/react-native": "^12.0.0",
-        "@types/jest": "^29.0.0",
-        "@types/react": ">=18.2.0",
-        "@types/react-native": "0.72.0",
-        "@types/react-test-renderer": ">=18.2.0",
-        "@typescript-eslint/eslint-plugin": "^5.49.0",
-        "@typescript-eslint/parser": "^5.49.0",
-        "babel-jest": "^29.6.2",
-        "eslint": "^8.44.0",
-        "eslint-plugin-import": "^2.29.0",
-        "eslint-plugin-react": "^7.33.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-sort-destructure-keys": "^1.5.0",
-        "eslint-plugin-typescript-sort-keys": "^2.3.0",
-        "jest": "^29.0.0",
-        "metro-react-native-babel-preset": "^0.71.1",
-        "prettier": "2.8.8",
-        "react": "18.2.0",
-        "react-native": "0.72.0",
-        "react-native-builder-bob": "^0.18.3",
-        "react-test-renderer": "18.2.0",
-        "typescript": "^4.7.4"
-    },
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "dist",
-        "targets": [
-            "commonjs",
-            "module",
-            "typescript"
-        ]
-    },
-    "eslintIgnore": [
-        "node_modules/",
-        "dist/"
+    "*.{json}": [
+      "prettier --write"
     ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ]
 }