postMessage from webpage to react-native side does not work for very first moment => container height was not updated

[luatnd]

Hi, I faced a problem on Android only:

If my content has <table> tag, it will render the blank space after the webview and this blank section does not disappear.

As I debugged the render step:

1. WebView was rendered with the calculated height here /node_modules/react-native-render-html-table-bridge/lib/HTMLTable/index.js:88: HTMLTable.computeHeightHeuristic()
2. After webview was rendered => send container size from webpage to react-native, so that react-native can re-render with the correct height: /node_modules/react-native-render-html-table-bridge/lib/HTMLTable/script.js

Deeper dive into /node_modules/react-native-render-html-table-bridge/lib/HTMLTable/script.js: On android: postSize(); was not work at the first time.

My temporary fix: I need to retry it:

postSize();
// I added those 2 lines:
setTimeout(() => postSize(), 5000);
setTimeout(() => postSize(), 10000);

It a hacky way, not a solution. I cannot figure out the root cause, can anyone fix it?

[jsamr]

@luatnd Need more info:

• React native distribution and version? (expo, official)
• On which devices with witch Android version?
• Could you reproduce with an emulator?
• Are you using the latest react-native-webview version?

[luatnd]

Thank you, it seems to appear on Android older versions.

React native distribution and version? (expo, official)

I'm using official, not expo

On which devices with witch Android version?

As I checked:

• Android 9 on Xiao Mi 8 lite => working fine
• Android 5 on Sharp Aquos => has this issue
• Android 5 on Mi 3 => has this issue

Could you reproduce with an emulator?

Yes, here the device info:

Are you using the latest react-native-webview version?

Here the versions

react-native info

  Binaries:
    Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 25, 26, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-pushdy: 0.0.12
    react-native-swift-cli: 2.3.0

yarn.lock

react-native-webview@^9.4.0:
  version "9.4.0"

[jsamr]

@luatnd Thank you for reporting and investigating the issue. For whatever reason, RNWV seems to run the script too early. I see the following hypotheses:

• Incompatible Android version. What hint me is that, according to the output of react-native info, the minimum API Level version is 23. Android API Level version 23 corresponds to Android 6.0.
• Misbehavior in this library. I have just checked the documentation of RNWV again, and they seem to require to append a true line at the very end of the script. Can you try that? See patch file bellow.
• Upstream bug from react-native-webview which has been resolved recently, but you're using an older version (latest is 10.3.2).
• Upstream bug from react-native-webview which has not been resolved. In that case, I suggest you open an issue in their issue tracker.

Patch (that's on the TS source file, not the JS file. So the exact line number will vary):

--- a/src/HTMLTable/script.ts
+++ b/src/HTMLTable/script.ts
@@ -52,5 +52,6 @@ const injectedScript = `

   document.addEventListener('click', interceptClickEvent);
 })();
+true;
 `
 export default injectedScript

[luatnd]

Thanks, tried with "react-native-webview": "^10.3.2" + append true injectedScript without success. Luckily our users rarely use Android 5

[jsamr]

@luatnd I've just looked it up: react-native-webview claims support for minimum API version 16. So I think it would be appropriate to fill a bug in their issue tracker with a minimal reproduction. If you want help with the reproduction, we can work things out together :-)

[jsamr]

@luatnd Can you try again with just-released v0.6.1? I have tried to reproduce with it on a API22 emulator, but it seemed to work, at least with the example/simple app.

[luatnd]

I've just tested 2 versions, it still doesn't work with react-native-render-html-table-bridge@0.6.1 and @native-html/table-plugin@2

[luatnd]

BTW, I cannot reproduce the issue with a blank new project but can reproduce on my real app, I would try to display the table inside the SectionList item tomorrow

[jsamr]

@luatnd Because you reported the issue doesn't appear in a blank new project; are you confident that the cache was reset properly after upgrading, to avoid running outdated cache modules? Thinking about this: https://stackoverflow.com/a/63111913/2779871