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 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.
3 Jul 29, 2022
9 Oct 1, 2022
11.2k Jan 6, 2023
18 Oct 15, 2022
16 Dec 9, 2022
98.4k Jan 1, 2023
75.8k Jan 4, 2023
21.7k Dec 30, 2022
32.4k Dec 29, 2022
19.5k Jan 3, 2023