Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

the app crashes while rendering the table on Android. table-plugin #654

Open
8 of 15 tasks
ardasnturk opened this issue Feb 9, 2024 · 0 comments
Open
8 of 15 tasks

the app crashes while rendering the table on Android. table-plugin #654

ardasnturk opened this issue Feb 9, 2024 · 0 comments
Labels
bug Crush'em all.

Comments

@ardasnturk
Copy link

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
@ardasnturk ardasnturk added the bug Crush'em all. label Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Crush'em all.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ardasnturk