react-native-timer-picker 2.5.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,
                 },
@@ -582,14 +587,18 @@ return (
 
 #### 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      |
+|              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       |
 
-|      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       |
+**\*`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.
 

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.5.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/"
+  ]
 }