Closed drb1 closed 4 years ago
jsamr
commented
4 years ago @drb1 Thank your for your report! Can you try out version 4.2.3-beta.1? (see #390 for instructions) There is an "enhancement" that might actually be a fix
HTML: use a proxy method setStateSafe to avoid updating while unmounted.
drb1
commented
4 years ago this is minimal repo for analysis https://github.com/drb1/DemoForVideoCrashHtml
jsamr
commented
4 years ago @drb1 First of all, congratulations on the reproduction. That is pristine! So I did my little investigation, and this is what I found out:
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 433c7e2..c569e8f 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -15,6 +15,7 @@
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
+ android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />Indeed, after disabling hardware acceleration, the app doesn't crash anymore.
react-native-screens users have experienced the same issue (https://github.com/software-mansion/react-native-screens/issues/105 and https://github.com/software-mansion/react-native-screens/issues/214). Some claim it happens with react-native-webview, and relates to https://github.com/react-native-community/react-native-webview/issues/1069. This is obviously an upstream bug, and we will track it until it is fixed.drb1
commented
4 years ago this solves the problem, but disabling hardwareAccelerated has serious impact on performance of app, hope it will be fixed soon
jsamr
commented
4 years ago @drb1 I do understand this is problematic. A user in the react-native-webview thread I referenced claims that putting opacity at 0.99 for the WebView might do the trick. I tested on your repo, and it works. My god, that's so utterly hackish. Here is the patch:
diff --git a/src/screens/EmbededVideoDemo.js b/src/screens/EmbededVideoDemo.js
index 1f42739..e6fa5cf 100644
--- a/src/screens/EmbededVideoDemo.js
+++ b/src/screens/EmbededVideoDemo.js
@@ -4,11 +4,16 @@ import HTML from 'react-native-render-html';
const htmlContent = "<p style=\"text-align: left;\">The word <em>ocean</em> comes from the figure in <span style=\"color: #3598db;\"><a style=\"color: #3598db;\" title=\"Classical antiquity\" href=\"https://en.wikipedia.org/wiki/Classical_antiquity\">classical antiquity</a></span>, <a title=\"Oceanus\" href=\"https://en.wikipedia.org/wiki/Oceanus\">Oceanus</a> <small>pronounced </small><span class=\"IPA\" title=\"Representation in the International Phonetic Alphabet (IPA)\"><a title=\"Help:IPA/Greek\" href=\"https://en.wikipedia.org/wiki/Help:IPA/Greek\">[??keanós]</a></span>, the elder of the <a class=\"mw-redirect\" title=\"Titan (mythology)\" href=\"https://en.wikipedia.org/wiki/Titan_(mythology)\">Titans</a> in classical <a title=\"Greek mythology\" href=\"https://en.wikipedia.org/wiki/Greek_mythology\">Greek mythology</a>, believed by the <a title=\"Ancient Greece\" href=\"https://en.wikipedia.org/wiki/Ancient_Greece\">ancient Greeks</a> and <a title=\"Ancient Rome\" href=\"https://en.wikipedia.org/wiki/Ancient_Rome\">Romans</a> to be the divine personification of the <a title=\"Sea\" href=\"https://en.wikipedia.org/wiki/Sea\">sea</a>, an enormous <a title=\"River\" href=\"https://en.wikipedia.org/wiki/River\">river</a> encircling the world.</p>\n<p style=\"text-align: center;\"><iframe src=\"https://www.youtube.com/embed/1La4QzGeaaQ\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe></p>\n<p style=\"text-align: left;\">Extraterrestrial oceans may be composed of water or other elements and compounds. The only confirmed large stable bodies of extraterrestrial surface <a class=\"mw-redirect\" title=\"Liquids\" href=\"https://en.wikipedia.org/wiki/Liquids\">liquids</a> are the <a title=\"Lakes of Titan\" href=\"https://en.wikipedia.org/wiki/Lakes_of_Titan\">lakes of Titan</a>, although there is evidence for the existence of oceans elsewhere in the Solar System. Early in their geologic histories, <a title=\"Mars\" href=\"https://en.wikipedia.org/wiki/Mars\">Mars</a> and <a title=\"Venus\" href=\"https://en.wikipedia.org/wiki/Venus\">Venus</a> are theorized to have had large water oceans. The Mars ocean hypothesis suggests that nearly a third of the surface of Mars was once covered by water, and a <a title=\"Runaway greenhouse effect\" href=\"https://en.wikipedia.org/wiki/Runaway_greenhouse_effect\">runaway greenhouse effect</a> may have boiled away the global ocean of Venus. Compounds such as <a title=\"Salt (chemistry)\" href=\"https://en.wikipedia.org/wiki/Salt_(chemistry)\">salts</a> and <a title=\"Ammonia\" href=\"https://en.wikipedia.org/wiki/Ammonia\">ammonia</a> dissolved in water lower its freezing point so that water might exist in large quantities in extraterrestrial environments as brine or convecting <a title=\"Ice\" href=\"https://en.wikipedia.org/wiki/Ice\">ice</a>. Unconfirmed oceans are speculated beneath the surface of many <a class=\"mw-redirect\" title=\"Dwarf planets\" href=\"https://en.wikipedia.org/wiki/Dwarf_planets\">dwarf planets</a> and natural satellites; notably, the ocean of the moon <a title=\"Europa (moon)\" href=\"https://en.wikipedia.org/wiki/Europa_(moon)\">Europa</a> is estimated to have over twice the water volume of Earth.</p>";
+const tagsStyles = {
+ iframe: {
+ opacity: 0.99
+ }
+}
const EmbededVideoDemo = () => {
return (
<ScrollView style={{flex: 1}}>
- <HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width}/>
+ <HTML tagsStyles={tagsStyles} html={htmlContent} imagesMaxWidth={Dimensions.get('window').width}/>
</ScrollView>
);
};Can you confirm on your side?
drb1
commented
4 years ago yes this also solved the issue, i think this is the best method for now.
jsamr
commented
4 years ago I am closing because there is a known workaround and the bug happens upstream. See https://stackoverflow.com/q/63171131/2779871
hrdyjan1
commented
3 years ago Thank you for the temporary solution, still not sure how is it possible, that opacity style will fix the issue 🤷
marco2216
commented
2 years ago The current equivalent to this solution, assuming you're using @native-html/iframe-plugin, is as follows (optionally check if is android when applying this):
renderersProps={{
iframe: {
webViewProps: {
style: { opacity: 0.99 },
},
},
}}
Nasseratic
commented
2 years ago @marco2216 Thanks man that worked!
limeojin363
commented
9 months ago As @marco2216 metioned, when you are using plugin(table/iframe) with HTML component containing Webview={WebView} prop, you may need renderersProps, not tagStyles.
I was using @native-html/table-plugin and WebView prop like this.
import HTML from 'react-native-render-html';
import WebView from 'react-native-webview';
import TableRenderer from '@native-html/table-plugin';
// ...
return (
<HTML
source={{html}} // html: Some texts..
WebView={WebView}
renderers={{table: TableRenderer}}
/>
);
// ...First didn't work for me and second did.
// import statements..
//...
return (
<HTML
tagsStyles={{ // X
table: {
opacity: 0.99,
},
}}
source={{html}}
WebView={WebView}
renderers={{table: TableRenderer}}
/>
);
// ...// import statements..
//...
return (
<HTML
renderersProps={{ // O
table: {
webViewProps: {
style: {opacity: 0.99},
},
},
}}
source={{html}}
WebView={WebView}
renderers={{table: TableRenderer}}
/>
);
// ...
Oath
I swear that I have completed these tasks before submitting:
Decision table
<yyy>is not rendered”Bug Report
React Native
0.61.5
Libraries
Devices
Description
1.Android app crashes while navigating back to stack screen after rendering table content and embedded videos from youtube. 2.Normal behavior when rendering normal html content 3.No crashes while disable {enableScreen } from react-native-screens