Android `injectJavascript` must return `undefined` or it replaces the contents of the WebView

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 7.10.0 Yarn: Not Found npm: 4.5.0 Watchman: 4.7.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: 16.0.0-beta.5 => 16.0.0-beta.5 react-native: 0.49.3 => 0.49.3

Target Platform: Android (broken) and iOS (works)

Steps to Reproduce

1. Create an app with a WebView. Add a ref for the WebView.
2. Use `ref.injectJavaScript(‘x = “test”;’) to inject some JavaScript into the WebView.

Expected Behavior

The JavaScript is executed on the page, without replacing the page.

Actual Behavior

The result of the JavaScript expression replaces the contents of the page.

Reproducible Demo

https://snack.expo.io/Hke6dJFAW (EDIT: fixed URL)

Problem Code

I’m reasonably sure this line is the issue.

Elsewhere in that file, the injected JavaScript is wrapped in an IIFE so that the javascript: URL always evaluates to undefined.

Is the IIFE the complete solution? If so, I can submit a PR. Or are there other considerations (such as the changing scope) that need to be considered?

[treyp]

@ryan-granlund: sure, here’s an example of code i have working in both platforms:

this.webview.injectJavaScript(`
    (function () {
        document.getElementById('exampleTextInput').value = '${inputValue}';
    })();
`);

where this.webview is a ref to a webview (<WebView ref={(el) => {this.webview = el;}} source={{uri: webviewUrl}} />)

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}