[heuristic-table-plugin] forceStretch causes crash

[janrop]

Oath

I swear that I have completed these tasks before submitting:

• I have read the README
• I have checked that the issue has not been reported yet
• 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 CLI 4.9.1 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    IDEs:
      Android Studio: 4.2 AI-202.7660.26.42.7486908
      Xcode: 12.3/12C33 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^42.0.0 => 42.0.3 
      react: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2 
      react-navigation: ^4.0.6 => 4.4.4 
    npmGlobalPackages:
      expo-cli: 4.9.1
    Expo Workflow: managed

Libraries

• react-native-render-html: 6.0.4
• @@native-html/heuristic-table-plugin: 0.6.0

Devices

• Device 1 1simulator (iPhone X)
  • OS: iOS 14.5
  • Diagnostic: negative
  • Environment: development

Reproduction

Unfortunately a simple reproduction did not yield the same error. Is there a way to investigate what value causes the NaN in the width calculation? Can it be caused by any parent element?

Description

(Write your steps here:)

1. Added forceStretch to the configuration
2. App crashes when trying to display any table

ExceptionsManager.js:179 Invariant Violation: [357,"RCTView",1,{"paddingTop":2,"paddingRight":2,"paddingBottom":2,"paddingLeft":2,"flex":1,"flexGrow":1,"flexShrink":0,"width":"<<NaN>>","marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"testID":"td"}] is not usable as a native method argument

This error is located at:
    in RCTView (at View.js:34)
    in View (created by TDefaultBlockRenderer)
    in TDefaultBlockRenderer (created by TdRenderer)
    in TdRenderer (created by TBlockRenderer)
    in TBlockRenderer (created by MemoizedTNodeRenderer)
    in MemoizedTNodeRenderer
    in MemoizedTNodeRenderer (at TreeRenderer.tsx:21)
    in RCTView (at View.js:34)
    in View (at TreeRenderer.tsx:20)
    in TreeRenderer (created by TreeRenderer)
    in RCTView (at View.js:34)
    in View (at TreeRenderer.tsx:42)
    in TreeRenderer (created by TreeRenderer)
    in RCTView (at View.js:34)
    in View (at TreeRenderer.tsx:38)
    in TreeRenderer (created by HTMLTable)
    in RCTView (at View.js:34)
    in View (created by Container)
    in Container (at HTMLTable.tsx:55)
    in RCTView (at View.js:34)
    in View (created by TDefaultBlockRenderer)
    in TDefaultBlockRenderer (at HTMLTable.tsx:46)
    in HTMLTable (created by TableRenderer)
    in TableRenderer (created by TBlockRenderer)
    in TBlockRenderer (created by MemoizedTNodeRenderer)
    in MemoizedTNodeRenderer
    in MemoizedTNodeRenderer (created by TChildrenRenderer)
    in TChildrenRenderer (created by TNodeWithChildrenRenderer)
    in TNodeWithChildrenRenderer (created by TNodeChildrenRenderer)
    in TNodeChildrenRenderer (at TBlockRenderer.tsx:20)
    in RCTView (at View.js:34)
    in View (created by TDefaultBlockRenderer)
    in TDefaultBlockRenderer (created by TBlockRenderer)
    in TBlockRenderer (created by MemoizedTNodeRenderer)
    in MemoizedTNodeRenderer
    in MemoizedTNodeRenderer (created by TChildrenRenderer)
    in TChildrenRenderer (created by TNodeWithChildrenRenderer)
    in TNodeWithChildrenRenderer (created by TNodeChildrenRenderer)
    in TNodeChildrenRenderer (at TBlockRenderer.tsx:20)
    in RCTView (at View.js:34)
    in View (created by TDefaultBlockRenderer)
    in TDefaultBlockRenderer (created by TBlockRenderer)
    in TBlockRenderer (created by MemoizedTNodeRenderer)
    in MemoizedTNodeRenderer
    in MemoizedTNodeRenderer (at TDocumentRenderer.tsx:35)
    in Unknown (at RenderTTree.tsx:11)
    in RenderTTree (created by SourceLoaderInline)
    in SourceLoaderInline (created by RawSourceLoader)
    in RawSourceLoader (created by RenderHtmlSource)
    in RenderHtmlSource
    in RenderHtmlSource (created by RenderHTML)
    in RenderersPropsProvider (at RenderHTMLConfigProvider.tsx:72)
    in ListStyleSpecsProvider (at RenderHTMLConfigProvider.tsx:71)
    in SharedPropsProvider (at RenderHTMLConfigProvider.tsx:70)
    in RenderRegistryProvider (at RenderHTMLConfigProvider.tsx:67)
    in RenderHTMLConfigProvider (at RenderHTML.tsx:34)
    in TRenderEngineProvider (at RenderHTML.tsx:33)
    in RenderHTMLDebug (at RenderHTML.tsx:32)
    in RenderHTML (at Html.js:76)
    in Html (created by Connect(Html))
    in Connect(Html) (at OnboardingStart.js:37)
    in RCTView (at View.js:34)
    in View (at OnboardingStart.js:36)
    in RCTView (at View.js:34)
    in View (at OnboardingStart.js:34)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at OnboardingStart.js:33)
    in Welcome (created by Connect(Welcome))
    in Connect(Welcome) (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at OnboardingNavigator.js:20)
...

[jsamr]

@janrop I am going to leave it open until someone can share a reproduction; not much actionable for me right now...

[janrop]

The whole issue arose because a single cell table containing only an image was rendered with 0% width. Could it be an option to add a min width parameter for the whole table?

[jsamr]

@janrop I'm assuming tagsStyles.table.minWidth would work, have you tried it out?

[jsamr]

I am closing since no reproduction was provided. Feel free to reopen with a reproduction and I will be happy to investigate!