[iframe-plugin] Crashes on Android when using certain content.

pkreissel commented 1 year ago

I swear that I have completed these tasks before submitting:

[ x] I have read the README
[x ] I have checked that the issue has not been reported yet
[ x] I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin

Bug Report

Environment

React Native

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.0.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.18.1 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.19.3 - /Volumes/Data/Datenprojekte/VVP/vvp_App/node_modules/.bin/npm
      Watchman: 2022.11.28.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.11.2 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    IDEs:
      Android Studio: 2021.3 AI-213.7172.25.2113.9123335
      Xcode: 14.1/14B47b - /usr/bin/xcodebuild
    npmPackages:
      expo: ~47.0.8 => 47.0.8 
      react: 18.1.0 => 18.1.0 
      react-native: 0.70.5 => 0.70.5 
    npmGlobalPackages:
      eas-cli: 2.9.0
      expo-cli: 6.0.8
    Expo Workflow: bare

Libraries

react-native-render-html: "^6.3.4",
@native-html/iframe-plugin: "^2.6.1"
react-native-webview: "11.23.1"

Devices

Happens on multiple (>6) different Android Devices, so it's definitely an Android Issue. I Am using Expo App & build App in Simulator

Reproduction

Use twit frame to generate iFrame for a tweet: https://twitframe.com
Render Iframe using:

const renderers = {
   iframe: IframeRenderer
};
const customHTMLElementModels = {
   iframe: iframeModel
};

Open Project in Expo App or build for Simulator.

Description

The Expo App crashes (without any warning or error messages)

Solution

What solved this for me was wrapping the Webview into a:

<View renderToHardwareTextureAndroid={true} >...</View>

This seems to be primarily a web view issue, however this fix could also be implemented in this plugin in the meantime.

cgorrieri commented 1 year ago

I am having a similar issue when end scrolling on the view. Even the crash report from Crashlytics is not helpful.

Although @pkreissel 's fix is working. The way I implemented it is:

const renderers: CustomTagRendererRecord = {
  iframe: (props) => (
    <View renderToHardwareTextureAndroid={true}>
      <IframeRenderer {...props} />
    </View>
  ),
};

connorpmullins commented 1 year ago

@pkreissel I'll cheers to you tonight. This bug has been plaguing our android app for months and it's been tough to trace down and resolve. Your fix immediately worked. Thank you so, so much.

MTalhaAC commented 1 year ago

I also faced this issue but the above solution work for me @pkreissel Thanks dude

Dror-Bar commented 1 year ago

This seems to be like a very important change to implement in the library (or at the very least, document)

native-html / plugins