meliorence/react-native-render-html

the app crashes while rendering the table on Android. `table-plugin`

ardasnturk opened this issue · 0 comments

ardasnturk commented

Decision Table

  • My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

Description

I want to create a table like the one below. While creating this table, my Android device crashes. I tried to capture the crash log on the device with adb logcat, but I couldn't get much information. Where could this problem be coming from? There is no problem for iOS and it works smoothly.

<figure class="table">
  <table>
    <tbody>
      <tr>
        <td><strong>Person responsible:</strong></td>
        <td>
          <p style="text-align:justify;"><strong>Partner</strong></p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">City</p>
        </td>
        <td>
          <p style="text-align:justify;">City</p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">Person</p>
        </td>
        <td>- person -&nbsp;</td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">Address</p>
        </td>
        <td>
          <p style="text-align:justify;">City</p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">Post</p>
        </td>
        <td>
          <p style="text-align:justify;">Address</p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">&nbsp;</p>
        </td>
        <td>
          <p style="text-align:justify;">Post</p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">&nbsp;</p>
        </td>
        <td>
          <p style="text-align:justify;">&nbsp;</p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">Telefon: 0....</p>
        </td>
        <td>
          <p style="text-align:justify;">&nbsp;</p>
        </td>
      </tr>
      <tr>
        <td>
          <p style="text-align:justify;">E-Mail</p>
        </td>
        <td>
          <p style="text-align:justify;">E-Mail</p>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

My code:

const renderers = {
  iframe: IframeRenderer,
  table: TableRenderer
};

const htmlConfig = {
  WebView,
  renderers,
  customHTMLElementModels: {
    iframe: iframeModel,
    table: tableModel
  }
};

export const HtmlView = memo(({ html, openWebScreen }) => {
  return (
    <HTML
      source={{ html }}
      {...htmlConfig}
      renderersProps={{
        a: { onPress: (evt, href) => openLink(href, openWebScreen) },
        iframe: {
          scalesPageToFit: true,
          webViewProps: {
            // the opacity of the iframe was set to 0.99 to solve the crashing problem on Android
            // thanks to : https://github.com/meliorence/react-native-render-html/issues/393#issuecomment-1277533605
            style: { opacity: 0.99 }
          }
        },
        table: { cssRules }
      }}
      domVisitors={{
        onElement: (node) => {
          if (node.name === 'img' || node.name === 'iframe') {
            delete node.attribs.width;
            delete node.attribs.height;
          }

          return node.children;
        }
      }}
      systemFonts={['regular', 'bold', 'italic', 'bold-italic']}
    />
  );
});

React Native Information

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
      Yarn: 1.22.19 - /opt/homebrew/bin/yarn
      npm: 9.6.7 - ~/.nvm/versions/node/v16.13.0/bin/npm
      Watchman: 2023.05.22.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.12.1 - /opt/homebrew/lib/ruby/gems/3.1.0/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
    IDEs:
      Android Studio: 2022.2 AI-222.4459.24.2221.10121639
      Xcode: 15.2/15C500b - /usr/bin/xcodebuild
    npmGlobalPackages:
      eas-cli: 7.1.3
      expo-cli: 6.3.10

RNRH Version

"@native-html/table-plugin": "^5.3.1",
"react-native-render-html": "^6.3.4",

Tested Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Reproduction Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Minimal, Reproducible Example

https://snack.expo.dev/@ikusei/rnrhtml-template

Additional Notes

No response