{"_id":"@crabas0npm/aspernatur-exercitationem-qui","name":"@crabas0npm/aspernatur-exercitationem-qui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@crabas0npm/aspernatur-exercitationem-qui","version":"1.0.0","description":"[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)]() ![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=for-the-badge&colorB=191A17) [![Version](https://img.shields.io/n","main":"index.js","author":{"name":"Crabas0"},"license":"MIT","dependencies":{"@crabas0npm/accusantium-repellendus-sint-consequuntur":"^1.0.0","@crabas0npm/alias-consequuntur-hic-enim":"^1.0.0","@crabas0npm/aliquid-vitae-magnam-perspiciatis":"^1.0.0","@crabas0npm/aut-cupiditate-quam-dicta":"^1.0.0","@crabas0npm/blanditiis-est-molestias-a":"^1.0.0","@crabas0npm/consectetur-impedit-exercitationem-error":"^1.0.0","@crabas0npm/corporis-rerum-reprehenderit-voluptates":"^1.0.0","@crabas0npm/delectus-dolorem-consectetur-corrupti":"^1.0.0","@crabas0npm/ea-nisi-earum-mollitia":"^1.0.0","@crabas0npm/et-perspiciatis-eius-modi":"^1.0.0","@crabas0npm/expedita-magnam-quia-perferendis":"^1.0.0","@crabas0npm/expedita-optio-recusandae-nesciunt":"^1.0.0","@crabas0npm/expedita-voluptas-corrupti-ullam":"^1.0.0","@crabas0npm/facilis-doloribus-provident-optio":"^1.0.0","@crabas0npm/fugiat-necessitatibus-recusandae-quo":"^1.0.0","@crabas0npm/maxime-sequi-nam-facere":"^1.0.0","@crabas0npm/minus-iure-ipsum-temporibus":"^1.0.0","@crabas0npm/nulla-minima-vero-facere":"^1.0.0","@crabas0npm/odio-exercitationem-ducimus-provident":"^1.0.0","@crabas0npm/officia-nostrum-at-hic":"^1.0.0","@crabas0npm/officiis-labore-tempora-sint":"^1.0.0","@crabas0npm/omnis-neque-asperiores-rerum":"^1.0.0","@crabas0npm/optio-sequi-optio-quidem":"^1.0.0","@crabas0npm/porro-voluptatem-consectetur-beatae":"^1.0.0","@crabas0npm/possimus-sit-repellat-perspiciatis":"^1.0.0","@crabas0npm/quo-dolorem-molestiae-porro":"^1.0.0","@crabas0npm/ratione-nisi-deleniti-provident":"^1.0.0","@crabas0npm/ratione-voluptatibus-quo-sed":"^1.0.0","@crabas0npm/repellendus-illum-cum-fugit":"^1.0.0","@crabas0npm/unde-quos-asperiores-modi":"^1.0.0","@diahkomalasarinpm/praesentium-sint-dolorem":"^1.0.0","@f1stnpm2/adipisci-adipisci-praesentium":"^1.0.0","@wemnyelezxnpm/delectus-repellendus-neque":"^1.0.0"},"keywords":["from","Object.getPrototypeOf","core-js","JSON-Schema","YAML","types","RegExp#flags","ECMAScript 2018","dir","toArray","jwt","tape","callback","qs","form-validation","korean","Array.prototype.findLast","jsonpath","RegExp.prototype.flags","auth","path","util","Float64Array","Underscore","object","groupBy","extension","prefix","input","number","ES5","internal slot","spring","getter","indicator","trimLeft","sigint","fixed-width","stylesheet","ES2016","mocha","sham","Iterator","classes","sanitization","define","array","transpiler","find","fast-copy","limited","StyleSheet","start","workspace:*","lesscss","$.extend","parser","Array.prototype.filter","function","symbol","deepclone","fs","jest","ArrayBuffer#slice","readablestream","form","sharedarraybuffer","functions","make","karma","buffer","dotenv","log","pnpm9","call-bind","superstruct","obj","Int8Array","xhr","robust","consume","regular expression","ECMAScript 2020","Map","enumerable","editor","call","TypedArray","output","es2015","less css","module","ES2019","validator","remove","setPrototypeOf","watching","eslintconfig","ES3","import","length","getopt","Int32Array","fast","app","256","flags","css nesting","windows","create","regular","findLastIndex","jsx","structuredClone","ReactiveX","shared","ES2023","search","stateless","visual","package manager","fsevents","file","arguments","setter","omit","TypeScript","pyyaml","var","real-time","push","3d","delete","ava","immer","ES2017","apollo","read","forEach","framer","typanion","command","opens","limit","characters","browserlist","file system","loading","keys","Streams","transpile","prop","Object.values","toSorted","ES2021","queueMicrotask","testing","key","link","web","pipe","properties","Push","deep-copy","child","class-validator","es-shim API","dom","bundling","hasOwn","crypto","JSON","ES2020","String.prototype.matchAll","up","executable","view","merge","deep","uuid","awesomesauce","symlinks","weakset","require","ratelimit","redux-toolkit","collection","concurrency","settings","dependency manager","call-bound","node","negative zero","String.prototype.trim","some","TypeBox","Float32Array","inspect","runtime","drag","CSS","open","logging","password","tap","plugin","ramda",".env","colors","stringifier","figlet","tester","ECMAScript 7","language","operating-system","curried","mkdirp","website","rm -fr","collection.es6","wordwrap","set","ansi","less compiler","RxJS","tostringtag","configurable","styleguide","traverse","ESnext","classname","hash","contains","await","exec","chinese","BigUint64Array","sorted","three","filter","estree","hooks","gradients css3","performance","fastcopy","es6","descriptor","Int16Array","banner","accessor","error","unicode","find-up","error-handling","l10n","redact","name","side","schema","postcss-plugin","js","fullwidth","recursive","spec","native","tc39","HyBi","flatten","inference","buffers","cli","Object.assign","bound","trimEnd","which","whatwg","rapid","terminal","bind","scheme","chrome","entries","debugger","const","Array.prototype.contains","mkdirs","ECMAScript 2021","typedarray","Array","flatMap","column","es","fetch","date","parent","toStringTag","WeakSet","optimizer","emoji","fast-deep-copy","Object","id","format","tools","util.inspect","postcss","regexp","queue","npm","Array.prototype.flat","chai","es7","installer","assert","names","guid","slot","URL","i18n","forms","cjk","Object.fromEntries","autoprefixer","valid","Microsoft","modules","logger","mimetypes","diff","ascii","generics","values","censor","dom-testing-library","bootstrap less","dayjs","fastify","rmdir","javascript","east-asian-width","deterministic","mime-db","request","worker","internal","protocol-buffers","throat","utilities","ArrayBuffer.prototype.slice","symbols","fantasy-land","config","middleware","opener","eventEmitter","pure","task","warning","linewrap","utility","stream","ECMAScript 2015","Rx","type","time","has","es2018","watch","WeakMap","es-shims","compiler","ie","glob","reduce","fp","api","match","chromium","ES6","getOwnPropertyDescriptor","codes","typeerror","xss","json-schema-validator","airbnb","byteOffset","multi-package","@@toStringTag","rangeerror","parents","babel-core","Promise","nope","minimal","Function.prototype.name","sequence","eslint","Array.prototype.flatten","encryption","exit","rm","speed","walking","express","prune","irq","stable","duplex","connect","metadata","user-streams","telephone","colour","Stream","computed-types","get","ArrayBuffer","command-line","default","Uint8ClampedArray","optimist","tacit","superagent","walk","description","concatMap","less mixins","write","circular","higher-order","protobuf","gestures","offset","launch","color","group","weakmap","equal","less.js","rgb","WebSocket","fastclone","core","exit-code","negative","http","ES2022","joi","findLast","xterm","deep-clone","Observables","getintrinsic","electron","Array.prototype.flatMap","events","drop","throttle","environment","Reflect.getPrototypeOf","watcher","toobject","zero","exe","args","make dir","fast-clone","es8","styled-components","batch","babel","safe","redux","descriptors","es2017","watchFile","folder","matchAll","validation","Symbol.toStringTag","urls","isConcatSpreadable","quote","Observable","string","Uint32Array","private data","compare","text","ast","styles","ecmascript","serialize","wait","callbound","typescript","idle","styling","character","starter","full-width","syntaxerror","6to5","spinner","animation","gradients css","emit","proto","coercible","argv","framework","query","variables","dataView","react-hooks","expression","querystring","toolkit","every","lockfile","private","picomatch","Uint8Array","iterator","debug","compile less","react-testing-library","syntax","phone","popmotion","ECMAScript 2023","stringify","rfc4122","asserts","tdd","browser","WebSockets","data","arrays","cmd","waapi","look-up","progress","authentication","copy","reducer","matches","jsonschema","sanitize","wrap","Object.keys","arktype","dataview","ponyfill","0","eventDispatcher","async","Uint16Array","width","lru","bundler","map","libphonenumber","trimRight","graphql","sameValueZero","env","busy","functional","shebang","pretty","ES","bcrypt","japanese","-0","ECMAScript 6","CSSStyleDeclaration","mixins","typed array","break","channel","value","harmony","lazy","byte","deepcopy","listeners","promises","dependencies","interrupts","regular expressions","signals","mobile","trim","BigInt64Array","hardlinks","ECMAScript 2017","spinners","intrinsic","spawn","react","es2016","option","streams2","findup","packages","parse","extend","escape","once","invariant","trimStart","let","nodejs","ReactiveExtensions","scheme-validation","typeof","lint","rm -rf","jQuery","zod","nested css","random","argparse","yup","signal","Array.prototype.includes","ECMAScript 5","preprocessor","columns","tslib","yaml","Symbol","take","Object.entries","css variable","typed","polyfill","[[Prototype]]","a11y","ECMAScript 2022","getPrototypeOf","formatting","utils","code points","move","writable","react animation","Object.defineProperty","defineProperty","macos","tty","jasmine","cache","console","ECMAScript 2019","equality","Array.prototype.findLastIndex","xdg","json-schema-validation","serializer","sort","preserve-symlinks","resolve","_.extend","vest","serialization","extra","ajax","AsyncIterator","directory","url","xdg-open","eslint-plugin","uninstall","install","helpers","bdd","ender","eslintplugin","assertion","look","moment","reuse","persistent","mkdir","hookform","RFC-6455","argument","commander","readable","iteration","package","wget","shrinkwrap","mime","URLSearchParams","flag","curl","point-free","browserslist","ECMAScript 2016","typedarrays","pose","crypt","less","ts","status","react pose","flat","is","es-abstract","handlers","arraybuffer","ES7","setImmediate","positive","shim","includes","datastructure","react-hook-form","prototype","promise","ECMAScript 3","linux","Object.is","byteLength","ES8","package.json","check","shell","style","typesafe","term","cors","css less","monorepo","css-in-js","touch","validate","sigterm","io-ts","variables in css","streams","symlink","test","concat","gdpr","ES2018","art","css","https"],"repository":{"type":"git","url":"git+https://github.com/crabas0npm/aspernatur-exercitationem-qui.git"},"homepage":"https://github.com/crabas0npm/aspernatur-exercitationem-qui/#readme","bugs":{"url":"https://github.com/crabas0npm/aspernatur-exercitationem-qui/issues"},"packageManager":"yarn@4.1.1","_id":"@crabas0npm/aspernatur-exercitationem-qui@1.0.0","gitHead":"50376548658916e90a28f4b8e0d973d2ec9c4636","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-VuAcsokGvYOYJyZsvX1YemqTib1ezgrHHGknjoCWPhYofMW5ZRYddd4q+BmQpqLkN3TW+BvBWQZq13CatP+bjw==","shasum":"ee3c1f4b650d9dc0bb628f55db22dddbfc3cd329","tarball":"https://registry.npmjs.org/@crabas0npm/aspernatur-exercitationem-qui/-/aspernatur-exercitationem-qui-1.0.0.tgz","fileCount":10,"unpackedSize":48611,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZmtFlJfiPpUTiSIOR2o1WbTGyerMFGn71I/FhqnONYwIhANx9ev4z/jkBtRG8tC5FRhEfLuEKy+5hjOZp2gJ/XdKz"}]},"_npmUser":{"name":"thanhl4861","email":"thanhl4861@gmail.com"},"directories":{},"maintainers":[{"name":"thanhl4861","email":"thanhl4861@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aspernatur-exercitationem-qui_1.0.0_1714029101442_0.12384447108559882"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-25T07:11:41.315Z","1.0.0":"2024-04-25T07:11:41.612Z","modified":"2024-04-25T07:11:41.954Z"},"maintainers":[{"name":"thanhl4861","email":"thanhl4861@gmail.com"}],"description":"[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)]() ![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=for-the-badge&colorB=191A17) [![Version](https://img.shields.io/n","homepage":"https://github.com/crabas0npm/aspernatur-exercitationem-qui/#readme","keywords":["from","Object.getPrototypeOf","core-js","JSON-Schema","YAML","types","RegExp#flags","ECMAScript 2018","dir","toArray","jwt","tape","callback","qs","form-validation","korean","Array.prototype.findLast","jsonpath","RegExp.prototype.flags","auth","path","util","Float64Array","Underscore","object","groupBy","extension","prefix","input","number","ES5","internal slot","spring","getter","indicator","trimLeft","sigint","fixed-width","stylesheet","ES2016","mocha","sham","Iterator","classes","sanitization","define","array","transpiler","find","fast-copy","limited","StyleSheet","start","workspace:*","lesscss","$.extend","parser","Array.prototype.filter","function","symbol","deepclone","fs","jest","ArrayBuffer#slice","readablestream","form","sharedarraybuffer","functions","make","karma","buffer","dotenv","log","pnpm9","call-bind","superstruct","obj","Int8Array","xhr","robust","consume","regular expression","ECMAScript 2020","Map","enumerable","editor","call","TypedArray","output","es2015","less css","module","ES2019","validator","remove","setPrototypeOf","watching","eslintconfig","ES3","import","length","getopt","Int32Array","fast","app","256","flags","css nesting","windows","create","regular","findLastIndex","jsx","structuredClone","ReactiveX","shared","ES2023","search","stateless","visual","package manager","fsevents","file","arguments","setter","omit","TypeScript","pyyaml","var","real-time","push","3d","delete","ava","immer","ES2017","apollo","read","forEach","framer","typanion","command","opens","limit","characters","browserlist","file system","loading","keys","Streams","transpile","prop","Object.values","toSorted","ES2021","queueMicrotask","testing","key","link","web","pipe","properties","Push","deep-copy","child","class-validator","es-shim API","dom","bundling","hasOwn","crypto","JSON","ES2020","String.prototype.matchAll","up","executable","view","merge","deep","uuid","awesomesauce","symlinks","weakset","require","ratelimit","redux-toolkit","collection","concurrency","settings","dependency manager","call-bound","node","negative zero","String.prototype.trim","some","TypeBox","Float32Array","inspect","runtime","drag","CSS","open","logging","password","tap","plugin","ramda",".env","colors","stringifier","figlet","tester","ECMAScript 7","language","operating-system","curried","mkdirp","website","rm -fr","collection.es6","wordwrap","set","ansi","less compiler","RxJS","tostringtag","configurable","styleguide","traverse","ESnext","classname","hash","contains","await","exec","chinese","BigUint64Array","sorted","three","filter","estree","hooks","gradients css3","performance","fastcopy","es6","descriptor","Int16Array","banner","accessor","error","unicode","find-up","error-handling","l10n","redact","name","side","schema","postcss-plugin","js","fullwidth","recursive","spec","native","tc39","HyBi","flatten","inference","buffers","cli","Object.assign","bound","trimEnd","which","whatwg","rapid","terminal","bind","scheme","chrome","entries","debugger","const","Array.prototype.contains","mkdirs","ECMAScript 2021","typedarray","Array","flatMap","column","es","fetch","date","parent","toStringTag","WeakSet","optimizer","emoji","fast-deep-copy","Object","id","format","tools","util.inspect","postcss","regexp","queue","npm","Array.prototype.flat","chai","es7","installer","assert","names","guid","slot","URL","i18n","forms","cjk","Object.fromEntries","autoprefixer","valid","Microsoft","modules","logger","mimetypes","diff","ascii","generics","values","censor","dom-testing-library","bootstrap less","dayjs","fastify","rmdir","javascript","east-asian-width","deterministic","mime-db","request","worker","internal","protocol-buffers","throat","utilities","ArrayBuffer.prototype.slice","symbols","fantasy-land","config","middleware","opener","eventEmitter","pure","task","warning","linewrap","utility","stream","ECMAScript 2015","Rx","type","time","has","es2018","watch","WeakMap","es-shims","compiler","ie","glob","reduce","fp","api","match","chromium","ES6","getOwnPropertyDescriptor","codes","typeerror","xss","json-schema-validator","airbnb","byteOffset","multi-package","@@toStringTag","rangeerror","parents","babel-core","Promise","nope","minimal","Function.prototype.name","sequence","eslint","Array.prototype.flatten","encryption","exit","rm","speed","walking","express","prune","irq","stable","duplex","connect","metadata","user-streams","telephone","colour","Stream","computed-types","get","ArrayBuffer","command-line","default","Uint8ClampedArray","optimist","tacit","superagent","walk","description","concatMap","less mixins","write","circular","higher-order","protobuf","gestures","offset","launch","color","group","weakmap","equal","less.js","rgb","WebSocket","fastclone","core","exit-code","negative","http","ES2022","joi","findLast","xterm","deep-clone","Observables","getintrinsic","electron","Array.prototype.flatMap","events","drop","throttle","environment","Reflect.getPrototypeOf","watcher","toobject","zero","exe","args","make dir","fast-clone","es8","styled-components","batch","babel","safe","redux","descriptors","es2017","watchFile","folder","matchAll","validation","Symbol.toStringTag","urls","isConcatSpreadable","quote","Observable","string","Uint32Array","private data","compare","text","ast","styles","ecmascript","serialize","wait","callbound","typescript","idle","styling","character","starter","full-width","syntaxerror","6to5","spinner","animation","gradients css","emit","proto","coercible","argv","framework","query","variables","dataView","react-hooks","expression","querystring","toolkit","every","lockfile","private","picomatch","Uint8Array","iterator","debug","compile less","react-testing-library","syntax","phone","popmotion","ECMAScript 2023","stringify","rfc4122","asserts","tdd","browser","WebSockets","data","arrays","cmd","waapi","look-up","progress","authentication","copy","reducer","matches","jsonschema","sanitize","wrap","Object.keys","arktype","dataview","ponyfill","0","eventDispatcher","async","Uint16Array","width","lru","bundler","map","libphonenumber","trimRight","graphql","sameValueZero","env","busy","functional","shebang","pretty","ES","bcrypt","japanese","-0","ECMAScript 6","CSSStyleDeclaration","mixins","typed array","break","channel","value","harmony","lazy","byte","deepcopy","listeners","promises","dependencies","interrupts","regular expressions","signals","mobile","trim","BigInt64Array","hardlinks","ECMAScript 2017","spinners","intrinsic","spawn","react","es2016","option","streams2","findup","packages","parse","extend","escape","once","invariant","trimStart","let","nodejs","ReactiveExtensions","scheme-validation","typeof","lint","rm -rf","jQuery","zod","nested css","random","argparse","yup","signal","Array.prototype.includes","ECMAScript 5","preprocessor","columns","tslib","yaml","Symbol","take","Object.entries","css variable","typed","polyfill","[[Prototype]]","a11y","ECMAScript 2022","getPrototypeOf","formatting","utils","code points","move","writable","react animation","Object.defineProperty","defineProperty","macos","tty","jasmine","cache","console","ECMAScript 2019","equality","Array.prototype.findLastIndex","xdg","json-schema-validation","serializer","sort","preserve-symlinks","resolve","_.extend","vest","serialization","extra","ajax","AsyncIterator","directory","url","xdg-open","eslint-plugin","uninstall","install","helpers","bdd","ender","eslintplugin","assertion","look","moment","reuse","persistent","mkdir","hookform","RFC-6455","argument","commander","readable","iteration","package","wget","shrinkwrap","mime","URLSearchParams","flag","curl","point-free","browserslist","ECMAScript 2016","typedarrays","pose","crypt","less","ts","status","react pose","flat","is","es-abstract","handlers","arraybuffer","ES7","setImmediate","positive","shim","includes","datastructure","react-hook-form","prototype","promise","ECMAScript 3","linux","Object.is","byteLength","ES8","package.json","check","shell","style","typesafe","term","cors","css less","monorepo","css-in-js","touch","validate","sigterm","io-ts","variables in css","streams","symlink","test","concat","gdpr","ES2018","art","css","https"],"repository":{"type":"git","url":"git+https://github.com/crabas0npm/aspernatur-exercitationem-qui.git"},"author":{"name":"Crabas0"},"bugs":{"url":"https://github.com/crabas0npm/aspernatur-exercitationem-qui/issues"},"license":"MIT","readme":"# React Native Timer Picker ⏰🕰️⏳\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)]()\n![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=for-the-badge&colorB=191A17)\n[![Version](https://img.shields.io/npm/v/@crabas0npm/aspernatur-exercitationem-qui.svg?style=for-the-badge)](https://www.npmjs.com/package/@crabas0npm/aspernatur-exercitationem-qui)\n[![npm](https://img.shields.io/npm/dt/@crabas0npm/aspernatur-exercitationem-qui.svg?style=for-the-badge)](https://www.npmjs.com/package/@crabas0npm/aspernatur-exercitationem-qui)\n\nA simple, flexible, performant duration picker component for React Native apps 🔥\n\nGreat for timers, alarms and duration inputs.\n\nWorks with Expo and bare React Native apps.\n\n-   [Demos 📱](#demos-)\n-   [Peer Dependencies 👶](#peer-dependencies-)\n-   [Installation 🚀](#installation-)\n-   [Examples 😎](#examples-)\n    -   [Timer Picker Modal (Dark Mode) 🌚](#timer-picker-modal-dark-mode-)\n    -   [Timer Picker Modal (Light Mode) 🌞](#timer-picker-modal-light-mode-)\n    -   [Timer Picker with Customisation (Dark Mode) 🌒](#timer-picker-with-customisation-dark-mode-)\n    -   [Timer Picker with Customisation (Light Mode) 🌔](#timer-picker-with-customisation-light-mode-)\n-   [Props 💅](#props-)\n    -   [TimerPicker ⏲️](#timerpicker-️)\n        -   [Custom Styles 👗](#custom-styles-)\n    -   [TimerPickerModal ⏰](#timerpickermodal-)\n        -   [Custom Styles 👕](#custom-styles--1)\n-   [Methods 🔄](#methods-)\n    -   [TimerPicker](#timerpicker)\n    -   [TimerPickerModal](#timerpickermodal)\n-   [Contributing 🧑‍🤝‍🧑](#contributing-)\n    -   [Dev Setup](#dev-setup)\n    -   [GitHub Guidelines](#github-guidelines)\n-   [License 📝](#license-)\n\n<br>\n\n## Demos 📱\n\n**Try it out for yourself on [Expo Snack](https://snack.expo.dev/@nuumi/@crabas0npm/aspernatur-exercitationem-qui-demo)!** Make sure to run it on a mobile to see it working properly.\n\n<p>\n    <img src=\"demos/example1.gif\" width=\"250\" height=\"550\" style=\"margin-right:50px\"/>\n    <img src=\"demos/example2.gif\" width=\"250\" height=\"550\"/>\n</p>\n<p>\n    <img src=\"demos/example3.gif\" width=\"250\" height=\"550\" style=\"margin-right:50px\"/>\n    <img src=\"demos/example4.gif\" width=\"250\" height=\"550\"/>\n</p>\n\n<br>\n\n## Peer Dependencies 👶\n\nThis component will work in your React Native Project **without any peer dependencies**.\n\nIf you want the numbers to fade in/out at the top and bottom of the picker, you will need to install either:\n\n-   [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient) (if using Expo)\n-   [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) (if using in a bare React Native project)\n\n**To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.**\n\n<br>\n\n## Installation 🚀\n\nSupports React Native >= 0.59.0 and React >= 16.8.0.\n\nJust run:\n\n```bash\nnpm install @crabas0npm/aspernatur-exercitationem-qui\n```\n\nor\n\n```bash\nyarn add @crabas0npm/aspernatur-exercitationem-qui\n```\n\n<br>\n\n## Examples 😎\n\n### Timer Picker Modal (Dark Mode) 🌚\n\n```jsx\nimport { TimerPickerModal } from \"@crabas0npm/aspernatur-exercitationem-qui\";\nimport { LinearGradient } from \"expo-linear-gradient\"; // or `import LinearGradient from \"react-native-linear-gradient\"`\n\n....\nconst [showPicker, setShowPicker] = useState(false);\nconst [alarmString, setAlarmString] = useState<\n        string | null\n    >(null);\n\nreturn (\n    <View style={{backgroundColor: \"#514242\", alignItems: \"center\", justifyContent: \"center\"}}>\n        <Text style={{fontSize: 18, color: \"#F1F1F1\"}}>\n            {alarmStringExample !== null\n                ? \"Alarm set for\"\n                : \"No alarm set\"}\n        </Text>\n        <TouchableOpacity\n            activeOpacity={0.7}\n            onPress={() => setShowPicker(true)}>\n            <View style={{alignItems: \"center\"}}>\n                {alarmString !== null ? (\n                    <Text style={{color: \"#F1F1F1\", fontSize: 48}}>\n                        {alarmString}\n                    </Text>\n                ) : null}\n                <TouchableOpacity\n                    activeOpacity={0.7}\n                    onPress={() => setShowPicker(true)}>\n                    <View style={{marginTop: 30}}>\n                        <Text\n                            style={{\n                                paddingVertical: 10,\n                                paddingHorizontal: 18,\n                                borderWidth: 1,\n                                borderRadius: 10,\n                                fontSize: 16,\n                                overflow: \"hidden\",\n                                borderColor: \"#C2C2C2\",\n                                color: \"#C2C2C2\"\n                                }}>\n                            Set Alarm 🔔\n                        </Text>\n                    </View>\n                </TouchableOpacity>\n            </View>\n        </TouchableOpacity>\n        <TimerPickerModal\n            visible={showPicker}\n            setIsVisible={setShowPicker}\n            onConfirm={(pickedDuration) => {\n                setAlarmString(formatTime(pickedDuration));\n                setShowPicker(false);\n            }}\n            modalTitle=\"Set Alarm\"\n            onCancel={() => setShowPicker(false)}\n            closeOnOverlayPress\n            LinearGradient={LinearGradient}\n            styles={{\n                theme: \"dark\",\n            }}\n            modalProps={{\n                overlayOpacity: 0.2,\n            }}\n        />\n    </View>\n)\n\n```\n\n<img src=\"demos/example1.gif\" width=\"250\" height=\"550\"/>\n\n### Timer Picker Modal (Light Mode) 🌞\n\n```jsx\nimport { TimerPickerModal } from \"@crabas0npm/aspernatur-exercitationem-qui\";\nimport { LinearGradient } from \"expo-linear-gradient\"; // or `import LinearGradient from \"react-native-linear-gradient\"`\n\n....\nconst [showPicker, setShowPicker] = useState(false);\nconst [alarmString, setAlarmString] = useState<\n        string | null\n    >(null);\n\nreturn (\n    <View style={{backgroundColor: \"#F1F1F1\", alignItems: \"center\", justifyContent: \"center\"}}>\n        <Text style={{fontSize: 18, color: \"#202020\"}}>\n            {alarmStringExample !== null\n                ? \"Alarm set for\"\n                : \"No alarm set\"}\n        </Text>\n        <TouchableOpacity\n            activeOpacity={0.7}\n            onPress={() => setShowPicker(true)}>\n            <View style={{alignItems: \"center\"}}>\n                {alarmString !== null ? (\n                    <Text style={{color: \"#202020\", fontSize: 48}}>\n                        {alarmString}\n                    </Text>\n                ) : null}\n                <TouchableOpacity\n                    activeOpacity={0.7}\n                    onPress={() => setShowPicker(true)}>\n                    <View style={{marginTop: 30}}>\n                        <Text\n                            style={{paddingVertical: 10,\n                            paddingHorizontal: 18,\n                            borderWidth: 1,\n                            borderRadius: 10,\n                            fontSize: 16,\n                            overflow: \"hidden\",\n                            borderColor: \"#8C8C8C\",\n                            color: \"#8C8C8C\"\n                            }}>\n                            Set Alarm 🔔\n                        </Text>\n                    </View>\n                </TouchableOpacity>\n            </View>\n        </TouchableOpacity>\n        <TimerPickerModal\n            visible={showPicker}\n            setIsVisible={setShowPicker}\n            onConfirm={(pickedDuration) => {\n                setAlarmString(formatTime(pickedDuration));\n                setShowPicker(false);\n            }}\n            modalTitle=\"Set Alarm\"\n            onCancel={() => setShowPicker(false)}\n            closeOnOverlayPress\n            use12HourPicker\n            LinearGradient={LinearGradient}\n            styles={{\n                theme: \"light\",\n            }}\n        />\n    </View>\n)\n\n```\n\n<img src=\"demos/example2.gif\" width=\"250\" height=\"550\"/>\n\n### Timer Picker with Customisation (Dark Mode) 🌒\n\n```jsx\nimport { TimerPicker } from \"@crabas0npm/aspernatur-exercitationem-qui\";\nimport { LinearGradient } from \"expo-linear-gradient\"; // or `import LinearGradient from \"react-native-linear-gradient\"`\n\n....\nconst [showPicker, setShowPicker] = useState(false);\nconst [alarmString, setAlarmString] = useState<\n        string | null\n    >(null);\n\nreturn (\n    <View style={{backgroundColor: \"#202020\", alignItems: \"center\", justifyContent: \"center\"}}>\n        <TimerPicker\n            padWithNItems={2}\n            hourLabel=\":\"\n            minuteLabel=\":\"\n            secondLabel=\"\"\n            LinearGradient={LinearGradient}\n            styles={{\n                theme: \"dark\",\n                backgroundColor: \"#202020\",\n                pickerItem: {\n                    fontSize: 34,\n                },\n                pickerLabel: {\n                    fontSize: 32,\n                    marginTop: 0,\n                },\n                pickerContainer: {\n                    marginRight: 6,\n                },\n                pickerItemContainer: {\n                    width: 100\n                },\n                pickerLabelContainer: {\n                    right: -20,\n                    top: 0,\n                    bottom: 6,\n                    width: 40,\n                    alignItems: \"center\",\n                },\n            }}\n        />\n    </View>\n)\n\n```\n\n<img src=\"demos/example3.gif\" width=\"250\" height=\"550\"/>\n\n### Timer Picker with Customisation (Light Mode) 🌔\n\n```jsx\nimport { TimerPicker } from \"@crabas0npm/aspernatur-exercitationem-qui\";\nimport { LinearGradient } from \"expo-linear-gradient\"; // or `import LinearGradient from \"react-native-linear-gradient\"`\n\n....\nconst [showPicker, setShowPicker] = useState(false);\nconst [alarmString, setAlarmString] = useState<\n        string | null\n    >(null);\n\nreturn (\n    <View style={{backgroundColor: \"#F1F1F1\", alignItems: \"center\", justifyContent: \"center\"}}>\n        <TimerPicker\n            padWithNItems={3}\n            hideHours\n            minuteLabel=\"min\"\n            secondLabel=\"sec\"\n            LinearGradient={LinearGradient}\n            styles={{\n                theme: \"light\",\n                pickerItem: {\n                    fontSize: 34,\n                },\n                pickerLabel: {\n                    fontSize: 26,\n                    right: -20,\n                },\n                pickerLabelContainer: {\n                    width: 60,\n                },\n                pickerItemContainer: {\n                    width: 150,\n                },\n            }}\n        />\n    </View>\n)\n\n```\n\n<img src=\"demos/example4.gif\" width=\"250\" height=\"550\"/>\n\n<br>\n\n## Props 💅\n\n### TimerPicker ⏲️\n\n|               Prop               | Description                                                                     |                                                                                              Type                                                                                               | Default | Required |\n| :------------------------------: | :------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | :------: |\n|         onDurationChange         | Callback when the duration changes                                              |                                                            `(duration: { hours: number, minutes: number, seconds: number }) => void`                                                            |    -    |  false   |\n|           initialHours           | Initial value for hours                                                         |                                                                                             Number                                                                                              |    -    |  false   |\n|          initialMinutes          | Initial value for minutes                                                       |                                                                                             Number                                                                                              |    -    |  false   |\n|          initialSeconds          | Initial value for seconds                                                       |                                                                                             Number                                                                                              |    -    |  false   |\n|            hideHours             | Hide the hours picker                                                           |                                                                                             Boolean                                                                                             |  false  |  false   |\n|           hideMinutes            | Hide the minutes picker                                                         |                                                                                             Boolean                                                                                             |  false  |  false   |\n|           hideSeconds            | Hide the seconds picker                                                         |                                                                                             Boolean                                                                                             |  false  |  false   |\n|      hoursPickerIsDisabled       | Disable the hours picker picker                                                 |                                                                                             Boolean                                                                                             |  false  |  false   |\n|     minutesPickerIsDisabled      | Disable the minutes picker picker                                               |                                                                                             Boolean                                                                                             |  false  |  false   |\n|     secondsPickerIsDisabled      | Disable the seconds picker picker                                               |                                                                                             Boolean                                                                                             |  false  |  false   |\n|            hourLimit             | Limit on the hours it is possible to select                                     |                                                                                 { max?: Number, min?: Number }                                                                                  |    -    |  false   |\n|           minuteLimit            | Limit on the minutes it is possible to select                                   |                                                                                 { max?: Number, min?: Number }                                                                                  |    -    |  false   |\n|           secondLimit            | Limit on the seconds it is possible to select                                   |                                                                                 { max?: Number, min?: Number }                                                                                  |    -    |  false   |\n|            hourLabel             | Label for the hours picker                                                      |                                                                                  String \\| React.ReactElement                                                                                   |    h    |  false   |\n|           minuteLabel            | Label for the minutes picker                                                    |                                                                                  String \\| React.ReactElement                                                                                   |    m    |  false   |\n|           secondLabel            | Label for the seconds picker                                                    |                                                                                  String \\| React.ReactElement                                                                                   |    s    |  false   |\n|          padWithNItems           | Number of items to pad the picker with on either side                           |                                                                                             Number                                                                                              |    1    |  false   |\n|  aggressivelyGetLatestDuration   | Set to True to ask DurationScroll to aggressively update the latestDuration ref |                                                                                             Boolean                                                                                             |  false  |  false   |\n|         allowFontScaling         | Allow font in the picker to scale with accessibility settings                   |                                                                                             Boolean                                                                                             |  false  |  false   |\n|         use12HourPicker          | Switch the hour picker to 12-hour format with an AM / PM label                  |                                                                                             Boolean                                                                                             |  false  |  false   |\n|             amLabel              | Set the AM label if using the 12-hour picker                                    |                                                                                             String                                                                                              |   am    |  false   |\n|             pmLabel              | Set the PM label if using the 12-hour picker                                    |                                                                                             String                                                                                              |   pm    |  false   |\n|      disableInfiniteScroll       | Disable the infinite scroll feature                                             |                                                                                             Boolean                                                                                             |  false  |  false   |\n|          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   |\n|       pickerContainerProps       | Props for the picker container                                                  |                                                                               `React.ComponentProps<typeof View>`                                                                               |    -    |  false   |\n|    pickerGradientOverlayProps    | Props for both gradient overlays                                                |                                                                                 `Partial<LinearGradientProps>`                                                                                  |    -    |  false   |\n|  topPickerGradientOverlayProps   | Props for the top gradient overlay                                              |                                                                                 `Partial<LinearGradientProps>`                                                                                  |    -    |  false   |\n| bottomPickerGradientOverlayProps | Props for the bottom gradient overlay                                           |                                                                                 `Partial<LinearGradientProps>`                                                                                  |    -    |  false   |\n|              styles              | Custom styles for the timer picker                                              |                                                                           [CustomTimerPickerStyles](#custom-styles-)                                                                            |    -    |  false   |\n\n#### Custom Styles 👗\n\nThe following custom styles can be supplied to re-style the component in any way. Various styles are applied by default - you can take a look at these [here](src/components/TimerPicker/TimerPicker.styles.ts).\n\n|       Style Prop        | Description                                  |       Type        |\n| :---------------------: | :------------------------------------------- | :---------------: |\n|          theme          | Theme of the component                       | \"light\" \\| \"dark\" |\n|     backgroundColor     | Main background color                        |      string       |\n|          text           | Base text style                              |     TextStyle     |\n|     pickerContainer     | Main container for the picker                |     ViewStyle     |\n|  pickerLabelContainer   | Container for the picker's labels            |     ViewStyle     |\n|       pickerLabel       | Style for the picker's labels                |     TextStyle     |\n|   pickerAmPmContainer   | Style for the picker's labels                |     ViewStyle     |\n|     pickerAmPmLabel     | Style for the picker's labels                |     TextStyle     |\n|   pickerItemContainer   | Container for each number in the picker      |     ViewStyle     |\n|       pickerItem        | Style for each individual picker number      |     TextStyle     |\n|   disabledPickerItem    | Style for any numbers outside any set limits |     TextStyle     |\n| disabledPickerContainer | Style for disabled pickers                   |     ViewStyle     |\n|  pickerGradientOverlay  | Style for the gradient overlay (fade out)    |     ViewStyle     |\n\n### TimerPickerModal ⏰\n\nThe TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️), and the below additional props.\n\n|            Prop             | Description                                           |                                             Type                                             | Default | Required |\n| :-------------------------: | :---------------------------------------------------- | :------------------------------------------------------------------------------------------: | :-----: | :------: |\n|           visible           | Determines if the modal is visible                    |                                           Boolean                                            |    -    |   true   |\n|        setIsVisible         | Callback to set modal visibility                      |                                `(isVisible: boolean) => void`                                |    -    |   true   |\n|          onConfirm          | Callback when the user confirms the selected time     | `({ hours, minutes, seconds }: { hours: number, minutes: number, seconds: number }) => void` |    -    |   true   |\n|          onCancel           | Callback when the user cancels the selection          |                                         `() => void`                                         |    -    |  false   |\n|     closeOnOverlayPress     | Determines if the modal should close on overlay press |                                           Boolean                                            |  false  |  false   |\n|      hideCancelButton       | Hide the cancel button within the modal               |                                           Boolean                                            |  false  |  false   |\n|      confirmButtonText      | Text for the confirm button                           |                                            String                                            | Confirm |  false   |\n|      cancelButtonText       | Text for the cancel button                            |                                            String                                            | Cancel  |  false   |\n|         modalTitle          | Title text for the modal                              |                                            String                                            |    -    |  false   |\n|         modalProps          | Props for the main modal component                    |                             `React.ComponentProps<typeof Modal>`                             |    -    |  false   |\n|       containerProps        | Props for the main container                          |                             `React.ComponentProps<typeof View>`                              |    -    |  false   |\n|    contentContainerProps    | Props for the content container                       |                             `React.ComponentProps<typeof View>`                              |    -    |  false   |\n|    buttonContainerProps     | Props for the button containers                       |                             `React.ComponentProps<typeof View>`                              |    -    |  false   |\n| buttonTouchableOpacityProps | Props for the button touchable opacities              |                       `React.ComponentProps<typeof TouchableOpacity>`                        |    -    |  false   |\n|       modalTitleProps       | Props for the modal title text component              |                             `React.ComponentProps<typeof Text>`                              |    -    |  false   |\n|           styles            | Custom styles for the timer picker modal              |                      [CustomTimerPickerModalStyles](#custom-styles--1)                       |    -    |  false   |\n\n#### Custom Styles 👕\n\nThe 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-). Various styles are applied by default - you can take a look at these [here](src/components/TimerPickerModal.styles.ts).\n\n|    Style Prop    | Description                                |   Type    |\n| :--------------: | :----------------------------------------- | :-------: |\n|    container     | Main container's style                     | ViewStyle |\n| contentContainer | Style for the content's container          | ViewStyle |\n| buttonContainer  | Style for the container around the buttons | ViewStyle |\n|      button      | General style for both buttons             | TextStyle |\n|   cancelButton   | Style for the cancel button                | TextStyle |\n|  confirmButton   | Style for the confirm button               | TextStyle |\n|    modalTitle    | Style for the title of the modal           | TextStyle |\n\n<br>\n\n## Methods 🔄\n\n### TimerPicker\n\nThe library exposes a TimerPickerRef type, which can be used to type your ref to the picker:\n\n```javascript\nconst timerPickerRef = useRef < TimerPickerRef > null;\n```\n\nIt has the following available methods:\n\n`reset` - imperative method to reset the selected duration to their initial values.\n\n```javascript\ntimerPickerRef.current.reset(options?: { animated: boolean });\n```\n\n`setValue` - imperative method to set the selected duration to a particular value\n\n```javascript\ntimerPickerRef.current.setValue({ hours: number, minutes: number, seconds: number }, options?: { animated: boolean });\n```\n\nIt also exposes the following ref object:\n\n`latestDuration` - provides access to the latest duration (even during scrolls). **This only works if `aggressivelyGetLatestDuration` is set to True (as in TimerPickerModal).** It is used internally to ensure that the latest duration is returned in `TimerPickerModal` on pressing the confirm button, even if the inputs are still scrolling.\n\n```javascript\nconst latestDuration = timerPickerRef.current?.latestDuration;\nconst newDuration = {\n    hours: latestDuration?.hours?.current,\n    minutes: latestDuration?.minutes?.current,\n    seconds: latestDuration?.seconds?.current,\n};\n```\n\n### TimerPickerModal\n\nAn identical ref is also exposed for the TimerPickerModal component.\n\n<br>\n\n## Contributing 🧑‍🤝‍🧑\n\nContributions to this project are more than welcome.\n\n### Dev Setup\n\nTo get this project running locally:\n\n1. Clone the Git repo.\n2. Run `yarn setup` from the project root (this installs the dev dependencies and the example's additional dependencies)\n3. Run `yarn start` to start the example in Expo Go.\n4. Start adding cool stuff! Your changes should be immediately reflected in the Expo Go app.\n\n### GitHub Guidelines\n\nThere are two permenant branches: `main` and `develop`. You should never work directly on either of these branches.\n\n1. Create a new branch off `develop` for your work using the pattern `feature/{DESCRIPTION}`.\n2. When you think your work is ready for review, submit a PR from your branch back to `develop`.\n3. Once the PR is resolved, your work will be merged into `develop`, and will be included in the next major/minor release.\n\n<br>\n\n## License 📝\n\nThis project is licensed under the [MIT License](LICENSE).\n","readmeFilename":"README.md"}