React Native Link Preview

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

React-Native-Link-Preview

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