{"_id":"@bashem/rn-popup","name":"@bashem/rn-popup","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bashem/rn-popup","version":"0.0.1","description":"A experimental rn-popup library.rn popup library.","main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"react-native":"./src/index.ts","source":"./src/index.ts","types":"./lib/typescript/src/index.d.ts","default":"./lib/module/index.js"},"./package.json":"./package.json"},"scripts":{"example":"yarn workspace @bashem/rn-popup-example","clean":"del-cli android/build example/android/build example/android/app/build example/ios/build lib","prepare":"bob build","typecheck":"tsc","lint":"eslint \"**/*.{js,ts,tsx}\"","test":"jest","release":"release-it --only-version","web":"vite","build:web":"vite build"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/mbashem/rn-popup.git"},"author":{"name":"Bashem","email":"mohammed.bashem@gmail.com","url":"https://github.com/mbashem"},"license":"MIT","bugs":{"url":"https://github.com/mbashem/rn-popup/issues"},"homepage":"https://github.com/mbashem/rn-popup#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"devDependencies":{"@commitlint/config-conventional":"^20.5.0","@eslint/compat":"^2.0.3","@eslint/eslintrc":"^3.3.5","@eslint/js":"^10.0.1","@jest/globals":"^30.0.0","@react-native/babel-preset":"0.85.0","@react-native/eslint-config":"0.85.0","@react-native/jest-preset":"0.85.0","@release-it/conventional-changelog":"^10.0.6","@types/react":"^19.2.0","commitlint":"^20.5.0","del-cli":"^7.0.0","eslint":"^9.39.4","eslint-config-prettier":"^10.1.8","eslint-plugin-ft-flow":"^3.0.11","eslint-plugin-prettier":"^5.5.5","jest":"^30.3.0","lefthook":"^2.1.4","prettier":"^3.8.1","react":"19.2.3","react-native":"0.85.0","react-native-builder-bob":"^0.41.0","react-native-web":"~0.21.1","release-it":"^19.2.4","turbo":"^2.8.21","typescript":"^6.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"workspaces":["example"],"packageManager":"yarn@4.11.0","react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"codegenConfig":{"name":"RnPopupSpec","type":"components","jsSrcsDir":"src","ios":{"componentProvider":{"RnPopupView":"RnPopupView"}},"android":{"javaPackageName":"com.bashem.rnpopup"}},"prettier":{"quoteProps":"consistent","singleQuote":false,"tabWidth":2,"trailingComma":"es5","useTabs":false},"jest":{"preset":"@react-native/jest-preset","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"create-react-native-library":{"type":"fabric-view","languages":"kotlin-objc","tools":["eslint","jest","lefthook","release-it","vite"],"version":"0.62.0"},"_id":"@bashem/rn-popup@0.0.1","_nodeVersion":"22.14.0","_npmVersion":"11.14.1","dist":{"integrity":"sha512-r2ux3dZ7FuhfYxcyS/rP6bjl1myOouYaOpmL4LU4cucCMxg10CskXyHaTFVc8R17a8xOXY+ql3hqRPPZ6zT2Zg==","shasum":"1b67ed802c447232e8c72102e0455ee70ffe076b","tarball":"https://registry.npmjs.org/@bashem/rn-popup/-/rn-popup-0.0.1.tgz","fileCount":39,"unpackedSize":79779,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAnO1PPNE4mT5FDDqEZV83iqQwQND14/V/ZO0WyQATKWAiB90kGvmTCq4S0eUIDAf53RaM9936ggigrzgZdCaim2Iw=="}]},"_npmUser":{"name":"bashem","email":"mohammed.bashem@gmail.com"},"directories":{},"maintainers":[{"name":"bashem","email":"mohammed.bashem@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-popup_0.0.1_1783616070139_0.5776267022477948"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-09T16:54:29.966Z","0.0.1":"2026-07-09T16:54:30.276Z","modified":"2026-07-09T16:54:30.463Z"},"maintainers":[{"name":"bashem","email":"mohammed.bashem@gmail.com"}],"description":"A experimental rn-popup library.rn popup library.","homepage":"https://github.com/mbashem/rn-popup#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/mbashem/rn-popup.git"},"author":{"name":"Bashem","email":"mohammed.bashem@gmail.com","url":"https://github.com/mbashem"},"bugs":{"url":"https://github.com/mbashem/rn-popup/issues"},"license":"MIT","readme":"# @bashem/rn-popup\n\n🚧 Experimental React Native New Architecture popup component.\n\n## 🚨 Status\n\nThis package is **not ready for development use yet**.\n\nThe `0.0.1` release is intended as an early public snapshot only. The API,\nnative behavior, repository structure, and documentation may change quickly\nwhile the implementation is still being validated.\n\nPlease do **not** depend on this package in real applications yet, even for\nactive feature development. It may contain incomplete behavior, rough native\nedge cases, and undocumented limitations.\n\n## 🙅 Contributions\n\nThis project is **not ready for outside contributions yet**.\n\nIssues, pull requests, feature requests, and implementation cleanup will be\nopened later after the core Android and iOS behavior is stable enough to review\nproperly. For now, this repository is published mainly for visibility and\npersonal iteration.\n\nThis package exposes a Fabric native component named `RnPopupView`.\nIt hosts React children and can detect touches outside the first child when the\ntouch is delivered to the popup host.\n\nThe native side is intentionally only a touch-routing primitive. It reports\noutside touches and decides whether those touches are consumed or passed through.\nIt does not dismiss itself. Callers own `visible`, dismissal, selection clearing,\nand animation timing.\n\n## Native behavior\n\n`Popup` renders a Fabric native component named `RnPopupView`. Native code hosts\nthe React children above the app and treats the first child as the popup content\nhit area.\n\nOn iOS, hit testing and outside-touch reporting are deliberately separate:\n\n- `RnPopupRootHost.hitTest` routes touches. Inside touches go to popup content.\n  Outside pass-through touches return `nil` so UIKit can continue hit testing the\n  views below.\n- `RnPopupOutsideTouchObserver` is a non-cancelling `UIGestureRecognizer`\n  attached to the active `UIWindow`. It observes `touchesBegan`, reports one\n  outside press, and does not steal the touch from underlying views.\n\nThis split avoids using `hitTest` as a touch lifecycle callback. UIKit may call\n`hitTest` more than once for the same touch, so outside press events should not\nbe emitted directly from `hitTest`.\n\n## Installation\n\n\n```sh\nnpm install @bashem/rn-popup\n```\n\n\n## Usage\n\n\n```tsx\nimport { OUTSIDE_TOUCH_BEHAVIOR, Popup } from \"@bashem/rn-popup\";\n\n// ...\n\n<Popup\n  visible={visible}\n  outsideTouchBehavior={OUTSIDE_TOUCH_BEHAVIOR.PassThrough}\n  onOutsidePress={() => {\n    setVisible(false);\n  }}\n>\n  {children}\n</Popup>\n```\n\nThe first child is treated as the popup content hit area. Put visible styling,\nsize, and position on the child, not on `Popup`.\n\n```tsx\n<Popup visible={visible} style={StyleSheet.absoluteFill}>\n  <Pressable style={styles.popupContent}>\n    <Text>Popup</Text>\n  </Pressable>\n</Popup>\n```\n\nSupported outside touch behaviors:\n\n| Behavior | Outside press | Native dismiss | Pass through |\n| --- | --- | --- | --- |\n| `OUTSIDE_TOUCH_BEHAVIOR.None` | emits `onOutsidePress` | no | no |\n| `OUTSIDE_TOUCH_BEHAVIOR.PassThrough` | emits `onOutsidePress` | no | yes |\n\n## Dismissal and animation\n\nDismissal is userland state. To dismiss on outside press, update `visible` from\nyour callback:\n\n```tsx\n<Popup\n  visible={visible}\n  outsideTouchBehavior={OUTSIDE_TOUCH_BEHAVIOR.PassThrough}\n  onOutsidePress={() => setVisible(false)}\n>\n  {children}\n</Popup>\n```\n\nFor exit animations, keep the popup mounted until the animation finishes. Do not\nset `visible={false}` immediately if you still need the native host alive for the\nanimated content.\n\n## Documentation\n\n- [Popup architecture guide](docs/popup-guide.html)\n\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","readmeFilename":"README.md","_rev":"1-1c48624f432992efbab49acb23c9445d"}