ReactJS communicate with Webview in Native Android ('Android' is not defined no-undef)

Question

I have written web part in ReactJS (not React Native - very important). I have also simple Android application, that contains a WebView, where I'm opening a website that is running on ReactJS. Is there a proper way to communicate between the Android native WebView (that opens a ReactJS website) and a ReactJS website?

I already went through this Facebook React Native Communication, but that is a model case for React Native. That means, that is useless in the native Android app extending an Activity by ReactActivity and so on...

This is the ReactJS source code, where I wanted to perform a JS call Mobile.showToast("Test") (not just here, in many .tsx files), but it didn't compile. The compile error is 'Mobile' is not defined no-undef:

import * as React from "react";
import {
  Button,
} from "components";

class Login extends React.PureComponent {
  public render() {
    return (
      <Fullscreen>
        <Content>
          <Button onClick={this.handleRedirect} fullWidth>
        </Content>
      </Fullscreen>
    );
  }

  private handleRedirect = () => {
    //Here I wanted to call JS call for Android JavascriptInterface interrogation
    Mobile.showToast("Test");
  };
}

export default Login;

And this is source code for appending javascriptInterface + JS calls (in this example only call is showToast):

webView.addJavascriptInterface(new MobileAppInterface(getContext()), "Mobile");


import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class MobileAppInterface {

    Context mContext;

    /**
     * Instantiate the interface and set the context
     */
    public MobileAppInterface(Context c) {
        mContext = c;
    }

    /**
     * Show a toast from the web page
     */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

What sort of information do you want to "communicate". As a WebView, it should conform to whatever HTML standards that it supports. So if you want geolocation information, then you should request the "browser" give it to you, it just so happens that the "browser" is a WebView. — ACVM
– ACVM, Commented Oct 3, 2018 at 0:27
I figured out how to address this issue. The runtime error in your React Javascript file is probably 'Mobile' is not defined no-undef. If so, please see my solution below. — VIN
– VIN, Commented Feb 2, 2019 at 1:54

VIN · Accepted Answer · 2019-04-19 16:19:46Z

12

In your React method, since you named your JavascriptInterface "Mobile", you will need to modify your method to use window.Mobile.showToast("Test"); since the interface is exported to the global window object:

class Login extends React.PureComponent {

    ...

    private handleRedirect = () => {
        if (window.Mobile)
            window.Mobile.showToast("Test");
    };
}

If, for example, you named your JavascriptInterface "Android",

webView.addJavascriptInterface(new MobileAppInterface(getContext()), "Android");

then your method body would need to be the following:

class Login extends React.PureComponent {

    ...

    private handleRedirect = () => {
        if (window.Android)
            window.Android.showToast("Test");
    };
}

Source

Global window object https://developer.mozilla.org/en-US/docs/Glossary/Global_object

edited Apr 19, 2019 at 16:19

answered Feb 2, 2019 at 1:51

VIN

7,0548 gold badges45 silver badges92 bronze badges

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

3 Comments

Mike Ebert Over a year ago

Thank you so much for providing this answer, it is literally the only one I could find on the Internet (I used both Google and Bing to multiple pages deep)! Is there a link where the "exported to the global window object" behavior is documented? That might be one tiny thing that would improve your answer. Thanks again!

VIN Over a year ago

Glad the answer helped you @MikeEbert. An upvote would be appreciated.

Junia Montana Over a year ago

How to read data that are being sent from Android into ReactJs?

Collectives™ on Stack Overflow

ReactJS communicate with Webview in Native Android ('Android' is not defined no-undef)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related