custom wrapper for elements

[mateusarbex]

No description provided.

[jsamr]

@mateusarbex Would be very much appreciated if you provided a minimal description. What I understand is basically having the option to render the default renderer in a custom renderer, is that it?

[mateusarbex]

Sorry for not providing a minimal description but what I want is a way to use the the parsed html element with a custom wrapper renderer. Since the renderer prop happens before the html is parsed, I can't wrapp the result in a wrapper I designed. For example: I want to wrapp the parsed img inside a TouchableOpacity

[jsamr]

Would that work out?

const renderers = {
  img: ({ DefaultRenderer, ...props }) => {
    return (
      <TouchableOpacity onPress={/* do stuff */}>
        <DefaultRenderer {...props} />
      </TouchableOpacity>
    );
  },
};

[mateusarbex]

Yes, it would work perfectly!

[jsamr]

@mateusarbex Great. I'll design the next foundry release "renderers" prop with this feature in mind. I'm working on it, expect a first pre-release in a few days ;-)

[mateusarbex]

Thanks!

[ymj]

@mateusarbex Would be very much appreciated if you provided a minimal description. What I understand is basically having the option to render the default renderer in a custom renderer, is that it?

That option would be highly appreciated. I would love to have the option to use a custom renderer for elements with certain attributes, and defer to the default rendered if those attributes are not present.

[jsamr]

This feature is available in the foundry pre-release (see #430 for instruction on how to try it out). You can use TDefaultRenderer prop for that purpose. Also, note that TDefaultRenderer will always support onPress prop, whether it renders a Text or View. See for example this snippet:

react-native-render-html/demo/snippets/customRenderers.tsx

Line 121 in 682a9b9

<TDefaultRenderer {...props} onPress={onPress} />

[jsamr]

Closing now since the stable beta which fixes this issue has just been released.