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

Contents disappearing after table is load #2

Closed
donni106 opened this issue Jun 24, 2019 · 7 comments
Closed

Contents disappearing after table is load #2

donni106 opened this issue Jun 24, 2019 · 7 comments

Comments

@donni106
Copy link
Contributor

donni106 commented Jun 24, 2019 •
edited

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
Copy link
Collaborator

jsamr commented Jun 24, 2019

@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
Copy link
Contributor Author

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
Copy link
Collaborator

jsamr commented Jun 24, 2019

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
Copy link
Contributor Author

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

@jsamr
Copy link
Collaborator

jsamr commented Jun 24, 2019

@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
Copy link
Contributor Author

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
Copy link
Collaborator

jsamr commented Jun 24, 2019

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

donni106 added a commit to smart-village-solutions/smart-village-app-app that referenced this issue Jun 4, 2020
@donni106
Fix flex bug around html table renderer
20bc081 
- struggled a long time with a strange behavior while rendering
  html table with the package
- created issue native-html/plugins#2
- resolved with using no flex wrappers
@drb1 drb1 mentioned this issue Jul 13, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@donni106 @jsamr