Link to internal screen from React Native Render HTML (Using React Native Navigation)

Question

I am using the react-native-render-html module in my application, as well as the @react-navigation/drawer module. I have a mix of nodes, some built in native components and some RenderHTML components that are getting their content from an external database. To link to another screen via the react-navigation, I'm using this basic syntax:

<TouchableOpacity onPress={() => navigation.navigate('Explore')} ><Text>Explore</Text></TouchableOpacity>

This would take you from your current location to the Explore screen in the app.

Now, using a RenderHTML component, I'm including some standard <a> links that open in the default browser. Those are working great. But I'm curious how I can include a link in the html that would "bubble up" so to speak, and open an internal app screen.

Here is my standard RenderHTML setup:

{hometiles.map((item, index) => {
   const html = { html: item?.content, };
  return (

     <RenderHTML contentWidth={screenWidth} source={html} classesStyles={classesStyles} />
     
  );
})}

In the database, my html looks something like the below. I've tried these, but neither of them do anything.

<a href="/assets/screens/explore">Testing a link</a> // Doesn't work

<a onPress={() => navigation.navigate('Explore')}>Testing a link</a> // Doesn't work AND renders incorrectly

Any ideas on how I can link to an internal screen using the html from the database?

Link to internal screen from React Native Render HTML (Using React Native Navigation)

0 Answers0