How to call functions in android and iOS swift from javascript in similar way

Calling Native Functions from JavaScript in Android and iOS

This article explores how to invoke native functions (Android Java and iOS Swift) from JavaScript within your hybrid mobile application. We’ll cover similar approaches for both platforms, allowing you to streamline your development process and leverage platform-specific features.

The Bridge: Connecting JavaScript to Native Code

To enable JavaScript communication with native code, we need a bridge or intermediary. Popular choices include:

• React Native: Provides a JavaScript bridge built-in, simplifying communication.
• Cordova/PhoneGap: Uses a JavaScript plugin architecture for interacting with native functionalities.
• Ionic: Relies on Cordova’s plugins for native communication.
• Custom Solutions: If using a different framework, consider building a custom bridge with JavaScript APIs and native bindings.

Android (Java)

Setting up the Bridge

For demonstration purposes, we’ll assume using Cordova. Follow these steps:

• Create a Cordova Plugin: Develop a plugin with a Java class implementing the bridge logic.
• Define Plugin Interface: Define JavaScript functions exposed to your webview using @JavascriptInterface annotation.

Example: Sum Calculation Plugin

// Plugin Class:
public class SumPlugin extends CordovaPlugin {

    @JavascriptInterface
    public int sum(int a, int b) {
        return a + b;
    }
}

JavaScript Interaction

// JavaScript:
cordova.plugins.SumPlugin.sum(5, 3)
.then(function(result) {
  console.log("Sum:", result); // Output: Sum: 8
});

iOS (Swift)

Setting up the Bridge

Using Cordova for iOS:

• Create a Cordova Plugin: Implement a Swift class handling bridge communication.
• Declare Bridge Functions: Define functions within the Swift class that JavaScript can call.

Example: Device Information Plugin

// Plugin Class:
@objc(DeviceInfoPlugin)
public class DeviceInfoPlugin : CDVPlugin {

    @objc(getDeviceName:)
    public func getDeviceName(command: CDVInvokedUrlCommand) {
        let deviceName = UIDevice.current.name
        let pluginResult = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: deviceName)
        command.success(pluginResult)
    }
}

JavaScript Interaction

// JavaScript:
cordova.plugins.DeviceInfoPlugin.getDeviceName()
.then(function(result) {
  console.log("Device Name:", result);
});

Comparison

Here’s a tabular comparison of key aspects:

Conclusion

Calling native functions from JavaScript in Android and iOS involves similar concepts, focusing on a bridge to connect the two worlds. By adopting this approach, you can effectively integrate platform-specific capabilities into your hybrid applications, resulting in a seamless and feature-rich user experience.