JSBridge callback in kotlin

[farhazulMullick]

How can a JsNative call kotlin methods with the JSBridge provided?

ex: If i wanted to call a method let's say hello() on button click in website, how i am going to get its callback in kotlin?

[KevinnZou]

@farhazulMullick Hi, do you mean you want to make a call to Kotlin when a Button in the JS is clicked? If so, you can refer to this for example.

[farhazulMullick]

[]

For example: I want to get callback when this "Call Us" button is clicked.

// created this handler class
class PhoneDialerHandler: IJsMessageHandler {
    override fun methodName() = "openDialer"

    override fun handle(
        message: JsMessage,
        navigator: WebViewNavigator?,
        callback: (String) -> Unit
    ) {
       // this log is never executed when i click the "openDialer" button.
        Napier.i { "PhoneDialerHandlerTest :: ${message.params}" }
    }
}
// registered in launcheff.
 LaunchedEffect(key1 = Unit) {
        // register JSBridge message handler.
        jsBridge.register(handler = PhoneDialerHandler())
    }
    
    Also passd this bridge to webView.

[KevinnZou]

@farhazulMullick Thank you for providing the information. It seems that the setup on the Native side is correct. Have you called the window.kmpJsBridge.callNative("openDialer","") function on the JS side when the button is clicked?

If the handler is still not called, please open the debug log as shown below and attach the outputs. This will help me verify if the init JsBridge code is injected correctly.

webViewState.webSettings.apply {
  logSeverity = KLogSeverity.Debug
}

[farhazulMullick]

Hey @KevinnZou thanks for informing. After digging the library code later i came to know that to use this lib's jsBrigde feature one has to call the window.kmpJsBridge.callNative("openDialer","") on the Frontend side.

But challege is our front-end web is deployed on production used by native andorid/ios (bridge is different)and along with this we are developing a new kmm app.

So. i think i have to fork the project and do my own implementations.

Thanks.

[KevinnZou]

@farhazulMullick I think I understand your issue. This is indeed a problem, so I am considering opening up the ability to customize the calling method name for the JavaScript side, so that you can maintain consistency with existing non-KMM projects. However, I can only open up the customization of the method name itself, specifically the window.kmpJsBridge.callNative part. As for the method signature, it may not be possible to customize it, meaning it must be in this form: function (methodName, params, callback) {}.

Of course, if your project is a mature commercial project, forking my project to support customization of the jsbridge calling details would be a better option. Feel free to reach out to me if you have any questions. Thank you for your feedback!

[farhazulMullick]

@KevinnZou
How you implemented for returning any object after method call form Native(Andorid/iOS) to JS?
Can you explain with little example. Did not find any example in samples

[KevinnZou]

@farhazulMullick You can refer to this part. I inject an onCallback method which will trigger the callback saved in callNative. Then, I just need to call this method by evaluateJavascript on the Native side to return the result to JS.