This version of Astro is only compatible with Xcode 7.3
Menu

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. Add a new path mapping to the plugins directory in the app/config.js file (recommended):

     require.config({
         paths: {
             'custom-plugins': 'plugins' /* sets 'custom-plugins' as a path alias to 'plugins' */
         },
         ...
     });
    
  4. Once you register the plugin for Android and iOS in the steps below, you will be able require it in app.js as you would any Astro plugin:
     define([
         'astro-full',
         'custom-plugins/CustomPlugin' /* note that you don't need the extension .js here */
     ], function(
         Astro,
         CustomPlugin
     ) {
         var p = CustomPlugin.init();
         ...
     });
    

Android #

The following steps require having your project opened in Android Studio. You will need to add the CustomPlugin.java file to the project and register the plugin:

  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.

  4. In MainActivity.java, register the custom plugin after the Astro plugins:

     pluginManager.register(CustomPlugin.class);
    

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: NSURL(string: "app.js")!, launchOptions: launchOptions) { pluginRegistrar in
         pluginRegistrar.registerPlugin(name: "CustomPlugin", type: CustomPlugin.self)
         ...
     })