Contents disappearing after table is load

donni106 commented 5 years ago

I have a screen with different html sections. With using the react-native-render-html-table-bridge renderers, every section without a table gets loss of its content in the moment the table is rendered. I see the other html sections for a second and than they are away.

Implementation:

import PropTypes from 'prop-types';
import React from 'react';
import HTML from 'react-native-render-html';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import { WebView } from 'react-native-webview';

import { device, normalize, styles } from '../config';
import { openLink } from '../helpers';

const renderers = {
  table: makeTableRenderer({
    WebViewComponent: WebView
  })
};

const htmlConfig = {
  alterNode,
  renderers,
  ignoredTags: IGNORED_TAGS
};

export const HtmlView = (props) => (
  <HTML
    {...props}
    {...htmlConfig}
    tagsStyles={{ ...styles.html, ...props.tagsStyles }}
    emSize={normalize(16)}
    baseFontStyle={styles.baseFontStyle}
    imagesMaxWidth={device.width}
    staticContentMaxWidth={device.width}
    onLinkPress={(evt, href) => openLink(href)}
  />
);

HtmlView.propTypes = {
  tagsStyles: PropTypes.object
};

HtmlView.defaultProps = {
  tagsStyles: {}
};

On screens with html sections without a table everything still works. But on screens where somewhere a table is included, this strange disappearing happens. When I comment out // renderers in the htmlConfig every data is still visible, even from the table, but the table contents are of course not displayed as a table.

How can we fix that?

jsamr commented 5 years ago

@donni106 I don't have much time available, so to help you I would need a minimal reproduction, in the form of a git repository. Please read this before sharing this reproduction: https://stackoverflow.com/help/minimal-reproducible-example

donni106 commented 5 years ago

No, I can't. I tried to reproduce it with your simple example changing the table html and rendering multiple <HTML... sections. But the effect does not happen, somehow sadly :/ Package versions seems to be the same. I am in an Expo app, maybe interesting to mention?

I will make a more deep comparison now.

jsamr commented 5 years ago

I am in an Expo app, maybe interesting to mention?

Yes, you should import WebView from expo instead of from external package! It's mentioned somewhere in the readme :-)

donni106 commented 5 years ago

I do it like they mentioned and am using WebView already for a different case.

jsamr commented 5 years ago

@donni106 OK, they might have changed instructions on their latest release, 33.

If you cannot reproduce the issue with a small example, there is a good chance the bug comes from your code. You could try to disable automatic height behavior and see if the issue is persisting. If it isn't, I might have to check your layout code and see if that's not flex/yoga related.

donni106 commented 5 years ago

Oh yes! It is a flex issue! I removed a flex: 1 from the wrapping container View and the behavior is gone. Thx for helping!

jsamr commented 5 years ago

@donni106 I'm glad you found out :-)

native-html / plugins

Contents disappearing after table is load #2