Adding Custom Plugins
Astro comes with pre-packaged plugins, which allow you to initialize native UI components and co-ordinate their state changes using JavaScript.
To add an existing custom plugin to your Astro project with the components named CustomPlugin.js
, CustomPlugin.java
, and CustomPlugin.swift
, follow the instructions detailed below. See how you can write your own custom plugin here.
JS #
We recommended that you add a folder to your project, which will serve as a hub for your app's custom plugins:
- Add a folder for your custom plugins placed in your
app/
folder:+-- project/ | +-- android | +-- ios | +-- app/ | | +-- plugins
Add the
CustomPlugin.js
file to the newly created folderOnce you register the plugin for Android and iOS in the steps below, you will be able import it in
app.js
by specifying the path to the plugin:import Astro from 'mobify-progressive-app-sdk/astro-full' import CustomPlugin from '../plugins/CustomPlugin.js'
Android #
The following steps require having your project opened in Android Studio. You will need to add the CustomPlugin.java
file to the project:
Expand the Project panel on the left of Android Studio and select your app module.
Add a New Package to your java source named
plugins
-- this will serve as a hub for the.java
component of your custom plugins. For example:+-- project/ | +-- android/src/main/java/ | | +-- com/mobify/astro/app/ | | | +-- plugins
- Add the
CustomPlugin.java
file to the newly created package.
iOS #
The following steps require having your app.xcworkspace
open. Similar to Android, you will need to add the CustomPlugin.swift
file to the project and register the plugin:
Select your app target in the left navigation panel.
Create a New Group (⌥⌘N) and name it
plugins
-- this will serve as a hub for the.swift
component of your custom plugins.Add the
CustomPlugin.swift
file to the newly created group.Import the Astro framework to
CustomPlugin.swift
using the following syntax:import Astro
.In
AppDelegate.swift
, register the custom plugin using the pluginRegistrar object within the registration block that is passed to theAstroViewController
's initialization':astroViewController = AstroViewController(appJSURL: URL(string: "app.js")!, launchOptions: launchOptions) { pluginRegistrar in pluginRegistrar.registerPlugin(name: "CustomPlugin", type: CustomPlugin.self) ... })