question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

injectedJavaScript prop does not working properly on iPhone

See original GitHub issue

Bug description: I want to catch email address when login button clicked. My code is working well on my android, but not on iPhone. injectedJavaScript prop does not working properly on iPhone.

To Reproduce: This code is working well on android, but not for iPhone.

handleOnMessage = (event) => {
  console.log(event.nativeEvent.data);
};

...
render() {
    const INJECTED_JAVASCRIPT = `
      try {
        var loginBtn = document.evaluate("//*[@id='root']/div[2]/div[2]/div/div[4]/button[1]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        loginBtn.onclick = function() {
          var email = document.getElementById("email").value;
          window.ReactNativeWebView.postMessage(JSON.stringify({email: email}));
        };true;      
      } else {
        window.ReactNativeWebView.postMessage(JSON.stringify({error: "Why catch error"}));
      }`;

    return (
      <WebView
        ref={(r) => (this.webref = r)}
        source={{uri: this.state.url}}
        injectedJavaScript={INJECTED_JAVASCRIPT}
        onMessage={this.handleOnMessage}
        startInLoadingState={true}
        renderLoading={() => <Text>Loading...</Text>}
      />
    );
}

After running app, console logged “Why catch error”. Finally I found loginBtn is null, but not sure why. I was held with this issue for 3 days. It will be great if anybody can help me.

Expected behavior: I get expected result “email: myemail@mail.com” on my android and it should be same on iPhone.

Screenshots/Videos:

Environment:

  • OS: MacOS
  • OS version: 10.15.3
  • react-native version: 0.62.1
  • react-native-webview version: 9.1.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Great-hijackcommented, Apr 10, 2020

@shirakaba Thank you It works but only one time. If I input wrong credential and try again, it doesn’t return expected result. I mean I get null onward 2nd attempts. about 2500, is it a magic number? why 2500? what about 1000 or 3000?

0reactions
github-actions[bot]commented, Jun 10, 2020

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

Read more comments on GitHub >

github_iconTop Results From Across the Web

injectedJavaScript is not working in IOS · Issue #1779 - GitHub
I am using "injectedJavaScript" in webview, this property is working fine in android but not working in ios. Code import React, { Component...
Read more >
why react native webview injectedJavascript doesn't work on ...
I try to call a function from injectedJavascript of webview , in android it works fine , but on IOS it didn't work...
Read more >
WebView - React Native Archive
Function that accepts a string that will be passed to the WebView and executed immediately as JavaScript. Type, Required. function, No. injectedJavaScript. Set ......
Read more >
react-native-webview - npm
9.0.0 - props updates to injectedJavaScript are no longer immutable. 8.0.0 - onNavigationStateChange now triggers with hash url changes; 7.0.1 - ...
Read more >
WebView · React Native
View props. ... Reference. Props. scalesPageToFit. Sets whether the webpage scales to fit the view and the user can change the scale. ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found