modal-navigation
Version:
CapacitorJS plugin to handle modal navigation and back button behavior.
127 lines (79 loc) • 2.83 kB
Markdown
# 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