Customizable Link Previews in React Native Apps

Description:

The React Native Preview Url library provides a simpel way to fetch and render link previews. It includes the useUrlPreview hook for data fetching logic and a customizable LinkPreview component for the user interface.

This library retrieves metadata, such as titles, descriptions, and images, from a given URL. You can use it to build features that show a rich preview of a web link, similar to what you see in messaging apps or social media feeds.

Features

🔗 Fetches URL metadata including the title, description, images, and favicons.
🎨 Offers a customizable preview component with support for custom styles and fallbacks.
⏱️ Manages fetch timeouts and includes error handling for failed requests.
🔄 Handles URL validation and provides clear loading state indicators.

Preview

Use Cases

Chat Applications. You can display previews for links shared between users in a messaging interface.
Social Media Feeds. You can generate preview cards for URLs posted in a user’s feed or comments.
Bookmarking Tools. You can create visual bookmarks that show a preview of the saved page’s content.
Content Aggregators. You can show summarized cards for articles and links gathered from various sources.

How to Use It

1. Install the library to your React Native project.

npm install react-native-preview-url

yarn add react-native-preview-url

2. To fetch metadata programmatically, import the useUrlPreview hook. This hook takes a URL string as its argument and returns an object containing loading, data, and error states. You can use these states to build a custom UI.

import React from 'react';
import { View, Text, ActivityIndicator, Image } from 'react-native';
import { useUrlPreview } from 'react-native-preview-url';
const CustomPreview = ({ url }) => {
  const { loading, data, error } = useUrlPreview(url);
  if (loading) {
    return <ActivityIndicator />;
  }
  if (error) {
    return <Text>Error fetching preview.</Text>;
  }
  return (
    <View>
      {data.images && <Image source={{ uri: data.images }} style={{ height: 100 }} />}
      <Text>{data.title}</Text>
      <Text>{data.description}</Text>
    </View>
  );
};

3. For a more direct approach, you can use the <LinkPreview /> component. It abstracts the fetching logic and renders a pre-styled preview card. You must provide the url prop, and you can customize its appearance and behavior through various other props.

import React from 'react';
import { View } from 'react-native';
import { LinkPreview } from 'react-native-preview-url';
export const App = () => (
  <View>
    <LinkPreview
      url="https://github.com/facebook/react-native"
      containerStyle={{ backgroundColor: '#f0f0f0', borderRadius: 10 }}
      titleStyle={{ fontWeight: '600' }}
      descriptionLines={2}
    />
  </View>
);

4. All available props for the <LinkPreview /> component

Related Resources

Link Preview API. The open-source API that powers this library. You can find its source code and documentation on GitHub.

FAQs

Q: Is the API free to use?
A: Yes, the library uses a free and open-source API that does not require an API key. You also have the option to self-host the API for your own use.

Q: How do I customize the appearance of the link preview?
A: You can use style props like containerStyle, imageStyle, titleStyle, and descriptionStyle on the <LinkPreview /> component to modify its look and feel.

Q: What happens if a URL does not have preview data?
A: The useUrlPreview hook will return an error state, and the <LinkPreview /> component will trigger its onError callback. You can handle this state to show a fallback UI.

Q: Can I create a custom loading component?
A: Yes, the <LinkPreview /> component accepts a loaderComponent prop where you can pass your own custom React component to display while the data is being fetched.

Prev Next

ReactScript