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:

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:

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:

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

import { ModalNavigation } from "modal-navigation";

const checkModal = async () => {
  const { open } = await ModalNavigation.isModalOpen();
  console.log("Modal open:", open);
};

Closing a modal programmatically

import { ModalNavigation } from "@capnavigation/modal-navigation";

const closeModal = async () => {
  await ModalNavigation.closeModal();
};

Android Implementation

When showing a modal dialog in Android, call:

ModalNavigationPlugin plugin = getPluginInstance();
plugin.setModal(yourDialog);

iOS Implementation

When presenting a modal view controller in iOS, call:

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

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