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>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.
Share Improve this question edited Jun 27, 2018 at 6:29 Kevin Ghaboosi 6261 gold badge10 silver badges20 bronze badges asked Apr 16, 2018 at 12:22 jellybeanjellybean 352 gold badges3 silver badges9 bronze badges2 Answers
Reset to default 2Any JavaScript React application you write can be loaded into the Android WebView. Just try following the basic tutorials at https://reactjs/. 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 mand:
browser-sync start --server --https
To install browser-sync, follow the instructions at https://browsersync.io/
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 pose a rich mobile UI from declarative ponents."
You wouldn't need the Android WebView in order to use React Native.