# @harshpatel2125/react-native-link-preview > Fully customizable preview of the URL extracted from the provided text. Latest version **0.1.2** (published 2023-10-16) · MIT license · 0 weekly downloads ## Install ```sh npm install @harshpatel2125/react-native-link-preview pnpm add @harshpatel2125/react-native-link-preview yarn add @harshpatel2125/react-native-link-preview bun add @harshpatel2125/react-native-link-preview ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.2 | | Published | 2023-10-16 | | First published | 2023-08-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 46.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Oleksandr Demchenko | | Maintainers | harshpatel2125 | | Keywords | link, url, preview, react-component, react-native, ios, android, typescript | ## Links - npm: https://www.npmjs.com/package/@harshpatel2125/react-native-link-preview - Homepage: https://github.com/flyerhq/react-native-link-preview#readme - npm.io page: https://npm.io/package/@harshpatel2125/react-native-link-preview ## Dependencies (2) - [html-entities](https://npm.io/package/html-entities.md) ^2.3.2 - [react-native-fast-image](https://npm.io/package/react-native-fast-image.md) ^8.6.3 ## Alternatives - [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads - [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads - [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads - [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads - [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads ## Recent versions - 0.1.2 (latest) — 2023-10-16 - 0.1.1 — 2023-08-02 - 0.1.0 — 2023-08-02 - 0.0.1 — 2023-08-01 ## README # React Native Link Preview [![npm](https://img.shields.io/npm/v/@flyerhq/react-native-link-preview)](https://www.npmjs.com/package/@flyerhq/react-native-link-preview) [![build](https://github.com/flyerhq/react-native-link-preview/workflows/build/badge.svg)](https://github.com/flyerhq/react-native-link-preview/actions?query=workflow%3Abuild) [![Maintainability](https://api.codeclimate.com/v1/badges/385762ec7c1e2326fb7f/maintainability)](https://codeclimate.com/github/flyerhq/react-native-link-preview/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/385762ec7c1e2326fb7f/test_coverage)](https://codeclimate.com/github/flyerhq/react-native-link-preview/test_coverage) [![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&suffix=%&query=$.typeCoverage.is&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fflyerhq%2Freact-native-link-preview%2Fmain%2Fpackage.json)](https://github.com/plantain-00/type-coverage) 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 ### Required | Name | Type | Description | | ---- | ------ | ----------------------------- | | text | string | Text to extract the link from | ### Optional | Name | Type | Description | | ----------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | | containerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | Top level container style | | enableAnimation | boolean | Enables `LayoutAnimation` | | header | string | Text above the link | | metadataContainerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | Title, description and minimized image container style | | metadataTextContainerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | 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](https://reactnative.dev/docs/view-style-props) | Text, title, description and minimized image container style | | touchableWithoutFeedbackProps | TouchableWithoutFeedbackProps | Top level touchable props | ## License [MIT](LICENSE) --- _Source: https://npm.io/package/@harshpatel2125/react-native-link-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._