UNPKG

modal-navigation

Version:

CapacitorJS plugin to handle modal navigation and back button behavior.

127 lines (79 loc) 2.83 kB
# modal-navigation Capacitor plugin for managing modal navigation with back button handling on Android/iOS ## Features - Detects if a modal is open - Closes modal on back button press (Android/iOS) - Prevents back navigation from affecting the underlying page when modal is open ## Installation ### 1. From npm (recommended) Once published to npm, install with: ```sh npm install modal-navigation npx cap sync ``` If you see an error like "Could not find package in npm registry", ensure the package is published and the name matches the npm registry entry. You can check the npm page at https://www.npmjs.com/package/modal-navigation ### 2. From GitHub (alternative) If not yet published to npm, you can install directly from GitHub: ```sh npm install github:YOUR_GITHUB_USERNAME/cap-navigation-modal npx cap sync ``` Replace `YOUR_GITHUB_USERNAME` with your actual GitHub username. ### 3. Local install (development) If you want to test locally before publishing: ```sh npm install /absolute/path/to/cap-navigation-modal npx cap sync ``` ## Usage 1. Implement modal presentation logic in your app 2. The plugin will automatically handle back button presses when modals are open ### Checking if modal is open ```typescript import { ModalNavigation } from "modal-navigation"; const checkModal = async () => { const { open } = await ModalNavigation.isModalOpen(); console.log("Modal open:", open); }; ``` ### Closing a modal programmatically ```typescript import { ModalNavigation } from "@capnavigation/modal-navigation"; const closeModal = async () => { await ModalNavigation.closeModal(); }; ``` ### Android Implementation When showing a modal dialog in Android, call: ```java ModalNavigationPlugin plugin = getPluginInstance(); plugin.setModal(yourDialog); ``` ### iOS Implementation When presenting a modal view controller in iOS, call: ```swift let plugin = bridge.getPlugin("ModalNavigation") as! ModalNavigationPlugin plugin.setModal(modal: yourViewController) ``` # modal-navigation ## Demo 1. Install the plugin in your Capacitor project 2. Implement modal presentation logic in your app 3. The plugin will automatically handle back button presses when modals are open ## API ### isModalOpen() Returns: Promise<{ open: boolean }> ### closeModal() Returns: Promise<void> ## Troubleshooting If you encounter issues with modal navigation, ensure that: - The plugin is correctly installed and synced with your Capacitor project. - Modal dialogs are properly set using the `setModal` method. - The app has necessary permissions for modal operations. ## FAQ **Q: How do I check if a modal is open?** A: Use the `isModalOpen()` method to check the modal status. **Q: How do I close a modal programmatically?** A: Use the `closeModal()` method to close the modal. ## License MIT