React Native Link Preview


Fully customizable preview of the URL extracted from the provided text.

Getting Started

``sh
yarn add @flyerhq/react-native-link-preview
`

Usage

`ts
import { LinkPreview } from '@flyerhq/react-native-link-preview'
// ...
return (

)
`

Props

$3

| Name | Type | Description |
| ---- | ------ | ----------------------------- |
| text | string | Text to extract the link from |

$3

| 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 |

License

MIT