CODEWITHSUNDEEP
javascriptandroidreactjs
jellybean
jellybean

Reputation: 35

adding ReactJS in android Webview

I am developing an Android native application with WebView. I have used an HTML file to load the WebView and given functionality to the UI elements through javascript by enabling Javascript and adding a Javascript interface.

WebView myWeb=(WebView)findViewById(R.id.webView1);
    myWeb.getSettings().setJavaScriptEnabled(true);
    myWeb.getSettings().setLoadWithOverviewMode(true);
    myWeb.loadUrl("file:///android_asset/webview.html");

    myWeb.addJavascriptInterface(new Object()
    {
        @JavascriptInterface          
        public void recognizeIt(String message)
        {

            Toast.makeText(WebViewActivity.this, message,
                    Toast.LENGTH_LONG).show();
            Intent Intent = new Intent(WebViewActivity.this, StartActivity.class);
            startActivity(Intent);
        }
    }, "Android");

below is my html file.

<html>
    <head>
          <script type="text/javascript">
                function shareIt(toast) {
                   var uname=document.getElementById("message").value;
                   Android.recognizeIt(uname);

                }
        </script>
    </head>
    <body>
        <label id="username"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required id="message">
        <button type="button" onclick="shareIt('message')"> SEND </button>


    </body>
</html>

Now instead of html file, I want to use ReactJS to create UI screens in my app. I tried to search for the same but did not find any samples. I would be very grateful if someone could help / guide me here.

Upvotes: 3

Views: 13626

Answers (2)

Michael Osofsky
Michael Osofsky

Reputation: 13195

Any JavaScript React application you write can be loaded into the Android WebView. Just try following the basic tutorials at https://reactjs.org/. Then host those applications on a web server and you'll be able to load them into your Android WebView.

To make sure the Android WebView is configured properly, you can try loading an existing React application into your WebView. For example, try calling:

myWeb.loadUrl("https://ahfarmer.github.io/calculator/");

Does it load ok? If yes, then your WebView has been configured such that it should be able to show your own React applications.

For a simple way to run a web server to serve files from a directory containing your html file, use the following command:

browser-sync start --server --https

To install browser-sync, follow the instructions at https://browsersync.io/

Upvotes: 2

Michael Osofsky
Michael Osofsky

Reputation: 13195

Instead of writing ReactJS in an Android WebView, you could try writing your whole application in React Native, "React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components."

You wouldn't need the Android WebView in order to use React Native.

Upvotes: 0

Related Questions