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`js import LinkPreview from "expo-link-preview";`Note: You may also need to install dependenciesreact-native-opengraph-kit and javascript-time-ago.

`Usage`


Example:

js
import { View, StyleSheet } from "react-native";
import LinkPreview from "expo-link-preview";
export default function App() {
  return (
    
              link="http://github.com"
      />
    
  );
}

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.
!render web preview
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.
!render twitter preview
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:

js
import { View, StyleSheet } from "react-native";
import LinkPreview from "expo-link-preview";
export default function App() {
  return (
    
              link="http://github.com"
        containerColor={"pink"}
        titleColor={"blue"}
        textColor={"yellow"}
        borderColor={"red"}
      />
    
  );
}

const styles = StyleSheet.create({ container: { flex: 1, }, });``
!web color render

Built by Tyler J. ✌️

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.

!render web preview

Twitter

Twitter previews will automatically be used if the OpenGraph response returns

. The Twitter preview automatically adjusts to handle basic tweets and up to four images.

!render twitter preview

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

– 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

counter. Defaults to

counter. Defaults to

counter. Defaults to

. |

Color example

Example:

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

export default function App() {
return (

link="http://github.com"
containerColor={"pink"}
titleColor={"blue"}
textColor={"yellow"}
borderColor={"red"}
/>

);
}

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

``
!web color render

Built by Tyler J. ✌️