Hybrid App Native‑JS Interaction: How Native Calls JavaScript and JavaScript Calls Native on Android

Mobile applications can be classified into three major categories: Native App (resources stored locally), Web App (UI rendered in a WebView with pages hosted on a server), and Hybrid App (a mix of both, appearing as a native app but containing a WebView that runs a web app).

Hybrid apps combine the smooth user experience of native apps with the cross‑platform development advantages of web apps, allowing developers to reuse most code across platforms and access many system APIs through a wrapper.

Native calling JavaScript

1. Create a WebView instance and bind it to the UI. 2. Call a JavaScript function without parameters and without a return value. 3. Call a JavaScript function without parameters but with a return value (available from Android 4.4 via evaluateJavaScript). 4. Call a JavaScript function with parameters and no return value.

JavaScript calling Native

1. Enable JavaScript in the WebView settings. 2. Define a global bridge object in the native code (e.g., in MainActivity) and annotate exposed methods with @JavascriptInterface. 3. In the HTML/JavaScript, invoke native methods via window.name.methodName() (with or without parameters).

Important notes

Before Android 4.4, only loadUrl could invoke JavaScript; after 4.4, evaluateJavaScript can retrieve return values.

JavaScript execution that takes too long should run on a background thread to avoid ANR (Application Not Responding) errors.

From Android 9 (API 28) onward, cleartext (http) traffic is blocked by default; you must declare the android:usesCleartextTraffic="true" attribute in the application manifest and configure network security settings to load http URLs.

Pitfalls

If the app needs to load http pages, you must add the appropriate permission and manifest attribute; otherwise the WebView will fail to load the content, showing an error due to cleartext traffic restrictions.