{"_id":"@arunsmiracle/expo-camera-modal","_rev":"9-cf0e80e24d73a6b8b24940300404e3e6","name":"@arunsmiracle/expo-camera-modal","dist-tags":{"latest":"2.0.2"},"versions":{"1.0.0":{"name":"@arunsmiracle/expo-camera-modal","version":"1.0.0","keywords":["react-native","expo","camera","modal","image-picker","expo-camera","expo-media-library","android-permissions","android-16"],"author":{"name":"Arun Sekar"},"license":"ISC","_id":"@arunsmiracle/expo-camera-modal@1.0.0","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"dist":{"shasum":"622f1a079676010e8d5de19eee964f7c30502916","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.0.0.tgz","fileCount":5,"integrity":"sha512-8aI+wKsUI0VLDvSjjB4kIGtvPkafFWOFIC019yrBKZQsbdqnfNHWVij5uO9+8Bd08AEXClqGpXTLMsNiGWsbxQ==","signatures":[{"sig":"MEYCIQCBHNMRS/yJgC/7f4idmxldsIsbjA77fYhVm4Mfx3HrYQIhAN2ftQX4Wbc/Jg8wYh/d49cXZ+w006+RXYqonFfaPuLS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6547},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"_npmVersion":"11.2.0","description":"A reusable camera modal for Expo apps to solve the Android 16 Permissions bug.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"*","react-native":"*","expo-media-library":"*","react-native-feather":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.0.0_1759581155086_0.03949783722457689","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arunsmiracle/expo-camera-modal","version":"1.0.1","keywords":["react-native","expo","camera","modal","image-picker","expo-camera","expo-media-library","android-permissions","android-16"],"author":{"name":"Arun Sekar"},"license":"ISC","_id":"@arunsmiracle/expo-camera-modal@1.0.1","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"dist":{"shasum":"1a6bf9228896f29099ba446edfeba4cbe608debd","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.0.1.tgz","fileCount":5,"integrity":"sha512-Jm6CDssP65mZR1nTmSPdLfumHxMxfXTcNUULsoqz9fSv2FVMTZA5qn4G4yTtZwpf+cKJePqZ9QLELduHzZeBzw==","signatures":[{"sig":"MEUCIFpUjVD8CjuXvilWXsTZ4s4CVv8TSYzxanWSaJ//SVA5AiEA3mhQszzDCOAVV2Js18gW55WSTS+tkibA9JV+XrS28nw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6570},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"_npmVersion":"11.2.0","description":"A reusable camera modal for Expo apps to solve the Android 16 Permissions bug.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"*","react-native":"*","expo-media-library":"*","react-native-feather":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.0.1_1759581350178_0.761641673357246","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@arunsmiracle/expo-camera-modal","version":"1.0.2","keywords":["react-native","expo","camera","modal","image-picker","expo-camera","expo-media-library","android-permissions","android-16"],"author":{"name":"Arun Sekar"},"license":"ISC","_id":"@arunsmiracle/expo-camera-modal@1.0.2","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"dist":{"shasum":"198641a770ddfb388040e9e38c87599db566807b","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.0.2.tgz","fileCount":5,"integrity":"sha512-e/dU0j/0NhJoTXokv+RDvi0OC1nbzWknyteodWLeMGv3LKK2iEEI2cRnWsfwvvpTWGa/lKin8rTNtnmx1Aif3A==","signatures":[{"sig":"MEUCIBYPwKt6q7QVd3bkV2h5ubtJ0uCmSEEBiO07tBPZTxF2AiEA9fxC++czYv6lXzHZnFiyXWV6VdQM0y/yK6fMHxXzotc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6570},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"_npmVersion":"11.2.0","description":"A reusable camera modal for Expo apps to solve the Android 16 Permissions bug.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"*","react-native":"*","expo-media-library":"*","react-native-feather":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.0.2_1759581853677_0.8505230457824933","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@arunsmiracle/expo-camera-modal","version":"1.0.3","keywords":["react-native","expo","camera","modal","image-picker","expo-camera","expo-media-library","android-permissions","android-16"],"author":{"name":"Arun Sekar"},"license":"ISC","_id":"@arunsmiracle/expo-camera-modal@1.0.3","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"dist":{"shasum":"dcf3e7962771041b7c96fee70cd657cb2adf3ded","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.0.3.tgz","fileCount":5,"integrity":"sha512-U4cCiqtrx+X6a+edvRnbpuJeDA+MtxmAxupDptuxOgm3DXi+nwjrdeDYPoQy1w143SDC3wphgPjlMvSg4rXEeA==","signatures":[{"sig":"MEQCIEErqnAOxhjsdhC0jyArf/ogy6HVips8OMBeCCJh1+4VAiA8CCaBsqGTcH8E/UKsVm5ZCJs1zaznVPg0MUiK5/wvig==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9852},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"_npmVersion":"11.2.0","description":"A reusable camera modal for Expo apps to solve the Android 16 Permissions bug.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"*","react-native":"*","expo-media-library":"*","react-native-feather":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.0.3_1759582183090_0.9800222680499675","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@arunsmiracle/expo-camera-modal","version":"1.0.4","keywords":["react-native","expo","camera","modal"],"author":{"name":"Arun Sekar"},"license":"MIT","_id":"@arunsmiracle/expo-camera-modal@1.0.4","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"homepage":"https://github.com/aroonsekar/expo-camera-modal#readme","bugs":{"url":"https://github.com/aroonsekar/expo-camera-modal/issues"},"dist":{"shasum":"b43cc5cb6aa0e67203777a9796bf26356da75fd8","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.0.4.tgz","fileCount":5,"integrity":"sha512-1jTmdZ03cilTwQ/fgGsOrXcy+ew4N0hA0G4dQpyusUujwwSBX1wE6Ljd3edvjuiSmErD80MHq1ku0FFJe2MB8g==","signatures":[{"sig":"MEUCIQDJP4AzxgC4RgoyHo0mevZyic3QJpzFbSJvWxUovZ5d8wIgCrFHnD6flc7TZ1O+63vKqXqtaqD86e7Ae/BWHYVU0R8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11688},"main":"index.js","gitHead":"127506a74ce7f067f9b56c2072b16f8db73b8e99","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"repository":{"url":"git+https://github.com/aroonsekar/expo-camera-modal.git","type":"git"},"_npmVersion":"11.2.0","description":"A reusable, full-screen camera modal for React Native and Expo projects.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"expo-camera":"~17.0.8","expo-media-library":"~18.2.0","react-native-feather":"^1.1.2"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.0.4_1759586067222_0.7205631900074638","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@arunsmiracle/expo-camera-modal","version":"1.1.0","keywords":["react-native","expo","camera","modal"],"author":{"name":"Arun Sekar"},"license":"MIT","_id":"@arunsmiracle/expo-camera-modal@1.1.0","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"homepage":"https://github.com/aroonsekar/expo-camera-modal#readme","bugs":{"url":"https://github.com/aroonsekar/expo-camera-modal/issues"},"dist":{"shasum":"8965969d37744329e8dfa492d26e6a04e71c1c96","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.1.0.tgz","fileCount":5,"integrity":"sha512-O12EiM68uXng/35bidagRfnIKt1lj+efmHxXMx/A617DK+alMQ8v2r2I1sYjBAKga89UXLSsOjkUAtLXW2KRlQ==","signatures":[{"sig":"MEQCICy1yxx2V5fE2b4wq9NR20mrZmpTyFhXYxvCtT0rVSOxAiATm+92hW3I/OweaCeHUQwBiqQtOgBxB0NmZYEZpDtceA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14277},"main":"index.js","gitHead":"127506a74ce7f067f9b56c2072b16f8db73b8e99","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"repository":{"url":"git+https://github.com/aroonsekar/expo-camera-modal.git","type":"git"},"_npmVersion":"11.2.0","description":"A reusable, full-screen camera modal for React Native and Expo projects.","directories":{},"_nodeVersion":"22.14.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"~17.0.8","react-native":"*","expo-media-library":"~18.2.0","react-native-feather":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.1.0_1761657987220_0.7262277342448475","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@arunsmiracle/expo-camera-modal","version":"1.2.0","keywords":["react-native","expo","camera","modal"],"author":{"name":"Arun Sekar"},"license":"MIT","_id":"@arunsmiracle/expo-camera-modal@1.2.0","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"homepage":"https://github.com/aroonsekar/expo-camera-modal#readme","bugs":{"url":"https://github.com/aroonsekar/expo-camera-modal/issues"},"dist":{"shasum":"281857cf5c3a84722f26a4eaee32da9c42998f71","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-1.2.0.tgz","fileCount":5,"integrity":"sha512-/0Nz1PeDaccruT36HS6DA3V6QMC46fnyjuwWP93rsf3+YroeLKKghJbPPN9JjerzLi6KuTbozvqIUFdOSyVUkg==","signatures":[{"sig":"MEUCIQDqCw7Vo/2JyaYAeSO60b4MLvHn1n53qzxEp8n4o9PXKAIgL332h0ClG3Ek810v07oJTzjXpw1E223meCJ5BzWRfRY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13865},"main":"index.js","gitHead":"096751b87bb25c88d4f463f3e8b9a9510e29bec8","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"repository":{"url":"git+https://github.com/aroonsekar/expo-camera-modal.git","type":"git"},"_npmVersion":"11.2.0","description":"A reusable, full-screen camera modal for React Native and Expo projects.","directories":{},"_nodeVersion":"22.14.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"~17.0.8","react-native":"*","react-native-feather":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_1.2.0_1761679085615_0.5114126141424091","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@arunsmiracle/expo-camera-modal","version":"2.0.1","keywords":["react-native","expo","camera","modal"],"author":{"name":"Arun Sekar"},"license":"MIT","_id":"@arunsmiracle/expo-camera-modal@2.0.1","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"homepage":"https://github.com/aroonsekar/expo-camera-modal#readme","bugs":{"url":"https://github.com/aroonsekar/expo-camera-modal/issues"},"dist":{"shasum":"ab7dbecb7ff36a667f0b927e267d447280483947","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-2.0.1.tgz","fileCount":11,"integrity":"sha512-ZnWGC/9TnRc5t9HJZ+N1Aq9i58dds9ZPROjKr7UR/VXzHri7sk9bofKP8M/RihlEvZCsWn4nDk9McWyyPDWstg==","signatures":[{"sig":"MEUCIC9ilhSfNf+86NMM0iTo1LAsVJ315jf0ws9ORFnztRfyAiEAxbKzSTXZawEUmWYh1JgDTXDOBzxg+L+9BGRWhfCcH5g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24518},"main":"index.js","gitHead":"459d6d2edc6dea95ee43cb635285f14267f7ee74","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"repository":{"url":"git+https://github.com/aroonsekar/expo-camera-modal.git","type":"git"},"_npmVersion":"11.2.0","description":"A reusable, full-screen camera modal for React Native and Expo projects.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"peerDependencies":{"react":"*","expo-camera":"^55.0.0","react-native":"*","expo-media-library":"^55.0.0","react-native-feather":"^1.1.2","react-native-safe-area-context":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/expo-camera-modal_2.0.1_1774974366549_0.8617526027010829","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@arunsmiracle/expo-camera-modal","version":"2.0.2","description":"A reusable, full-screen camera modal for React Native and Expo projects.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/aroonsekar/expo-camera-modal.git"},"keywords":["react-native","expo","camera","modal"],"author":{"name":"Arun Sekar"},"license":"MIT","bugs":{"url":"https://github.com/aroonsekar/expo-camera-modal/issues"},"homepage":"https://github.com/aroonsekar/expo-camera-modal#readme","peerDependencies":{"react":"*","react-native":"*","expo-camera":"^55.0.0","expo-media-library":"^55.0.0","react-native-feather":"^1.1.2","react-native-safe-area-context":"^5.0.0"},"_id":"@arunsmiracle/expo-camera-modal@2.0.2","gitHead":"459d6d2edc6dea95ee43cb635285f14267f7ee74","_nodeVersion":"22.14.0","_npmVersion":"11.2.0","dist":{"integrity":"sha512-PQ75EklRG2t/h5m3ui9cHW6nCCYnRG98sgWuRwRMgnimbr6dWM27JRD5ZyQ1yeHS7yx+bFFhKeOoi9Hg4fysLw==","shasum":"fc15dc71302e554596ccd637fc5f9570de1aa1ca","tarball":"https://registry.npmjs.org/@arunsmiracle/expo-camera-modal/-/expo-camera-modal-2.0.2.tgz","fileCount":11,"unpackedSize":24595,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCuId/hEnoRcR6/YdCcb2uyY4xRo01iSOp2mXbP7iSQjwIhAIiJAtd6JcZedZOipT/CJcCf5SLJ0d/Wi8yj9jfAHTgs"}]},"_npmUser":{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"},"directories":{},"maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/expo-camera-modal_2.0.2_1774974702210_0.24896093894445537"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-04T12:32:35.028Z","modified":"2026-03-31T16:31:42.480Z","1.0.0":"2025-10-04T12:32:35.284Z","1.0.1":"2025-10-04T12:35:50.377Z","1.0.2":"2025-10-04T12:44:13.893Z","1.0.3":"2025-10-04T12:49:43.301Z","1.0.4":"2025-10-04T13:54:27.419Z","1.1.0":"2025-10-28T13:26:27.425Z","1.2.0":"2025-10-28T19:18:05.800Z","2.0.1":"2026-03-31T16:26:06.736Z","2.0.2":"2026-03-31T16:31:42.362Z"},"bugs":{"url":"https://github.com/aroonsekar/expo-camera-modal/issues"},"author":{"name":"Arun Sekar"},"license":"MIT","homepage":"https://github.com/aroonsekar/expo-camera-modal#readme","keywords":["react-native","expo","camera","modal"],"repository":{"type":"git","url":"git+https://github.com/aroonsekar/expo-camera-modal.git"},"description":"A reusable, full-screen camera modal for React Native and Expo projects.","maintainers":[{"name":"arunsmiracle","email":"arunsmiracle@gmail.com"}],"readme":"# Expo Camera Modal\n\nA reusable, full-screen camera modal for React Native and Expo projects, built with `expo-camera` and `expo-media-library`. This component is designed to provide a stable, cross-platform camera experience and to work around known bugs related to `expo-image-picker` on Android.\n\n## Installation\n\nTo install the package, run the following command in your project's terminal:\n\n```\nnpm install @arunsmiracle/expo-camera-modal\n```\n\n## Peer Dependencies\n\nThis package does not bundle its own versions of core libraries to avoid versioning conflicts in your project. You must have the following packages already installed in your `package.json`:\n\n- `react`\n\n- `react-native`\n\n- `expo-camera`\n\n- `expo-media-library`\n\n- `react-native-feather`\n\n\n## Tested Environment\n\nThis package has been tested and is confirmed to work with the following environment and package versions:\n\n- **`expo`**: `~54.0.11`\n\n- **`react`**: `19.1.0`\n\n- **`react-native`**: `0.81.4`\n\n- **`expo-camera`**: `~17.0.8`\n\n- **`expo-media-library`**: `~18.2.0`\n\n- **`react-native-feather`**: `^1.1.2`\n\n\n## Usage\n\nUsing the modal is a two-step process: requesting permissions on app startup and then implementing the modal component in your screens.\n\n### 1. Request Permissions on App Startup\n\nFor the best user experience, your app should request the necessary permissions when it first launches. This package does not request permissions itself; it only checks if they have been granted.\n\nIn your main **`App.js`** file or wherever you add the permissions, add the following `useEffect` hook:\n\n```\nimport React, { useEffect } from 'react';\nimport { Camera } from 'expo-camera';\nimport * as MediaLibrary from 'expo-media-library';\n\nconst App = () => {\n useEffect(() => {\n const requestPermissions = async () => {\n try {\n await Camera.requestCameraPermissionsAsync();\n await MediaLibrary.requestPermissionsAsync();\n } catch (e) {\n console.error(\"Error requesting initial permissions\", e);\n }\n };\n\n requestPermissions();\n }, []); // The empty array ensures this runs only once.\n\n // ... rest of your App component\n};\n```\n\n#### **Important Note on Permission Handling**\n\nOn Android 16, after the September 5 update, It is critical to request permissions at the top level of your application (e.g., in `App.js`) and **not** inside other functions or event handlers.\n\nRequesting a permission (like `Notifications.requestPermissionsAsync()`) triggers a system-level dialog that pauses your app's JavaScript thread. If this is done in the middle of another function, it can cause that function to hang or fail unexpectedly, leading to a poor user experience where the app seems to freeze.\n\n**Example of what to avoid:** Notice how the permission request is commented out in the helper function below. This is the correct approach. The permissions should already be granted _before_ this function is ever called.\n\n```\nimport * as Notifications from \"expo-notifications\";\n\nexport const scheduleBreakNotifications = async (shiftStartTime) => {\n // DO NOT DO THIS HERE: This will cause a delay and a poor UX.\n // const { status } = await Notifications.requestPermissionsAsync();\n // if (status !== \"granted\") {\n // return;\n // }\n\n // ... rest of the function\n};\n```\n\nBy handling all permissions on startup, you ensure your app's logic runs smoothly without being interrupted by permission dialogs.\n\n### 2. Implement the Modal in Your Screen\n\nOnce permissions are handled, you can import and use the `CameraModal` component anywhere in your app.\n\nHere is an example of how to use it to capture and display a profile picture:\n\n```\nimport React, { useState } from 'react';\nimport { View, Button, Image, StyleSheet } from 'react-native';\nimport CameraModal from '@arunsmiracle/expo-camera-modal';\n\nconst ProfileScreen = () => {\n const [isModalVisible, setModalVisible] = useState(false);\n const [profilePicture, setProfilePicture] = useState(null);\n\n const handlePictureTaken = (uri) => {\n console.log('Image captured at:', uri);\n setProfilePicture(uri);\n // The modal closes itself, so we just need to sync our state\n setModalVisible(false);\n };\n\n return (\n \n