React Native Link Preview
Fully customizable preview of the URL extracted from the provided text.
Getting Started
yarn add @flyerhq/react-native-link-preview
Usage
import { LinkPreview } from '@flyerhq/react-native-link-preview'
// ...
return (
<LinkPreview text='This link https://github.com/flyerhq can be extracted from the text' />
)
Props
Required
| Name |
Type |
Description |
| text |
string |
Text to extract the link from |
Optional
| Name |
Type |
Description |
| containerStyle |
ViewStyle |
Top level container style |
| 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 |
| 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 |
| textContainerStyle |
ViewStyle |
Text, title, description and minimized image container style |
| touchableWithoutFeedbackProps |
TouchableWithoutFeedbackProps |
Top level touchable props |
GitHub
https://github.com/flyerhq/react-native-link-preview