Question 34141 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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' }}}

    Login or Signup to reply.
  2. 0

    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} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search