Setup

To get started install the GoNative Bubble Plugin in the Bubble app editor via Plugins -> Add Plugins -> GoNative Plugin.

Drag the "GoNative Plugin" element from the "Elements" section and drop it on the page that requires access to GoNative JavaScript Bridge. The purpose of this element is to initialize the GoNative JavaScript Bridge Library so that commands can be executed on page load as shown in the following section.

Execute command on page load

To execute a GoNative JavaScript Bridge command on page load, click the "GoNative Plugin" element that you just dropped on the page and insert your desired JavaScript into the text input captioned "GoNative Library Ready Custom Script" as shown below:

Execute command as a workflow/action

Suppose we need to set brightness of the device to 80% when user clicks a button. To accomplish this, drag a button from the "Elements" section on your page and change its name to "Set Brightness" or as desired:

Once the button is created, click "Start/Edit workflow" and you will see the following page:

To assign a GoNative JavaScript Bridge command to the click event of this button, click on "Click here to add an action" to view the list of various actions. Select Plugins -> GoNative Screen Brightness as shown below:

The final step in configuring a workflow/action is to modify the action as required. In our case, we will set the Brightness value to 0.8 and set the "Restore on navigation" field to "no" as shown below:

When a user clicks this button within your app, the GoNative Bubble plugin will run the corresponding GoNative JavaScript command and set the screen brightness to 80%.

Dynamic value

You can also assign a dynamic value to the brightness field so that it takes the value of an element as its input.

The dynamic value can be a text input or a slider or any one of the elements from which a value can be read. For instance, to set the dynamic value as a slider value, drag and drop a "Slider Input" element from the "Elements" section to your page. Since the acceptable brightness values in GoNative apps is between 0 and 1, set the min and max values of the slider element to 0 and 1 respectively and set the "Step" to 0.1 as shown below:

Once the Slider Input element is configured, go to the "Workflow" section and create a new event to trigger when your slider's value is changed. Choose the "An input's value is changed" option and then select your slider element:

Now add an action to the slider and select Plugins -> GoNative Screen Brightness. If you click on the "Brightness" field, you will see the option "Insert dynamic data" as shown below:

After clicking the option, you will see a list of all elements that you have in your page. Select your slider element and then choose "This SliderInput's value" to read the element's value.

Once this action is configured, your app will read the brightness value from the slider input when setting the brightness level.

Execute custom JavaScript

To access advanced GoNative JavaScript Bridge functions in a custom script, you can use any plugin that enables JavaScript execution. For instance, you can run any GoNative JavaScript commands via the “Toolbox plugin” which allows you to run JavaScript as a workflow.

Once the plugin is installed, select an element and click "Start/Edit workflow". Create an action and choose Plugins -> Run JavaScript and add your desired javascript to run as shown below:

This plugin can also be used to run AJAX HTTP requests to send data returned from your app via the JavaScript Bridge to your servers or request data from your servers to pass it to your app via the JavaScript Bridge.

Process returned data

📘
Returned data variable
All the data that GoNative returns from the app can be accessed in your custom callback script by the variable named "data".
For example:
document.getElementById("contacts_output").value = JSON.stringify(data);

Some GoNative JavaScript commands return data from the device. For example, the Native Contacts Plugin function to retrieve contacts from the user's address book: gonative.contacts.getAll(). This function returns a JSON object containing the user's contact list that you can send to your server via AJAX calls OR pass it to one of the Bubble's elements such as the "Multiline Input" as seen in the following example.

First, you will need to enable the ID Attribute in your elements by going to Settings -> General and check the option "Expose the option to add an ID attribute to HTML elements". Now, drag the multiline input element to your page, double-click it and set its ID Attribute (at the very bottom) to a unique string (such as contacts_output).

Note: Since this ID Attribute will be used to identify a unique element in a given page, it has to be a unique string.

Once complete, go to your Workflow section, then open the "GoNative Native Contacts" action you want to read the data from, and paste the custom callback script as shown below. Replace contacts_output with the ID Attribute of your multiline input element. This script will set the value of the element with the ID Attribute contacts_output (in our case, the Multiline Input) to the "stringified" JSON object that the Native Contacts Plugin returned.

774 — GoNative Native Contacts - ID Attribute

Supported commands

The following JavaScript Bridge commands are supported within the Bubble plugin via drag-and-drop actions: