search

Thomas101 / react-native-fence-html

React Native component that renders HTML as native views
BSD 2-Clause "Simplified" License
177 stars 96 forks source link

Support table #9

Open kkesley opened 8 years ago

kkesley commented 8 years ago

Hello! does this library support table tag?

Thomas101 commented 8 years ago

It doesn't at the moment. I think you could support the majority of what table does in html or certainly a good subset

DavyDeDurpel commented 8 years ago

made an example table renderer (code below) but some enhancements to this library might facilitate the implementation.

The first issue is that htmlAttribs are not inherited from the parent. If I for instance put 'border: 1' on the

element then this property is not passed to it's children. It would be nice if htmlAttribs were chained together by means of a 'parent' property containing the attributes of the parent element. This way it's easy to implement the cascading part of CSS. You could also add a helper method to search for an attribute in the tree.

Would it be possible to also export HTMLStyles inside index.js so that we can easily import it and use some of it's methods?

Another issue is the fact that html styles can be composed. 'border' is such an example. I could easily say 'border: 1px solid black'. In RN this has to become 3 different style elements. It would be nice if this conversation can also be done in HTMLStyles (as it is pretty straightforward).

Do you think it's a good idea to make these changes? I can always make a PR for it.

This is an example table renderer for those that are interested:

renderers = { table: (htmlAttribs, children, passProps) => { return ( <View style={{flex: 1, borderWidth: Number(htmlAttribs.border), padding:Number(htmlAttribs.cellpadding)}} {...passProps} >{children}</View> ) }, tbody: (htmlAttribs, children, passProps) => { return ( <View style={{flex: 1}} {...passProps} >{children}</View> ) } , tr: (htmlAttribs, children, passProps) => { return ( <View style={{flex: 1, flexDirection: 'row'}} {...passProps} >{children}</View> ) } , td: (htmlAttribs, children, passProps) => { return ( <View {...passProps} style={{flex: 1, borderWidth: Number(htmlAttribs.border)}} >{children}</View> ) } }

DavyDeDurpel commented 8 years ago

Another issue. The default renderers are omitted when a custom renderers object is passed. It would be better to merge both together.

Thomas101 commented 8 years ago

I'd happily accept a pull request for this ;-)

IronTony commented 7 years ago

@DavyDeDurpel I tried to use your code, but I got this error back: Views nested within a <Text> must have a width and height, any help?

DavyDeDurpel commented 7 years ago

I'm sorry but I won't be able to help you a lot. In the mean time I had to switch from RN to NativeScript because RN is too unstable and it's architecture makes upgrading to a newer version a chimera. Sadly for me, there is no plugin yet for converting html to native components in NativeScript :-(

Possible causes for your issue are:

element with a combination of text and other elements
  • invalid html
  • or my example renderer is faulty as it is only a very basic renderer missing most of the attributes
    • IronTony commented 7 years ago

    @DavyDeDurpel Thank you very much for the hints.

    • © Githubissues.
    • Githubissues is a development platform for aggregating issues.