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:

1. Add a folder for your custom plugins placed in your app/ folder:

    +-- project/
    |   +-- android
    |   +-- ios
    |   +-- app/
    |   |   +-- plugins
   

2. Add the CustomPlugin.js file to the newly created folder

3. Once 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:

1. Expand the Project panel on the left of Android Studio and select your app module.

2. 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
   

3. 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:

1. Select your app target in the left navigation panel.

2. Create a New Group (⌥⌘N) and name it plugins-- this will serve as a hub for the .swift component of your custom plugins.

3. Add the CustomPlugin.swift file to the newly created group.

4. Import the Astro framework to CustomPlugin.swift using the following syntax: import Astro.

5. In AppDelegate.swift, register the custom plugin using the pluginRegistrar object within the registration block that is passed to the AstroViewController's initialization':

    astroViewController = AstroViewController(appJSURL: URL(string: "app.js")!, launchOptions: launchOptions) { pluginRegistrar in
        pluginRegistrar.registerPlugin(name: "CustomPlugin", type: CustomPlugin.self)
        ...
    })