expo-link-preview

Render URL links for Web & Twitter previews

Built with react-native using expo.

Installation

# yarn
yarn add expo-link-preview

# npm
npm install expo-link-preview --save

Then import with

import LinkPreview from "expo-link-preview";

Note: You may also need to install dependencies react-native-opengraph-kit and javascript-time-ago.

Usage

Example:

import { View, StyleSheet } from "react-native";
import LinkPreview from "expo-link-preview";

export default function App() {
  return (
    <View style={styles.container}>
      <LinkPreview
        link="http://github.com"
      />
    </View>
  );
}

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

Web

Web previews will automatically use OpenGraph information to populate the preview. If an image is present, LinkPreview will default to that, otherwise show a non-interactive web view of the page.

Twitter

Twitter previews will automatically be used if the OpenGraph response returns site_name=Twitter. The Twitter preview automatically adjusts to handle basic tweets and up to four images.

Props

Prop	Required?	Type	Description
link	true	string	The link to render the preview. Links are automatically validated, but should be passed as a string value that begins with "https://".
onPress	false	function	The onPress function is called whenever a user taps the preview.
containerColor	false	string	The background color of the preview container. Defaults to iOS themed component.
borderColor	false	string	The border color of the preview container. Defaults to iOS themed component.
titleColor	false	string	The text color of the Header – typically the website title or the Twitter user name. Defaults to iOS themed component.
textColor	false	string	The text color of the Text – typically the website description or the Twitter user handle and tweet. Defaults to iOS themed component.

Twitter-specific props

Prop	Required?	Type	Description
twitterLogoColor	false	string	The tint color of the Twitter logo. Defaults to Twitter Blue.
showLikes	false	bool	Enable/disable the Likes counter. Defaults to true.
showRetweets	false	bool	Enable/disable the Retweets counter. Defaults to true.
showReplies	false	bool	Enable/disable the Replies counter. Defaults to true.

Color example

Example:

import { View, StyleSheet } from "react-native";
import LinkPreview from "expo-link-preview";

export default function App() {
  return (
    <View style={styles.container}>
      <LinkPreview
        link="http://github.com"
        containerColor={"pink"}
        titleColor={"blue"}
        textColor={"yellow"}
        borderColor={"red"}
      />
    </View>
  );
}

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

Built by Tyler J. ✌️