React Native Link Preview
Fully customizable preview of the URL extracted from the provided text.
Getting Started
yarn add @flyerhq/react-native-link-previewUsage
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 |
| 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 |