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

[pkreissel]

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]

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]

@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]

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

[Dror-Bar]

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