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