How do i pass a custom props from RenderHTMLSource to a custom renderer in react-native-render-html?

Question

I have a component called RenderHtml which renders my html:

    <RenderHTMLSource
        contentWidth={width * 0.8}
        source={{html: props.html}}
    />

And a custom img renderer that looks like this:

            <Touchable
                onPress={() => props.???}
            >
                <Image src={props.tnode.attributes.src} />
            </Touchable>

And i want to call a function inside RenderHtml from Touchable's onPress method. Is there a way to pass a callback to custom renderers?

i can' get your question, please explain with some more code, where is that function which you want to parse, because i can't get your question perfectly, i am suggesting you to declare that function in global variable, it will be easier. — Paurush Sinha, Feb 21 '22 at 18:52
Please [validate this answer](https://stackoverflow.com/a/71361032/2779871) if it proved useful. — Jules Sam. Randolph, Jul 04 '22 at 09:45

score 0 · Answer 1 · answered Mar 05 '22 at 09:31

There are two common techniques:

1. Prop drilling via `renderersProps`

RenderHTML

const renderersProps = useMemo(() => ({img: {onPress: (uri) => /*do whatever*/ }}), [/*Don't forget deps here*/]);
<RenderHTML
  contentWidth={width * 0.8}
  renderersProps={renderersProps}
  source={{html: props.html}}
/>

Custom renderer

const {onPress} = useRendererProps('img');
return (
  <Touchable onPress={() => onPress(props.tnode.attributes.src)}>
    <Image src={props.tnode.attributes.src} />
  </Touchable>
);

When using typescript

You'd need to augment the module to include the new renderer prop:

declare module 'react-native-render-html' {
  interface RenderersProps {
    img: {
      onPress: (source: string) => void;
    };
  }
}

2. React Context

Refer to React official documentation.