React-native: Android `injectJavascript` must return `undefined` or it replaces the contents of the WebView

[dahjelle]

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?

[Jancat]

Meet the same problem. Thanks for temporary solution with return undefined

[treyp]

return; stopped the page from being replaced with the last return value, but I still couldn't get input values to be set. Once I wrapped the code in an IIFE, it worked. Thanks!

[GianniGM]

Same problemi, it's very annoying :(

[ryan-granlund]

@treyp I am struggling to get a work around in place. Are you able to add a code snippet to get input values to work?

[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}

[Jancat]

not fixed in RN 0.54.2

[BlackSword101]

how can we get data from injectJavaScript ? injectedJavaScript={return document.cookie;}

[SiavasFiroozbakht]

@BlackSword101 For returning data the window.postMessage() function can be used. Check this gist for instructions, especially related to cookies.