Support table

[kkesley]

Hello! does this library support table tag?

[Thomas101]

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]

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]

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

[Thomas101]

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

[IronTony]

@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]

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]

@DavyDeDurpel Thank you very much for the hints.