{"_id":"@chuhoanglong/react-native-iphonexhelper","name":"@chuhoanglong/react-native-iphonexhelper","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@chuhoanglong/react-native-iphonexhelper","version":"1.0.0","description":"A library to help you design your react-native app for the iPhone X, iPhone 14","main":"index.js","types":"index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/ptelad/react-native-iphone-x-helper.git"},"keywords":["react-native","ios","iphone-x","iphoneX","iphone14","stylesheet"],"author":{"name":"Elad Gil"},"license":"MIT","bugs":{"url":"https://github.com/ptelad/react-native-iphone-x-helper/issues"},"homepage":"https://github.com/ptelad/react-native-iphone-x-helper#readme","peerDependencies":{"react-native":">=0.42.0"},"gitHead":"c51058c843ee63ad9693d9348f05603b7b877d91","_id":"@chuhoanglong/react-native-iphonexhelper@1.0.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ifj59o2mFpOvltrQLi/TKhWxkHAWH0/rVIEDolfgsyaJkratCxtAehToHP6qHCJ6vn7orlflS+rySP80ibfBVA==","shasum":"87218ec0d3aafc60a524e8649dd39b557fb6e296","tarball":"https://registry.npmjs.org/@chuhoanglong/react-native-iphonexhelper/-/react-native-iphonexhelper-1.0.0.tgz","fileCount":5,"unpackedSize":5887,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxb5ccP+PO+dLWJBtQ+OVzMqkQ/TCJ8PM6IUnRF22ngAiAQx33i4sXmLoVM2jectJd7bpJdstFy4maa0ecU4f+wQA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIqaEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsxA//V3zKWr25dVxxUvHxTpSWS2fNrb2lldqhFvYTXmVg3NXxGOKb\r\n3g84S0+M9wSn2UMD4c9WghyVC2sl5xP/wIWJPS+eLU7mLWRdcz3f3DehvMG4\r\nJnDRjvq48A4m/GAS0DRtoeda3db/v1MgVhH+tDtLCo8VfjKr9SdVDiYuxMGp\r\nwa7CMUBbLEZF68UCJved6dwcdsoVzKP2pfTojXA3Xn1S5Gh3Vc5YdkRCMfHi\r\nWEnuGDCOlOiMAe1QBNU2TGTayuYjYogc9W6aCPeapfftU405Rfdb53aWXrJe\r\nNXwt9FMnUGH2VKJWD2qi2jCLGJhVdvERGF3gkc143wgwZKpFo0uMdZXWqy1v\r\n0237HHH2JBPuhqYKN106WQI/uwfPnago/XXLq1MOeDvyNsvhv/UIK2uxTORS\r\nXU3VcVIlYF5brKT4uMRU433w0yxt7tTa+1T0SACShNSnNa1Mml4FSBiZ382h\r\nLxpoPMkC61BGjqAeaOx3eWtcABLK3f6ednFtKYD9dqdJaQ5BwFiD4K+muFDK\r\nuyr82UEe3UIYl+Yfv8xATRKH/Jnacngngmr1sN3zDqTj2ZG3MjonmLxIfNa4\r\nyZh9Sb9gtDjpbH/6nDz6ULMXVU0cJMbOTrh6UQuhSpprVfVRoDKOvDxFBYX/\r\n2IPBdEyhio1ngNPGqWgAxLkbRg6DitYEOA4=\r\n=h91/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"chuhoanglong","email":"longanh143@gmail.com"},"directories":{},"maintainers":[{"name":"chuhoanglong","email":"longanh143@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-iphonexhelper_1.0.0_1663215236663_0.494705087299254"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-15T04:13:56.604Z","1.0.0":"2022-09-15T04:13:56.830Z","modified":"2022-09-15T04:13:56.962Z"},"maintainers":[{"name":"chuhoanglong","email":"longanh143@gmail.com"}],"description":"A library to help you design your react-native app for the iPhone X, iPhone 14","homepage":"https://github.com/ptelad/react-native-iphone-x-helper#readme","keywords":["react-native","ios","iphone-x","iphoneX","iphone14","stylesheet"],"repository":{"type":"git","url":"git+https://github.com/ptelad/react-native-iphone-x-helper.git"},"author":{"name":"Elad Gil"},"bugs":{"url":"https://github.com/ptelad/react-native-iphone-x-helper/issues"},"license":"MIT","readme":"[![npm version](https://badge.fury.io/js/react-native-iphone-x-helper.svg)](https://badge.fury.io/js/react-native-iphone-x-helper)\n\n# react-native-iphone-x-helper\nA library to help you design your react-native app for notched iPhones.\n\n## Installing ##\n`npm i @chuhoanglong/react-native-iphonexhelper --save`\n\n## API ##\n\n### ifIphoneX(iphoneXStyle, \\[regularStyle\\]) ###\nthis method it for creating stylesheets with the iPhone X in mind\n\n#### Parameters ####\n**iphoneXStyle** - the style to apply if you're on iPhone X\n\n**regularStyle (*optional*)** - the style to apply if you're not on iPhone X\n\n#### Example ####\n```js\n// in style.js\n\nimport { StyleSheet } from 'react-native';\nimport { ifIphoneX } from '@chuhoanglong/react-native-iphonexhelper'\n\nexport default StyleSheet.create({\n    header:{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        padding:10,\n        height: 60,\n        backgroundColor: 'transparent',\n        ...ifIphoneX({\n            paddingTop: 50\n        }, {\n            paddingTop: 20\n        })\n    },\n});\n```\n\n### isIphoneX() ###\n\n**returns** - `true` if you running on an iPhone X.\n\n#### Example ####\n```js\nimport { isIphoneX } from '@chuhoanglong/react-native-iphonexhelper'\n\n// ...\n\nif (isIphoneX()) {\n    // do this...\n} else {\n    // do that...\n}\n```\n\n### getStatusBarHeight([safe]) ###\n\n#### Parameters ####\n**safe** - whether you want for get safe area height or not\n\n**returns** - the height of the status bar: `44` for safe iPhoneX, `30` for unsafe iPhoneX, `20` for other iOS devices and `StatusBar.currentHeight` for Android.\n\n#### Example ####\n\n```js\n// in style.js\n\nimport { StyleSheet } from 'react-native';\nimport { getStatusBarHeight } from '@chuhoanglong/react-native-iphonexhelper'\n\nexport default StyleSheet.create({\n    header:{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        padding:10,\n        height: 60,\n        backgroundColor: 'transparent',\n        paddingTop: getStatusBarHeight()\n    },\n});\n```\n\n***NOTE:*** If your using the the unsafe statusbar height, make sure to add 14dp of padding to your content, otherwise it's going to be flush against the notch\n\n### getBottomSpace ###\n\n**returns** - the height of the bottom to fit the safe area: `34` for iPhone X and `0` for other devices.\n\n#### Example ####\n\n```js\n// in style.js\n\nimport { StyleSheet } from 'react-native';\nimport { getBottomSpace } from '@chuhoanglong/react-native-iphonexhelper'\n\nexport default StyleSheet.create({\n    totalview: {\n        flex: 1,\n        backgroundColor: 'transparent',\n        marginBottom: getBottomSpace()\n    },\n});\n```\n\n## Licence ##\n**MIT**\n","readmeFilename":"README.md"}