RN Url Preview

Fully customizable preview of the URL.

Getting Started

yarn add rn-url-preview

Usage

import UrlPreview from "rn-url-preview";
// ...
<UrlPreview
  url="https://github.com/"
  style={{
    backgroundColor: "gainsboro",
    borderRadius: 16,
    padding: 12,
    marginVertical: 12,
    gap: 12,
  }}
>
  <UrlPreview.Image style={{ width: "100%", height: 200, borderRadius: 12 }} />
  <UrlPreview.Title
    style={{ fontWeight: "bold", fontSize: 18, color: "blue" }}
  />
  <UrlPreview.Description />
</UrlPreview>;

Props

You can customize everything in UrlPreview, UrlPreview.Image, UrlPreview.Title and UrlPreview.Description. Top image, bottom title, left image, right title, just title and description, no image. Whatever you want.

Name	Type	Description
UrlPreview	View	URL wrapper, only has one special prop url which is the string url to display, all other props are View Props
UrlPreview.Image	Image	Automatically gets the image of the url , the placeholder prop accepts an Image Source to display while fetching data from the url , all other props work like a normal Image with Image Props
UrlPreview.Title	Text	Automatically gets the title of the url , the placeholder prop accepts a string to display while fetching data from the url , all other props work like a normal Text with Text Props
UrlPreview.Description	Text	Automatically gets the description of the url , the placeholder prop accepts a string to display while fetching data from the url , all other props work like a normal Text with Text Props

License

MIT