{"id":49290430,"url":"https://github.com/azizbecha/react-native-preview-url","last_synced_at":"2026-04-26T00:01:09.164Z","repository":{"id":309237012,"uuid":"1035489365","full_name":"azizbecha/react-native-preview-url","owner":"azizbecha","description":"Link Previews made easy 🚀","archived":false,"fork":false,"pushed_at":"2026-04-25T20:23:42.000Z","size":1945,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-25T20:31:09.492Z","etag":null,"topics":["react","reactnative"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-preview-url","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azizbecha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-10T14:07:40.000Z","updated_at":"2026-04-25T20:23:47.000Z","dependencies_parsed_at":"2025-08-10T19:32:35.734Z","dependency_job_id":null,"html_url":"https://github.com/azizbecha/react-native-preview-url","commit_stats":null,"previous_names":["azizbecha/react-native-preview-url"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/azizbecha/react-native-preview-url","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizbecha%2Freact-native-preview-url","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizbecha%2Freact-native-preview-url/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizbecha%2Freact-native-preview-url/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizbecha%2Freact-native-preview-url/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azizbecha","download_url":"https://codeload.github.com/azizbecha/react-native-preview-url/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizbecha%2Freact-native-preview-url/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32280981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactnative"],"created_at":"2026-04-26T00:00:50.524Z","updated_at":"2026-04-26T00:01:09.142Z","avatar_url":"https://github.com/azizbecha.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Preview Url\n\nA React Native library that provides an easy way to fetch and display link previews using the `useUrlPreview` hook and a customizable `\u003cLinkPreview /\u003e` component.\nIt uses our own open-source free open source API `azizbecha-link-preview-api` available on GitHub at [https://github.com/azizbecha/link-preview-api](https://github.com/azizbecha/link-preview-api).\n\n\u003cp\u003eYou can use the API for free without an API key or host it yourself if you prefer.\u003c/p\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/ca1b0f21-0c47-4894-ae84-6c48fd5401cd\" width=\"300\" style=\"flex: 1\" /\u003e\n\n## Features\n\n- Fetches metadata (title, description, images, favicons, etc.) from URLs\n- Customizable preview component with styles and fallback support\n- Supports timeout and error handling\n- Handles URL validation and loading states\n\n## Installation\n\n```bash\nnpm install react-native-preview-url\n# or\nyarn add react-native-preview-url\n```\n\n## Usage\n\n### useUrlPreview Hook\n\n```tsx\nimport { useUrlPreview } from 'react-native-preview-url';\n\nconst { loading, data, error } = useUrlPreview('https://github.com');\n```\n\n### `\u003cLinkPreview /\u003e` Component\n\n```tsx\nimport React from 'react';\nimport { LinkPreview } from 'react-native-preview-url';\n\nexport const Example = () =\u003e (\n  \u003cLinkPreview\n    url=\"https://github.com\"\n    timeout={3000} // optional, default timeout in ms\n    onSuccess={(metadata) =\u003e console.log(metadata)}\n    onError={(error) =\u003e console.error(error)}\n    onPress={() =\u003e console.log('Pressed preview')}\n    containerStyle={{ margin: 16, borderRadius: 8, backgroundColor: '#fff' }}\n    imageStyle={{ borderRadius: 8, height: 150 }}\n    titleStyle={{ fontSize: 18, fontWeight: 'bold' }}\n    descriptionStyle={{ fontSize: 14, color: '#555' }}\n    urlStyle={{ fontSize: 12, color: 'grey' }}\n    titleLines={2}\n    descriptionLines={3}\n    showUrl={true}\n    hideImage={false}\n  /\u003e\n);\n```\n\n## Caching\n\nResponses are cached in memory and shared across every `\u003cLinkPreview /\u003e` and `useUrlPreview` call, so rendering the same URL twice (or ten times, or on a later screen) fires only a single network request. Concurrent requests for the same URL are deduplicated automatically. Errors are cached too (under a separate, shorter TTL) to avoid hammering a failing endpoint.\n\nDefaults: up to 50 entries, 5-minute success TTL, 30-second error TTL, enabled.\n\n```tsx\nimport {\n  configureCache,\n  clearCache,\n  invalidateUrl,\n} from 'react-native-preview-url';\n\n// Tune at app startup\nconfigureCache({\n  maxSize: 100,\n  ttl: 10 * 60 * 1000, // success TTL\n  errorTtl: 60 * 1000, // error TTL\n});\n\n// Drop everything (e.g. on pull-to-refresh)\nclearCache();\n\n// Drop a single URL (success or error)\ninvalidateUrl('https://github.com');\n\n// Disable entirely\nconfigureCache({ enabled: false });\n```\n\nNotes:\n\n- Cache keys are scoped by base URL, so calling `setBaseUrl(...)` mid-session does not poison entries from a different environment.\n- Timeout errors are not cached (they're treated as transient).\n- `configureCache(...)` resets the cache when called.\n\n## Props\n\n| Prop               | Type                                  | Required | Default             | Description                                                        |\n| ------------------ | ------------------------------------- | -------- | ------------------- | ------------------------------------------------------------------ |\n| `url`              | `string`                              | Yes      | -                   | The URL to fetch metadata for                                      |\n| `timeout`          | `number`                              | No       | `3000`              | Fetch timeout in milliseconds                                      |\n| `onSuccess`        | `(data: LinkPreviewResponse) =\u003e void` | No       | -                   | Callback when data is successfully fetched                         |\n| `onError`          | `(error: string) =\u003e void`             | No       | -                   | Callback when fetching metadata fails                              |\n| `onPress`          | `(data: LinkPreviewResponse) =\u003e void` | No       | -                   | Callback when pressed; if omitted, the URL is opened via `Linking` |\n| `containerStyle`   | `ViewStyle`                           | No       | -                   | Style for the container view                                       |\n| `imageStyle`       | `ImageStyle`                          | No       | -                   | Style for the preview image                                        |\n| `titleStyle`       | `TextStyle`                           | No       | -                   | Style for the title text                                           |\n| `descriptionStyle` | `TextStyle`                           | No       | -                   | Style for the description text                                     |\n| `urlStyle`         | `TextStyle`                           | No       | -                   | Style for the URL text                                             |\n| `titleLines`       | `number`                              | No       | 2                   | Number of lines for title text truncation                          |\n| `descriptionLines` | `number`                              | No       | 4                   | Number of lines for description text truncation                    |\n| `showUrl`          | `boolean`                             | No       | `true`              | Whether to show the URL domain below the description               |\n| `hideImage`        | `boolean`                             | No       | `false`             | Whether to hide the preview image                                  |\n| `visible`          | `boolean`                             | No       | `true`              | Whether to show or hide the preview component                      |\n| `loaderComponent`  | `ReactNode`                           | No       | `ActivityIndicator` | Custom loading component                                           |\n| `fallbackImage`    | `ImageSourcePropType`                 | No       | `undefined`         | Fallback image in case the website doesn't have one                |\n\n## Example Response Object\n\n```json\n{\n  \"status\": 200,\n  \"title\": \"azizbecha - Overview\",\n  \"description\": \"I'm fixing bugs now, I'll write a bio later. azizbecha has 26 repositories available. Follow their code on GitHub.\",\n  \"url\": \"https://github.com/azizbecha\",\n  \"images\": [\"https://avatars.githubusercontent.com/u/63454940?v=4?s=400\"],\n  \"favicons\": [\"https://github.githubassets.com/favicons/favicon.svg\"],\n  \"mediaType\": \"profile\",\n  \"contentType\": \"text/html\",\n  \"siteName\": \"GitHub\"\n}\n```\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazizbecha%2Freact-native-preview-url","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazizbecha%2Freact-native-preview-url","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazizbecha%2Freact-native-preview-url/lists"}