{"_id":"@exodus/gorhom-portal","_rev":"145-4c47b61ba4e5eb26af8b141af256076f","name":"@exodus/gorhom-portal","dist-tags":{"latest":"1.0.14-exodus.0"},"versions":{"1.0.14-exodus.0":{"name":"@exodus/gorhom-portal","version":"1.0.14-exodus.0","keywords":["expo","react-native-web","react-native","ios","android","portal"],"author":{"url":"https://gorhom.dev","name":"Mo Gorhom"},"license":"MIT","_id":"@exodus/gorhom-portal@1.0.14-exodus.0","maintainers":[{"name":"rec","email":"espinosacurbelo@gmail.com"},{"name":"awilson-rs","email":"awilson@refactorsecurity.com"},{"name":"ggabarrin-rs","email":"ggabarrin@refactorsecurity.com"},{"name":"nafisholeh","email":"rachmadnafisholeh@gmail.com"},{"name":"r4vn","email":"simon.schmell@gmail.com"},{"name":"exorich","email":"richard.nw@exodus.io"},{"name":"cryptosgr","email":"sagar@exodus.io"},{"name":"mol0d","email":"moloduk99@gmail.com"},{"name":"yevhenii_molodyk","email":"y.molodyk@everstake.one"},{"name":"yilmazbahadir","email":"yilmazbahadir@gmail.com"},{"name":"muratso","email":"ericarlos23@gmail.com"},{"name":"exoleo","email":"leonard.ga@Exodus.io"},{"name":"633kh4ck","email":"svolsky+npm@xn--zer-2na.net"},{"name":"ossel","email":"ossian.el@exodus.io"},{"name":"davidfraga610","email":"david.fraga610@hotmail.com"},{"name":"clarkexo","email":"clark@exodus.io"},{"name":"andrewrexo","email":"andrew.r@exodus.io"},{"name":"james-gre","email":"james.gre@exodus.io"},{"name":"juraex","email":"julio.vi@exodus.io"},{"name":"richayotte","email":"rich@ayottesoftware.com"},{"name":"ralph.ba","email":"ralph.ba@exodus.io"},{"name":"angelloz","email":"scottloz@protonmail.com"},{"name":"joshuabot","email":"joshuabot@exodus.io"},{"name":"jamiemaw","email":"jamie@exodus.io"},{"name":"exodus-justin.za","email":"justin.za@exodus.io"},{"name":"javiexodus","email":"javier.fe@exodus.io"},{"name":"wcastr","email":"walter@exodus.io"},{"name":"rg911","email":"xian.f.liu@gmail.com"},{"name":"alex.alexandrius","email":"s.pataridze@gmail.com"},{"name":"filipexodus","email":"filip@exodus.io"},{"name":"ryansquared-npm","email":"npm@ryansquared.pub"},{"name":"andrescarreon","email":"andres.di@exodus.io"},{"name":"florianmathieu","email":"florian.ma@exodus.io"},{"name":"janwe","email":"jan.we@exodus.io"},{"name":"fosterdill","email":"fosterdill@gmail.com"},{"name":"fboucquez","email":"fboucquez@gmail.com"},{"name":"skapala","email":"szymon20000@gmail.com"},{"name":"umito","email":"umitodabasi@gmail.com"},{"name":"lanahizzle","email":"tim.la@exodus.io"},{"name":"iaacek","email":"iaacek@gmail.com"},{"name":"ariene-exodus","email":"ariene.ri@exodus.io"},{"name":"ps.mcnally","email":"patrick.mc@exodus.io"},{"name":"akinncar","email":"akinncar@hotmail.com"},{"name":"matias.la","email":"matias.la@exodus.io"},{"name":"voltagebots","email":"okpako.fr@exodus.io"},{"name":"kwwood","email":"kevin.w@exodus.io"},{"name":"sergii_bo","email":"sergii.bo@exodus.io"},{"name":"lekzd","email":"alexandr.ko@exodus.io"},{"name":"cdotta","email":"cdotta90@gmail.com"},{"name":"alexandrbbm","email":"alexandr.bbm@gmail.com"},{"name":"danh.t.vo","email":"danh.vo@exodus.io"},{"name":"ezenwankwogabriel","email":"ezenwankwogabriel@gmail.com"},{"name":"meniem","email":"aly@exodus.io"},{"name":"mzndako","email":"mzndako@gmail.com"},{"name":"kevva","email":"kevinmartensson@gmail.com"},{"name":"feri42","email":"feri@feridot.com"},{"name":"jprichardson","email":"jprichardson@gmail.com"},{"name":"farisissa","email":"farisissa8@gmail.com"},{"name":"ryanzim","email":"opensrc@ryanzim.com"},{"name":"headfire","email":"egorvodopyanov@gmail.com"},{"name":"gutenye","email":"ywzhaifei@gmail.com"},{"name":"mosesbot","email":"moses@exodus.io"},{"name":"roccomuso","email":"roccomusolino92@gmail.com"},{"name":"dcastagnoli","email":"daniel@exodus.io"},{"name":"sonaye","email":"ain@abcd.sa"},{"name":"nareg_exodus","email":"nareg@exodus.io"},{"name":"ves","email":"ves@exodus.io"},{"name":"tenaciousmv","email":"mvayngrib@gmail.com"},{"name":"asyakost","email":"asya@exodus.io"},{"name":"bulgakovk","email":"kbulgakov@yahoo.com"},{"name":"chalker","email":"chalkerx@gmail.com"},{"name":"andrejb","email":"andrej-borstnik@hotmail.com"},{"name":"jaydp17","email":"jaydp17@gmail.com"},{"name":"olistic","email":"moliverafreire@gmail.com"},{"name":"joepie91","email":"admin@cryto.net"},{"name":"merlz","email":"john.staker@ymail.com"},{"name":"jadechip","email":"jim.eric.skogman@gmail.com"},{"name":"vbonini","email":"victor@bonini.tech"},{"name":"devopsrobot","email":"devopsrobot@exodus.io"},{"name":"jenish-sojitra","email":"jenish@exodus.io"},{"name":"unidwell","email":"gregor.mirai@gmail.com"},{"name":"nachoalvarez","email":"ignacioalvarez92@gmail.com"},{"name":"giovannirco","email":"giovannirco@gmail.com"},{"name":"diegomura","email":"diegomuracciole@gmail.com"},{"name":"lanre-mark","email":"lanre.developer@gmail.com"},{"name":"sunilagrawal","email":"sunilagrawal@gmail.com"},{"name":"guillecura","email":"guille@cura.is"},{"name":"mariosvlad","email":"marios.vladimerou@protonmail.com"},{"name":"federico-po","email":"federico.po@exodus.io"},{"name":"pagan404","email":"saraspap@protonmail.com"}],"homepage":"https://github.com/ExodusMovement/react-native-portal#readme","bugs":{"url":"https://github.com/ExodusMovement/react-native-portal/issues"},"dist":{"shasum":"8ace031f6fdc0885ab45117446b25e2546c4fe5f","tarball":"https://registry.npmjs.org/@exodus/gorhom-portal/-/gorhom-portal-1.0.14-exodus.0.tgz","fileCount":53,"integrity":"sha512-XXisXq5ucne1XXaFOK5Wyj0CXVHRhuqoGmxPiqdHcApNJJghyRd4l3yGDjwS30hunr/34MEzBinhhhOp0eebHw==","signatures":[{"sig":"MEUCIQC4h58ApvynApZ1Mj+W+gWuFFARWdpXsaNIzkbzNLKEBQIgF3svV7xXQSdnny2Wi9jlhE0FD9qw5pfzJXUaecBYp1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52123},"main":"lib/commonjs/index","_from":"file:/tmp/shared-react-native-portal-f91456b77ba1/exodus-gorhom-portal-1.0.14-exodus.0.tgz","types":"lib/typescript/index.d.ts","module":"lib/module/index","source":"src/index","gitHead":"fd487e3f031b84d90e9e4853346f7212de177962","scripts":{"lint":"eslint \"**/*.{js,ts,tsx}\"","test":"jest","build":"yarn delete-build && bob build && yarn copy-dts && yarn delete-dts.js","example":"yarn --cwd example","release":"release-it","copy-dts":"copyfiles -u 1 \"src/**/*.d.ts\" lib/typescript","bootstrap":"yarn example && yarn && pod install","typescript":"tsc --noEmit","delete-build":"rm -rf lib","delete-dts.js":"find ./lib/commonjs -name '*.d.js*' -delete && find ./lib/module -name '*.d.js*' -delete"},"_npmUser":{"name":"matias.la","email":"matias.la@exodus.io"},"_resolved":"/tmp/shared-react-native-portal-f91456b77ba1/exodus-gorhom-portal-1.0.14-exodus.0.tgz","_integrity":"sha512-XXisXq5ucne1XXaFOK5Wyj0CXVHRhuqoGmxPiqdHcApNJJghyRd4l3yGDjwS30hunr/34MEzBinhhhOp0eebHw==","repository":{"url":"git+https://github.com/ExodusMovement/react-native-portal.git","type":"git"},"_npmVersion":"9.6.7","description":"A simplified portal implementation for ⭕️ React Native ⭕️","directories":{},"_nodeVersion":"18.17.1","dependencies":{"nanoid":"^3.3.1"},"react-native":"src/index","_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","husky":"^4.3.8","react":"16.11.0","eslint":"^7.28.0","prettier":"^2.3.1","copyfiles":"^2.4.1","release-it":"^14.2.2","typescript":"^4.3.2","@types/jest":"^26.0.0","@types/react":"^17.0.0","react-native":"0.62.2","auto-changelog":"^2.2.1","@commitlint/cli":"^11.0.0","@types/react-native":"0.63.37","@types/lodash.isequal":"^4.5.5","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","@react-native-community/bob":"^0.17.1","@commitlint/config-conventional":"^11.0.0","@release-it/conventional-changelog":"^2.0.0","@react-native-community/eslint-config":"^2.0.0"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/gorhom-portal_1.0.14-exodus.0_1697135516947_0.1186890494833508","host":"s3://npm-registry-packages"},"@react-native-community/bob":{"output":"lib","source":"src","targets":["commonjs","module","typescript"]}}},"time":{"created":"2023-10-12T18:31:56.946Z","modified":"2026-09-25T18:30:44.967Z","1.0.14-exodus.0":"2023-10-12T18:31:57.151Z"},"bugs":{"url":"https://github.com/ExodusMovement/react-native-portal/issues"},"author":{"url":"https://gorhom.dev","name":"Mo Gorhom"},"license":"MIT","homepage":"https://github.com/ExodusMovement/react-native-portal#readme","keywords":["expo","react-native-web","react-native","ios","android","portal"],"repository":{"url":"git+https://github.com/ExodusMovement/react-native-portal.git","type":"git"},"description":"A simplified portal implementation for ⭕️ React Native ⭕️","maintainers":[{"email":"julio.vi@exodus.io","name":"juraex"},{"email":"kevinmartensson@gmail.com","name":"kevva"},{"email":"doguhan.gu@exodus.io","name":"doguhan"},{"email":"jan.we@exodus.io","name":"janwe"},{"email":"jprichardson@gmail.com","name":"jprichardson"},{"email":"farisissa8@gmail.com","name":"farisissa"},{"email":"egorvodopyanov@gmail.com","name":"headfire"},{"email":"ywzhaifei@gmail.com","name":"gutenye"},{"email":"moses@exodus.io","name":"mosesbot"},{"email":"daniel@exodus.io","name":"dcastagnoli"},{"email":"ain@abcd.sa","name":"sonaye"},{"email":"mvayngrib@gmail.com","name":"tenaciousmv"},{"email":"asya@exodus.io","name":"asyakost"},{"email":"kbulgakov@yahoo.com","name":"bulgakovk"},{"email":"chalkerx@gmail.com","name":"chalker"},{"email":"andrej-borstnik@hotmail.com","name":"andrejb"},{"email":"jaydp17@gmail.com","name":"jaydp17"},{"email":"moliverafreire@gmail.com","name":"olistic"},{"email":"admin@cryto.net","name":"joepie91"},{"email":"john.staker@ymail.com","name":"merlz"},{"email":"victor@bonini.tech","name":"vbonini"},{"email":"devopsrobot@exodus.io","name":"devopsrobot"},{"email":"jenish@exodus.io","name":"jenish-sojitra"},{"email":"sagar@exodus.io","name":"cryptosgr"},{"email":"diegomuracciole@gmail.com","name":"diegomura"},{"email":"lanre.developer@gmail.com","name":"lanre-mark"},{"email":"federico.po@exodus.io","name":"federico-po"},{"email":"akinncar@hotmail.com","name":"akinncar"},{"email":"fboucquez@gmail.com","name":"fboucquez"},{"email":"tim.la@exodus.io","name":"lanahizzle"},{"email":"kevin.w@exodus.io","name":"kwwood"},{"email":"joshuabot@exodus.io","name":"joshuabot"},{"email":"aly@exodus.io","name":"meniem"},{"email":"alexandr.bbm@gmail.com","name":"alexandrbbm"},{"email":"scottloz@protonmail.com","name":"angelloz"},{"email":"nacho@exodus.io","name":"nacho-exodus"},{"email":"s.pataridze@gmail.com","name":"alex.alexandrius"},{"email":"espinosacurbelo@gmail.com","name":"rec"},{"email":"jamie@exodus.io","name":"jamiemaw"},{"email":"james.gre@exodus.io","name":"james-gre"},{"email":"shehryarshoukat6@gmail.com","name":"shehryar6"},{"email":"clark@exodus.io","name":"clarkexo"},{"email":"tunguyenuni@gmail.com","name":"tunguyennnnn"},{"email":"mikita.hr@exodus.io","name":"mikita-hr"},{"email":"jeremiah.sc@exodus.io","name":"jschopen"},{"email":"marcos.kichel@gmail.com","name":"marcos.kichel"},{"email":"andrew.to@exodus.io","name":"andrewtoth-exodus"},{"email":"julian@exodus.io","name":"kryptkeep"},{"email":"svolsky+npm@xn--zer-2na.net","name":"633kh4ck"},{"email":"mykhailo.ba@exodus.io","name":"mbaraniak-exodus"},{"email":"awesomeniko@pm.me","name":"awesomeniko"},{"email":"simon.schmell@gmail.com","name":"r4vn"},{"email":"ericarlos23@gmail.com","name":"muratso"},{"email":"clintyn.un@exodus.io","name":"clintyn"},{"email":"philip.wa@exodus.io","name":"phil-exodus"},{"email":"jason.yon@exodus.io","name":"exo-jason"},{"email":"agent-neo@exodus.io","name":"exodus-neo"},{"email":"richard.nw@exodus.io","name":"exorich"},{"email":"xian.f.liu@gmail.com","name":"rg911"},{"email":"peter.th@exodus.io","name":"jdmdreamer"},{"email":"tom@exodus.io","name":"thom-exodus"},{"email":"ruben@exodus.io","name":"uanl619"},{"email":"arlen.ca@exodus.io","name":"arlen-exodus"},{"email":"yalomist@gmail.com","name":"yalomist"},{"email":"joshua.ro@exodus.io","name":"joshua-rogers-exodus"},{"email":"me@sripwoud.xyz","name":"sripwoud"},{"email":"gdg@exodus.com","name":"xogdg"},{"email":"christopher.ri@exodus.io","name":"chrisrichexo"},{"email":"josue@exodus.io","name":"josuexo"},{"email":"yevhenii.mo@exodus.io","name":"yevhenii-mo-exodus"},{"email":"bear.hu@exodus.io","name":"bewarden"},{"email":"github@lemu.sh","name":"1emu"},{"email":"andyespagnolo@gmail.com","name":"andyesp"},{"email":"domagoj.je@exodus.io","name":"dj_exodus"}],"readme":"# React Native Portal\n\n[![React Native Portal](https://img.shields.io/npm/v/@gorhom/portal?style=flat-square)](https://www.npmjs.com/package/@gorhom/portal) [![npm](https://img.shields.io/npm/l/@gorhom/portal?style=flat-square)](https://www.npmjs.com/package/@gorhom/portal) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@gorhom/portal) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://snack.expo.io/@gorhom/portal-example)\n\nA simplified portal implementation for ⭕️ React Native ⭕️.\n\n![React Native Portal](./preview.jpg)\n\n---\n\n## Features\n\n- Multi portals handling.\n- Multi portal hosts handling.\n- Allow override functionality.\n- Compatible with `React Native Web`.\n- Compatible with `Expo`, [check out the project Expo Snack](https://snack.expo.io/@gorhom/portal-example).\n- Written in `TypeScript`.\n\n## Installation\n\n```sh\nyarn add @gorhom/portal\n```\n\n## Usage\n\n### Simple Portal\n\nThis is the very simple usage of this library, where you will teleport your content to the `PortalProvider` layer of the app.\n\nFirst, you will need to add `PortalProvider` to your root component - this usually be the `App.tsx`.\n\n```tsx\nexport const App = () => (\n  <PortalProvider>\n  {... your app goes here}\n  </PortalProvider>\n);\n```\n\nLast, you wrap the content that you want to teleport with `Portal`.\n\n```tsx\nconst BasicScreen = () => {\n  return (\n    { ... }\n    <Portal>\n      <Text>\n        Text to be teleported to the root host\n      </Text>\n    </Portal>\n    { ... }\n  );\n};\n```\n\n### Custom Portal Host\n\nThis is when you need to teleport your content to a custom portal host `PortalHost` at any layer in the app.\n\nFirst, you will need to add `PortalProvider` to your root component - this usually be the `App.tsx`.\n\n```tsx\nexport const App = () => (\n  <PortalProvider>\n  {... your app goes here ...}\n  </PortalProvider>\n);\n```\n\nSecond, you will need to add `PortalHost` at any layer in your app, with a custom name.\n\n```tsx\nconst CustomView = () => {\n  return (\n    { ... }\n    <PortalHost name=\"CustomPortalHost\" />\n    { ... }\n  );\n};\n```\n\nLast, you wrap the content that you want to teleport with `Portal` and the custom portal host name.\n\n```tsx\nconst BasicScreen = () => {\n  return (\n    { ... }\n    <Portal hostName=\"CustomPortalHost\">\n      <Text>\n        Text to be teleported to the CustomView component\n      </Text>\n    </Portal>\n    { ... }\n  );\n};\n```\n\n### React Native Screens integration\n\nIn order to get your teleported content on top of all native views, you will need to wrap your content with `FullWindowOverlay` from `react-native-screens`.\n\n```tsx\nimport { FullWindowOverlay } from 'react-native-screens';\n\nconst BasicScreen = () => {\n  return (\n    { ... }\n    <Portal>\n      <FullWindowOverlay style={StyleSheet.absoluteFill}>\n        <Text>\n          Text to be teleported to the CustomView component\n        </Text>\n      </FullWindowOverlay>\n    </Portal>\n    { ... }\n  );\n};\n```\n### React Native Gesture Handler\n\nTo avoid issues when using the React Native Portal with React Native Gesture Handler, you must place the `PortalProvider` under the `GestureHandlerRootView`, otherwise it might freeze your app.\n\n```tsx\nexport const App = () => (\n  <GestureHandlerRootView>\n    <PortalProvider>\n    {... your app goes here}\n    </PortalProvider>\n  </GestureHandlerRootView>\n);\n```\n\n> Read more about the [app freezing issue](https://github.com/gorhom/react-native-portal/issues/24).\n\n## Props\n\n### Portal Props\n\n#### `name`\n\nPortal's key or name to be used as an identifer.\n\n> `required:` NO | `type:` string | `default:` auto generated unique key\n\n#### `hostName`\n\nHost's key or name to teleport the portal content to.\n\n> `required:` NO | `type:` string | `default:` 'root'\n\n#### `handleOnMount`\n\nOverride internal mounting functionality, this is useful if you want to trigger any action before mounting the portal content.\n\n```ts\ntype handleOnMount = (mount?: () => void) => void;\n```\n\n> `required:` NO | `type:` function | `default:` undefined\n\n#### `handleOnUnmount`\n\nOverride internal un-mounting functionality, this is useful if you want to trigger any action before un-mounting the portal content.\n\n```ts\ntype handleOnUnmount = (unmount?: () => void) => void;\n```\n\n> `required:` NO | `type:` function | `default:` undefined\n\n#### `children`\n\nPortal's content.\n\n> `required:` NO | `type:` ReactNode | ReactNode[] | `default:` undefined\n\n### PortalHost Props\n\n#### `name`\n\nHost's key or name to be used as an identifier.\n\n> `required:` YES | `type:` string\n\n## Hooks\n\n### `usePortal`\n\nTo access internal functionalities of all portals.\n\n```ts\n/**\n * @param hostName host name or key.\n */\ntype usePortal = (hostName: string = 'root') => {\n  /**\n   * Register a new host.\n   */\n  registerHost: () => void;\n  /**\n   * Deregister a host.\n   */\n  deregisterHost: () => void;\n  /**\n   * Add portal to the host container.\n   * @param name portal name or key\n   * @param node portal content\n   */\n  addPortal: (name: string, node: ReactNode) => void;\n  /**\n   * Update portal content.\n   * @param name portal name or key\n   * @param node portal content\n   */\n  updatePortal: (name: string, node: ReactNode) => void;\n  /**\n   * Remove portal from host container.\n   * @param name portal name or key\n   */\n  removePortal: (name: string) => void;\n};\n```\n\n<h2 id=\"built-with\">Built With ❤️</h2>\n\n- [@react-native-community/bob](https://github.com/react-native-community/bob)\n\n## Author\n\n- [Mo Gorhom](https://gorhom.dev/)\n\n## Sponsor & Support\n\nTo keep this library maintained and up-to-date please consider [sponsoring it on GitHub](https://github.com/sponsors/gorhom). Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter [@gorhom](https://twitter.com/gorhom).\n\n## License\n\n[MIT](./LICENSE)\n\n---\n\n<p align=\"center\">\n  <a href=\"https://gorhom.dev/#gh-light-mode-only\" target=\"_blank\">\n    <img height=\"18\" alt=\"Mo Gorhom\" src=\"./mogorhom-light.png\">\n  </a>\n  <a href=\"https://gorhom.dev/#gh-dark-mode-only\" target=\"_blank\">\n    <img height=\"18\" alt=\"Mo Gorhom\" src=\"./mogorhom-dark.png\">\n  </a>\n</p>\n","readmeFilename":"README.md"}