Android WebViews do not update when content contains #

Description

If you have a webview that contains html with a # in it, the WebView will not be updated if the content after the # is changed on rerender. This issue only occurs with android devices (versions tested are noted below).

Reproduction Steps and Sample Code

Example: https://snack.expo.io/BJj62vVAx

• Create a component which: ** has a state variable which is a string with a # in it ** displays that string as the (html) source of a webview ** has a button that changes the value of the state variable by modifying the content after the #. ( this can be seen in the example provided )
• click on the button to update the string
• Note that the new value of the string is not shown in the webview

Expected:

• The WebView should rerender to show the new html it is given.

Solution

Not sure, however, it would be worth verifying this with other characters to see if any others cause this issue.

Additional Information

• React Native version: 0.42.0 & 0.43.0
• Platform: Android (5, 6 & 7) have not tried older versions.
• Development Operating System: Mac OS Sierra
• Dev tools: 2.2.2 Android SDK: 23

[kidmysoul]

I have the same problem with @xerotolerant , the webview doesnot re-render when I have code in html like

body { color: #4a4a4a; }

Even when I comment out the style like

body { /*color: #4a4a4a;*/ } it doesnot work too.

And when I dropped the whole style , the content re-rendered . it only happened in android.So I have to change the color style to rgb(***)

I use “react-native”: “0.50.0”,

@hramos please re-open this issue because it’s a bug I think.

[fshauge]

A temporary solution in your React Native app is to call encodeURIComponent with the HTML before passing it to the WebView.