Issue using <View> with renderLink

[tomeberle]

Hi there,

I am trying to create a newsfeed with automatic links previewing that would look like the following example from react-native-url-preview.

In order to detect URLs within the text of each posts, I am using this great autolink library. Then, �I hopped to use 'renderLink' prop to design and render the preview of the link.

However, there is a limitation from the library as renderLink can only return a Text component. So when I try to add a view to renderLink like the following:

renderLink={(text, match, index) => (<View><Text>{text}</Text></View)}

I get those funny file icons:

Would someone see anyway I could tackle this issue ?

Thanks for the help!

[joshswan]

Definitely happy to see if there's something we can do to make this work as using more complex elements within the linked text output is definitely something that's come up before.

Currently, Autolink wraps the entire output in a single Text component, which is why generally just outputting a View using renderLink is problematic. RN60 introduced some limited support for inline Views within Text, but it's still only partially supported as of RN 61. I just played around with it and while I could get a View to display nicely within the output, all the text within that View was invisible - not exactly ideal. I'd imagine support will improve though.

Thinking about it, we could make the wrapping component a prop so that you can choose to have Autolink wrap the output in a View rather than Text. I'm struggling to figure out how to handle the style and other Text-related props which currently get passed through to that root Text node though.

<Autolink
  text="some text to link..."
  component={View}
  // this would work now
  renderLink={(text) => <View><Text>{text}</Text></View>}
  // not sure how to handle these without massive breaking changes
  style={someStyles}
  numberOfLines={2}
/>

[joshswan]

Just released v3.0.0 with support for customizing the container component via the component prop, and just about everything else with the new linkProps, textProps, and renderText props.

To get you started, something like the following should now be possible:

<Autolink
  text={text}
  component={View}
  renderLink={(text, match, index) => <LinkPreviewComponent />}
  // Might need to remove leading spaces after block elements
  renderText={(text, index) => <Text>{text.trim()}</Text>
/>

[tomeberle]

Thanks a lot @joshswan for this fast change. I'll try it right away.