How to Show URL Previews in React Native

Last Updated on December 14, 2020.

If you have a mobile app that has link sharing capabilities then showing URL or link previews is very helpful for the users. We see this feature in popular apps such as WhatsApp.

To show URL previews in react native apps, I prefer react native url preview library. It’s a simple library and you can install it in your project with the following command.

npm install react-native-url-preview --save

It’s pretty simple to generate link previews with the RNUrlPreview component.

import RNUrlPreview from 'react-native-url-preview';

<RNUrlPreview text={"https://reactnativeforyou.com"}/>

You can see all the available props here.

Here’s the complete example to show URL previews in react native.


import React from 'react';
import {View, StyleSheet} from 'react-native';
import RNUrlPreview from 'react-native-url-preview';

const App = () => {
  return (
    <View style={styles.container}>
      <RNUrlPreview text={'https://reactnativeforyou.com'} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Here’s the output of the react native example.

url preview react native

Thank you for reading!!

Leave a Reply

%d bloggers like this: