{"_id":"@blackbox-vision/react-native-paper-use-styles","_rev":"4-61238a243b399e75c34b29f0a55d1b52","name":"@blackbox-vision/react-native-paper-use-styles","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@blackbox-vision/react-native-paper-use-styles","version":"0.1.2","description":"Custom Hook for dynamic styles with react-native-paper","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/src/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","prepare":"bob build","release":"release-it","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/react-native-paper-use-styles.git"},"author":{"name":"JonatanSalas","email":"jonatan.salas@blackbox-vision.tech","url":"https://github.com/BlackBoxVision"},"license":"MIT","bugs":{"url":"https://github.com/BlackBoxVision/react-native-paper-use-styles/issues"},"homepage":"https://github.com/BlackBoxVision/react-native-paper-use-styles#readme","devDependencies":{"@commitlint/config-conventional":"^8.3.4","@react-native-community/bob":"^0.16.2","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^1.1.4","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"0.62.13","commitlint":"^8.3.5","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.3","husky":"^4.2.5","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"^16.11.0","react-native":"^0.62.2","react-native-paper":"^4.0.1","release-it":"^13.5.8","typescript":"^3.8.3"},"peerDependencies":{"react":"*","react-native":"*","react-native-paper":"*"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"yarn lint && yarn typescript"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"publishConfig":{"access":"public"},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"813207a56aece71e1d119fc0be0ef56b170b2d9d","_id":"@blackbox-vision/react-native-paper-use-styles@0.1.2","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Aa5oVVYr7QZ4EMl7oTXK5Hm7/ZcbZFSWJqojH0KqXeFMe5VoFhqBwOhNHMtEQ5q2QailXK4pEha/eYqPoUClCQ==","shasum":"865777427b065eef7216e5aa167d7289c758adb1","tarball":"https://registry.npmjs.org/@blackbox-vision/react-native-paper-use-styles/-/react-native-paper-use-styles-0.1.2.tgz","fileCount":9,"unpackedSize":12387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2BjTCRA9TVsSAnZWagAA0a0QAJaQsFm8rgcNILq0OEcE\ngLe5HuAzqGM3p1c6Y+lHMzdD24MsURuPbhBQ0g313Ho5BmT3ZUgrhJTC9PaZ\nIajTl1Tv6RwkyM6HtQYgg1JkSzY2gYmFwFeOMPA3E8hy+ADmoYsj9eGuPlA+\nIvvx+6hgnJNueqT4qXTl9hHnSXNILWXcGeAuSrBW0Nidm4cQnW54THGM/x7t\n932tzkiJ4cwyGWg522LwD9G5I5/cVEuTzcGE/kysUGhzHyWec2a6WaSD0a5e\nRU08JEyvLN/9qgm1d7tKQywatvbg0mf+Evq+U4NCxRBBFa68MLR5+BAZofAw\nPMVBpZIVYQqS55iCP/HJc/WFIr3h/WndhzNsOOIeoV5Y77vKWFIeW2dolcLT\n1WoJxM4ekM3b/ompQqbXTfktd89cT4NdT3EJs4n1UHHSrNF/kOa3MkuALPi4\n04RJBbokQVMo2L2iFzkJY/leu6YikWzGwxMJsRS/07ckT8eb/goDOEoqhk9Q\nbQW80c7NV3bgplI/jo/AQB9/HH4mvw/OWgbRxXyKTz3zDo71WA+j4rbnaO3J\nmruHbo9mQ9R3qheB/ZZJXYyYqMyuglPw7XdbGVWaOwAMh8B0dbA9aNQBLk5y\nUf2LbTxAtbCqmTegmRI9haQ2FSsIQ+0iWStnliyEjIGmX8V4b/ZQ7TXK2gsS\nifV4\r\n=zF2R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgEtjkFAWJgRMpEuNyDTVhINqH+mjTWeVLlxu3qxlYgAiEA696DipfYgWJvh3iS/dna/eSJ5S5BZixUSN0A809yBSE="}]},"maintainers":[{"name":"manutuero","email":"manuel.tuero@blackbox-vision.tech"},{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"}],"_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-paper-use-styles_0.1.2_1597837903975_0.915944205994637"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-19T11:51:43.784Z","0.1.2":"2020-08-19T11:51:44.156Z","modified":"2022-04-04T19:19:53.931Z"},"maintainers":[{"email":"jonatan.salas@blackbox-vision.tech","name":"jonatansalas"},{"email":"manuel.tuero@blackbox-vision.tech","name":"manutuero"}],"description":"Custom Hook for dynamic styles with react-native-paper","homepage":"https://github.com/BlackBoxVision/react-native-paper-use-styles#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/react-native-paper-use-styles.git"},"author":{"name":"JonatanSalas","email":"jonatan.salas@blackbox-vision.tech","url":"https://github.com/BlackBoxVision"},"bugs":{"url":"https://github.com/BlackBoxVision/react-native-paper-use-styles/issues"},"license":"MIT","readme":"# RN Paper makeStyles Hook [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n\nCustom Hook to define RN StyleSheets in a dynamic way.\n\n## Table of contents\n\n- [Use Case](#use-case)\n- [Compatibility](#compatibility)\n- [Pre Requisites](#pre-requisites)\n- [Installation](#installation)\n  - [NPM](#npm)\n  - [YARN](#yarn)\n- [Example Usage](#example-usage)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Use case\n\nYou're using RN for building an app, and you need to make custom styles based on theme and props.\n\n## Compatibility\n\nOur package currently supports apps with **RN >= 0.60**. `We don't have a plan currently to support olders ones, but if you need we're open to support it.`\n\n## Pre Requisites\n\nYou're using `react-native-paper` components in your app.\n\n## Installation\n\nYou can install this library via NPM or YARN.\n\n### NPM\n\n```bash\nnpm i @blackbox-vision/react-native-paper-use-styles\n```\n\n### YARN\n\n```bash\nyarn add @blackbox-vision/react-native-paper-use-styles\n```\n\n## Example Usage\n\nAfter reading and performing the previous steps, you should be able to import the library and use it like in this example:\n\n```javascript\n// MyComponent.js\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { useStyles } from './styles';\n\nconst deviceWidth = Dimensions.get('screen').width;\nconst deviceHeight = Dimensions.get('screen').height;\n\nconst MyComponent = (props) => {\n  const styles = useStyles({\n    deviceWidth,\n    deviceHeight,\n  });\n\n  return <View style={styles.container}> .... </View>;\n};\n\nexport default MyComponent;\n```\n\n```javascript\n// styles.ts\n\nexport const useStyles = makeStyles((theme, props) => ({\n  container: {\n    backgroundColor: theme.colors.backgroundColor,\n    height: props.deviceHeight,\n    width: props.deviceWidth,\n  },\n}));\n```\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/react-native-paper-use-styles/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-native-paper-use-styles/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-native-paper-use-styles/blob/master/LICENSE) for more information.\n","readmeFilename":"README.md"}