How can I run React JS functions in a webview from my Android code?

Question

So I've got a React-Typescript webapp that I am hosting in a WebView in my Android app.

I'm simply trying to pass data from the Android client to the Webview. However the fact that It's a React app that builds with webpack seems to complicated things.

Following the instructions found from this stack response: Passing data from java class to Web View html

I tried to add a function in the Index.tsx and call that from andoird like this:

webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/test.html");
webview.setWebViewClient(new WebViewClient(){
    public void onPageFinished(WebView view, String url){   
        webview.loadUrl("javascript:init('" + theArgumentYouWantToPass + "')");
    }           
});

However it could not find the function. My next thought was to just add it to the Index.Html, however I would then need to store the data in some way that I could reference it from my React code.

I tried using Local Storage like this:

    <script type="text/javascript">
        function init(val)
        {
            window.localStorage.setItem("key", val);
        }
    </script>

I tried this with and w/o the window prefix but both times it gives me an error saying I'm trying to call setItem on a null reference.

Does anybody know how I can send data from Android to my React app?

the following answer doesn't seems a solution for me. did you solve this problem? @Brian C — softmarshmallow
– softmarshmallow, Commented Dec 4, 2019 at 7:58

basarat · Accepted Answer · 2019-01-22 00:21:32Z

1

You need to enable localStorage in the settings (similar to setJavaScriptEnabled) e.g.

webview.getSettings().setDomStorageEnabled(true);

answered Jan 22, 2019 at 0:21

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I run React JS functions in a webview from my Android code?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related