Style tnode.children with React Native Render HTML custom rendering?

Question

I want to add a strike-through decoration to the #text-node-like children of a particular item we render using custom rendering.

But I'm not aware of any way to actually target the child #text-like-node and apply styles to it.

For example, we could wrap the TChildrenRenderer like below, but those styles will not be inherited by the Text component that TChildrenRenderer renders. So this works for some styles, like lineDecorationType: 'line-through', but not for things like color.

<Text style={{ color: 'red' }}>
    <TChildrenRenderer tchildren={tnode.children} />
</Text>

Is there any approach that would allow us to set color on the inner rendered text?

Edit: The method has to allow for conditional styling, so a top-level prop like defaultTextProps is out.

adsy · Answer 1 · 2022-10-28T03:05:25.480

1

I think you can add textProps but only on the parent TDefaultRenderer. May be good enough in your use case (?).

<TDefaultRenderer textProps={{ style: { color: 'red' }}}

Or possibly, on <RenderHtml> add defaultTextProps={{ style: { color: 'red' }}}

edited Oct 28 '22 at 03:05

answered Oct 28 '22 at 02:35

adsy

8,531
2
20
31

Thanks for your reply! It seems sensible, but it doesn't appear to have any effect. I also tried `viewProps` and `nativeProps`, but nothing! – Slbox Oct 28 '22 at 02:47
1

Hmm, and the `TDefaultRenderer ` was wrapping as direct parent of `TChildrenRenderer `? – adsy Oct 28 '22 at 02:50
have edited with alternative – adsy Oct 28 '22 at 03:05
`TDefaultRenderer` is not wrapping `TChildrenRenderer` directly (otherwise I don't see the point of custom renderers.) Unfortunately `defaultTextProps` isn't an option because we need to apply these styles to an element conditionally. I see I forgot to mention that, so I've edited my question. Sorry! – Slbox Oct 28 '22 at 03:17
1

Ah I see. I think you are looking for https://meliorence.github.io/react-native-render-html/api/renderhtmlprops#idsstyles ? – adsy Oct 28 '22 at 03:20
That _might_ work, but then we'd have to pre-process our HTML - unless the `id` for an element can be set from inside of `domVisitors`? Not terribly elegant if it does work - but if it does work, I'll let you know. – Slbox Oct 28 '22 at 03:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249125/discussion-between-slbox-and-adsy). – Slbox Oct 28 '22 at 03:44
It can be done via assigning the `class` attribute to the element inside of `domVisitors`, and then styling using `classesStyles`. Thank you! – Slbox Oct 28 '22 at 03:55

score 1 · Answer 2 · answered Oct 28 '22 at 23:58

You could use renderChild prop from TChildrenRendererProps. Something like:

const renderRedChild = ({ childElement }) => React.cloneElement(childElement, {...childElement.props, style: [childElement.props.style, { color: "red" }]})
//...
<TChildrenRenderer tchildren={tnode.children} renderChild={renderRedChild} />

Style tnode.children with React Native Render HTML custom rendering?

2 Answers2