{"_id":"@aladdinstudios/react-native-immersive-bars","_rev":"1-c87c6ce28bc367800dc18f979550b3e0","name":"@aladdinstudios/react-native-immersive-bars","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.5":{"name":"@aladdinstudios/react-native-immersive-bars","version":"1.0.5","description":"React Native component to change bottom bar/navigation bar to be transparent on Android","mainNote":"Do not add .js extension. It breaks the ability for metrto to detect platforms","main":"index","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/aladdinstudios/react-native-immersive-bars.git"},"keywords":["react-native","react-native-component","react-native-immersive-bars","immersive-mode","transparent-navbar","transparent-statusbar","android"],"author":{"name":"crutchcorn"},"license":"MIT","bugs":{"url":"https://github.com/aladdinstudios/react-native-immersive-bars/issues"},"peerDependencies":{"react-native":">=0.57.0"},"homepage":"https://github.com/aladdinstudios/react-native-immersive-bars#readme","types":"./index.d.ts","gitHead":"be52c745e665a100fb10e51c9aa12ca502826eed","_id":"@aladdinstudios/react-native-immersive-bars@1.0.5","_nodeVersion":"16.19.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Sg4VUxyUCWamMmuDxSxW/xnsSew0qW8DJZx73LrH+inga8j+tq3MUewtNCmndj+jIV4OB0W9wF64VGrUnouWHw==","shasum":"9a9b5c2991cd992c372231e79f0363a984932dde","tarball":"https://registry.npmjs.org/@aladdinstudios/react-native-immersive-bars/-/react-native-immersive-bars-1.0.5.tgz","fileCount":10,"unpackedSize":13288,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8kf6fWTSMR+avBC8qYbRk5ajyFO9dSG74DO9Lmgok3AiEAq4HRArNBvo0hFtuqYfl1yIAfb4H+aIv3tX5kbOs1Eww="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj58qLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdNQ/9GG5e2PTbDihayTdyrt0xtGk3EbS/j0yAYm60MbiUm8hz2MHh\r\n5xTWrDBup2cn5gNOhGKeaWJ9AlfNi3smGOk2LUcAMZPgbL1rjYsjrWqcUvlv\r\n7lYiY/ctrj4PkWU/3njj0pcmymq/PJSBR7BX+lhLbJGkZvYlEioJvz5bKGWX\r\nJ10jmhu8DW6JQ+BOZlypVvOn5v7JeSa/mR7OBSCLtqjaB6Yjwh1w/aFpWQN2\r\nPhcoX0xAOhWz9jpdiJTM2u6muMjTh0sz5A1Z0gMPWpL6+u5fMEmjMwrcvXJH\r\nPGvXpqkxITLXNoGxdLljjTFHJYzcEkf3IGU7cBkt8Cl78NQtZEw8d9RZVBap\r\n5lnLkAjU0ZTkn1FHMI75K2pEFrx2REfaYhP2/9N0ACcaUsnvtCuq5bWAIJdk\r\nDIXdP+rXEmKvEWoBS0e/Eelh6Yz7TuzItcf8KFx3/Feu7xQq/LXJ/tzhE1xn\r\nTaqFXgFfnq0Rzbcxie+etHwlJBy/PUWAih+nszO6RrexyT1zziqWeqOmsd0X\r\nBgDjLKy3kFhusyc2mNz+QZB27YZ6miKWDxcQ7Lt8tP1DVMHIuC9XKBsWDSBL\r\nXZV5LCa5b7lMOc+K94MEF1VRbE2qA4YGHcyd/kvZL/leTn+XayRbcG6RnjwI\r\nMPp4YUhVXvj+V6uN7Q6mDezENKU8+OpH0kM=\r\n=Gz50\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kuasha420","email":"kuasha420@gmail.com"},"directories":{},"maintainers":[{"name":"kuasha420","email":"kuasha420@gmail.com"},{"name":"itsaladin","email":"alauddin12340@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-immersive-bars_1.0.5_1676135051153_0.700638808739031"},"_hasShrinkwrap":false},"1.0.6":{"name":"@aladdinstudios/react-native-immersive-bars","version":"1.0.6","description":"React Native component to change bottom bar/navigation bar to be transparent on Android","mainNote":"Do not add .js extension. It breaks the ability for metrto to detect platforms","main":"index","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/aladdinstudios/react-native-immersive-bars.git"},"keywords":["react-native","react-native-component","react-native-immersive-bars","immersive-mode","transparent-navbar","transparent-statusbar","android"],"author":{"name":"crutchcorn"},"license":"MIT","bugs":{"url":"https://github.com/aladdinstudios/react-native-immersive-bars/issues"},"peerDependencies":{"react-native":">=0.57.0"},"homepage":"https://github.com/aladdinstudios/react-native-immersive-bars#readme","types":"./index.d.ts","gitHead":"c84f97200ed0f33b07e10d72e5c33775da9facae","_id":"@aladdinstudios/react-native-immersive-bars@1.0.6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-TgJ1yycosarjGKqbcncl2xLaZJCMnAoYVLar4mQ/ab2YXdzkMBKyL2kf1FfHeWCun815IZseGzStypkH3hSvIA==","shasum":"9013d2ef73975fa2e67608b79443f0fb30e14ad9","tarball":"https://registry.npmjs.org/@aladdinstudios/react-native-immersive-bars/-/react-native-immersive-bars-1.0.6.tgz","fileCount":10,"unpackedSize":13304,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCHOxM4OF06spyjkuNRFtEyTxjoRl/uVWhWIeFj1F8vAIhANOmcpyhKZmgPInz/zJ6L8nEfrzLgMAy/fWWdwZXVJL1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5/A3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWCg/+MjvRZJW0kaA4UNh9rYsojajbL9PAUEZ4bEIfYXy1+O6+CIlQ\r\nCVTAtw/GY1i5pVuiGjQMNxQ9id4ilBOk94VcijqX8PrLyz1+G6rlEUZNACpG\r\nhavzjAlukxOHc9yP183WM0Y0Hc7vb+HjxUEhS0TkAMMutzXRi+7XTp6evNHG\r\nEIR9ieqO0vcTrH07CAhB06JyqbH6fJtRjw4iRnLYxQRIt1SYv2A+EpMO/zs3\r\n8/eB/8+kSFOHlrZW1RGNJ/A99xoojblFGLBUgOxSRcFMIpgnyt0PbfzICwSJ\r\nUOzqCkDUzEFN8aPgNBsVeOywnBy3SREYs4BAg8SdiuAPFpFBR0LoJ2oyy/m4\r\nCCX4Xd0GRwh2DoDzVGa+53wbLvhCJpRAPGl8ouoHrXcjnE0ztU2mihVope5F\r\n6Sm1as8geNTEVQJVvPTH5hri+lGjKsGz0JGI40i7Jxmce98VIxGi12FcvouJ\r\nWqNXiWGtkJg1OHMAxsob7va2184i7u0YwNk4JaSmsLjDvFgjzffYLeFhT7pv\r\nfO6sBj5PkV0/R7Lv7gZwoUmNYvq3957pDtrglj+cwwy2s7tmJFnJu5jY9zNg\r\n/I4L17rEGtortT4BXbkPYMgeeI65yVeJ1mAMSIaP9VgeyKs1sP5fyATw+Lfg\r\nVpPGd21uIQs4tRrEm77jly14k+h2SDmUzgY=\r\n=RSiO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kuasha420","email":"kuasha420@gmail.com"},"directories":{},"maintainers":[{"name":"kuasha420","email":"kuasha420@gmail.com"},{"name":"itsaladin","email":"alauddin12340@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-immersive-bars_1.0.6_1676144695543_0.33956580877406406"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-11T17:04:11.023Z","1.0.5":"2023-02-11T17:04:11.306Z","modified":"2023-02-11T19:44:55.783Z","1.0.6":"2023-02-11T19:44:55.687Z"},"maintainers":[{"name":"kuasha420","email":"kuasha420@gmail.com"},{"name":"itsaladin","email":"alauddin12340@gmail.com"}],"description":"React Native component to change bottom bar/navigation bar to be transparent on Android","homepage":"https://github.com/aladdinstudios/react-native-immersive-bars#readme","keywords":["react-native","react-native-component","react-native-immersive-bars","immersive-mode","transparent-navbar","transparent-statusbar","android"],"repository":{"type":"git","url":"git+https://github.com/aladdinstudios/react-native-immersive-bars.git"},"author":{"name":"crutchcorn"},"bugs":{"url":"https://github.com/aladdinstudios/react-native-immersive-bars/issues"},"license":"MIT","readme":"<h1 align=\"center\">\n  React Native Immersive Bars\n</h1>\n\n<div align=\"center\">\n\n[![Our npm path](https://badgen.net/npm/v/@aladdinstudios/react-native-immersive-bars)](https://www.npmjs.com/package/@aladdinstudios/react-native-immersive-bars/)\n\n</div>\n\n<div align=\"center\">\n\n<img height=\"600\" alt=\"A preview in Android 10\" src=\"./promo/android_10.gif\"/>\n\n<img height=\"600\" alt=\"A preview in Android M\" src=\"./promo/android_m.gif\"/>\n\n</div>\n\n> Do you like the button slider that changes from light to dark mode? [That's another package that I've built: `react-native-button-toggle-group`](https://github.com/crutchcorn/react-native-button-toggle-group)\n\n[Google officially suggests apps that target Q or higher to render content under the statusbar and navbar](http://youtube.com/watch?v=Nf-fP2u9vjI).\nHowever, [doing so previously was difficult to do and required some customization and tweaking](https://unicorn-utterances.com/posts/draw-under-navbar-using-react-native/). Not to mention the variant support for other APIs.\n\nWell, this package enables you to easily do so across various Android APIs levels. It also mocks out usage with iOS and other platforms, so you're able to use it in cross-platform apps.\n\n> ⚠ This package only supports Android 5.0 and higher ⚠\n>\n> This package is meant to be used alongside [the `react-native-safe-area-context` package](https://github.com/th3rdwave/react-native-safe-area-context) in order\n> to provide proper padding and margins in order to keep scrollviews and others from being stuck forever under the navbar.\n>\n> Please refer to that package's README for more information on how to use it.\n\n## Install\n\n```\nnpm i --save @aladdinstudios/react-native-immersive-bars\n```\n\nOr\n\n```\nyarn add @aladdinstudios/react-native-immersive-bars\n```\n\n### Android\n\nIf you're targeting API 29+ in your React Native app, you need to do one more step to enable the fully transparent bars. Add:\n\n```xml\n<item name=\"android:enforceNavigationBarContrast\">false</item>\n```\n\nTo:\n\n```\nandroid\\app\\src\\main\\res\\values\\styles.xml\n```\n\n## Usage\n\n### Usage in JavaScript\n\n```jsx\nimport { changeBarColors } from \"@aladdinstudios/react-native-immersive-bars\";\n\n// ...\n\nReact.useEffect(() => {\n  changeBarColors(isDarkMode, \"#50000000\", \"transparent\");\n  // or changeBarColors(isDarkMode);\n}, [isDarkMode]);\n```\n\nThe `changeBarColors` function has a single required parameter and two optional ones.\n\n- `isDarkMode` (Required): If the app is in dark mode or not - will apply proper styling to icons and statusbar/navbar background\n- `translucentLightStr` (Optional): When a translucent bar must be drawn (due to API restrictions), what color it should be drawn in light mode\n- `translucentDarkStr` (Optional): When a translucent bar must be drawn (due to API restrictions), what color it should be drawn in dark mode\n\nBoth `translucentLightStr` and `translucentDarkStr` accept and color that [Color.parseColor](<https://developer.android.com/reference/android/graphics/Color#parseColor(java.lang.String)>) is able to handle as well as the string `'transparent'`.\n\n> THIS MEANS THAT THREE DIGIT HEX SHORTHAND LIKE `#FFF` WILL CAUSE YOUR APP TO CRASH\n\n### Adding to `onCreate` (Optional)\n\nIf you only use the JavaScript code, your app will flash the navbar once the App.tsx code finally renders.\nIf you want to avoid a jump like that, you can edit your code in:\n\n```\nandroid > app > src > main > java > yourpackagepath > MainActivity.java\n```\n\nAnd change the code to reflect this:\n\n```java\nimport com.facebook.react.ReactActivity;\nimport com.rnimmersivebars.ImmersiveBars; // here\n\npublic class MainActivity extends ReactActivity {\n   @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        boolean isDarkMode = false; // Customize this to match your app's default theme\n        ImmersiveBars.changeBarColors(this, isDarkMode);  // here\n        super.onCreate(savedInstanceState);\n    }\n    // ...other code\n}\n```\n\n## Notice about Fork\n\nThis package is a fork of [react-native-immersive-bars](https://github.com/oceanbit/react-native-immersive-bars). Initially this just made the package work after the jcenter was shut down. I have a PR open to merge this into the original package, but I'm not sure if it will be merged.\n\nI also plan to add TurboModules support to this package, but I'm not sure when I'll get around to it. If I do, I'll make a PR to the original package as well.\n\n## Alternatives\n\nIf you don't need to use a fullscreen navbar, then you can simply change the color of the navbar itself with this package:\n\n- [`react-native-navigation-bar-color`](https://github.com/thebylito/react-native-navigation-bar-color)\n\nNote that this package does not play nice with [`react-native-safe-area-context`'s edge detection](https://github.com/th3rdwave/react-native-safe-area-context/).\n\nOtherwise, if you want to hide the navbar and the statusbar in their entirety, I'd suggest taking a look at the following package:\n\n- [`react-native-immersive`](https://github.com/mockingbot/react-native-immersive)\n","readmeFilename":"README.md"}