How to detect a URL and show a preview in chat?

Looking for a way to show link/url previews in React Native. For example if someone links to a YouTube video i would like the small thumbnail and headline to render and be clickable(Linking) like almost every sms or social media platform does. I have come across a package on npm here react-native-url-preview - npm but i’m not sure that’s the best solution. Given how common of a problem this is i’m guessing that package and its 200 weekly downloads is not the solution most people are using.

Any other ways to achieve this? Seems like running a regex on every message to search for a URL string and then rendering the preview if there is a match with the above package would really bog down the chat app?

Thanks in advance!

1 Like


Hey @btomas0144, were you able to find a better solution for this? I’m having the same problem - using react-native-url-preview but it’s glitchy

Unfortunately I wasn’t able to find a better solution. I resorted to detecting a url with regex and extracting it from the string, and reinserting it as a link based on its original index position. My solution has no preview but I like it better than react-native-url-preview. That package is so glitchy and even when the preview loads it’s a 90’s era styling that I felt made my entire chat app feel outdated so opted not to use it.

1 Like

Lol thanks man. I’m also building my own component for it. Hope your chat app turned out well!