React Native Link Preview
![type-coverage](https://camo.githubusercontent.com/ffa6779af0197561f7079e1cade23ca820c773f584265b930436a6c39f463247/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64796e616d69632f6a736f6e2e7376673f6c6162656c3d747970652d636f766572616765267375666669783d252671756572793d242e74797065436f7665726167652e6973267572693d68747470732533412532462532467261772e67697468756275736572636f6e74656e742e636f6d253246666c796572687125324672656163742d6e61746976652d6c696e6b2d707265766965772532466d61696e2532467061636b6167652e6a736f6e)
Fully customizable preview of the URL extracted from the provided text.
![](https://user-images.githubusercontent.com/14123304/119363213-d727b580-bcad-11eb-8678-6e4c4a54621c.png)
yarn add @flyerhq/react-native-link-preview
import { LinkPreview } from '@flyerhq/react-native-link-preview'
// ...
return (
<LinkPreview text='This link https://github.com/flyerhq can be extracted from the text' />
)
Name |
Type |
Description |
text |
string |
Text to extract the link from |
Name |
Type |
Description |
containerStyle |
ViewStyle |
Top level container style |
enableAnimation |
boolean |
Enables LayoutAnimation
|
header |
string |
Text above the link |
metadataContainerStyle |
ViewStyle |
Title, description and minimized image container style |
metadataTextContainerStyle |
ViewStyle |
Title and description container style |
onPreviewDataFetched |
(PreviewData) => void |
Callback to get the fetched preview data |
previewData |
PreviewData |
Data to render instead of parsing the provided text |
renderDescription |
(string) => ReactNode |
Custom description render prop |
renderHeader |
(string) => ReactNode |
Custom header render prop |
renderImage |
(PreviewDataImage) => ReactNode |
Custom image render prop |
renderLinkPreview |
({ aspectRatio?: number, containerWidth: number, previewData?: PreviewData }) => ReactNode |
Custom render prop |
renderMinimizedImage |
(PreviewDataImage) => ReactNode |
Custom minimised image render prop |
renderText |
(string) => ReactNode |
Custom provided text render prop |
renderTitle |
(string) => ReactNode |
Custom title render prop |
requestTimeout |
number |
Timeout after which request to get preview data should abort |
textContainerStyle |
ViewStyle |
Text, title, description and minimized image container style |
touchableWithoutFeedbackProps |
TouchableWithoutFeedbackProps |
Top level touchable props |
MIT