Render URL links for Web And Twitter previews

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. ✌️

GitHub

View Github