Skip to content

flyerhq/react-native-link-preview

Repository files navigation

⚠️⚠️ Currently not maintained, please fork or look for alternatives ⚠️⚠️

React Native Link Preview

npm build Maintainability Test Coverage type-coverage

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