Using Touchable* inside an inline renderer, such as `a`

Is this a bug report or a feature request?

Question (maybe feature request?)

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

yes

Have you made sure that your issue hasn’t already been reported/solved?

Yes

Environment

Environment: React: 16.5.0 React native: 0.57 react-native-render-html: 4.1.2

Explanation

On RN 0.55, I was able to create a renderer for a that returned a component that uses TouchableOpacity. My use case is creating rich mention tags; I look for links containing a particular attribute, and return a <Mention /> component if it matches:

a: (htmlAttribs, children, convertedCSSStyles, passProps) => {
	if (htmlAttribs["data-mentionid"]) {
		return <Mention userid={parseInt(htmlAttribs["data-mentionid"])} name={passProps.rawChildren[0].data} key={passProps.key} />;
	}

	return a(htmlAttribs, children, convertedCSSStyles, passProps);
}

However, since upgrading to RN 0.57, this no longer works because TouchableOpacity returns a View, and I therefore get a “View in Text” error because the link is inside a paragraph.

Does react-native-render-html provide any way to work around this kind of situation? I’m not really sure what the solution would be - I guess somehow ensuring the previous <Text> is ended before my custom component and a new one opened after.

I know <Text> provides an onPress prop, but styling a <Text> isn’t really flexible enough for my needs here unfortunately.

Thanks for any advice and/or considering this as a request!

[jsamr]

Since the foundry release (v6), every custom renderer can use onPress prop! See this example.

[jsamr]

I am closing because this issue seems to have been resolved.