flyerhq / react-native-link-preview Goto Github PK

View Code? Open in Web Editor NEW

122.0 7.0 28.0 2.75 MB

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

License: MIT License

JavaScript 5.92% Starlark 1.78% Ruby 2.61% Swift 5.16% Objective-C 0.60% TypeScript 69.57% Kotlin 14.36%

link url preview react-component react-native ios android typescript

react-native-link-preview's Introduction

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

React Native Link Preview

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

react-native-link-preview's People

Contributors

Stargazers

Watchers

react-native-link-preview's Issues

App terminated at specific url (Android issue)

For example, URL ("https://developer.android.com") put it in, it's Android development environment Shutdown

<LinkPreview text='https://developer.android.com' />

how to i do?

How to get image and link metadata side by side?

I've tried a combination of container styles and tried using the renderLinkPreview method but neither of them seemed to work. What Im tying to achieve looks something like this:

Styling

Hello, thanks for this truly beautiful but currently can't change stylings of the preview link title and description, and also it seems to only show a preview for one link and not for multiple links, currently I just edited your style.js for this moment, hope to get feedbacks, thanks.

[🐛] Youtube link preview not working correctly on iOS

Issue

On iOS it only shows 'Youtube - Share your videos with friends family and the world'. It's working perfectly on Android with title, description and a preview image.

Reproduce

yarn add @flyerhq/react-native-link-preview
import { LinkPreview } from '@flyerhq/react-native-link-preview'
<LinkPreview text='This link https://www.youtube.com/watch?v=dpw9EHDh2bM can be extracted from the text' />

What I tried

Testing in both Simulator and real device (iPhone X). And I got only a youtube title, no description and no preview image.

Environment

Click to expand!

System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 247.37 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.13.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.6.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.4 => 0.63.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Thank you!

Temporary fix I found

When using the Youtube link on react-native, Youtube somehow redirects to the home page of the mobile version, effectively losing all information. Adding a user-agent header temporary fixed the issue.

headers: {
"user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
},

Add option to specify user agent for link crawling

See flyerhq/flutter_link_previewer#43

LayoutAnimation: consider including react-native-reanimated

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/layout_animations

And maybe make those animations configureable. I understand that you want to keep dependencies low, but Reanimated is like the standard toolset for every app I know.

Amazon links don't preview correctly

Hi guys,

I've tested out a few different links and only Amazon links don't show up correctly. ie: https://www.amazon.com/Squishmallow-14-Inch-Koala-Plush-Ultrasoft/dp/B0973FS5R9 (see attached image). I tried another preview library but the result was the same too so I think this is something with Amazon product links but does anyone know what I can add to fix this?

Can I limit the amount of data fetched when previewing a URL?

We use this module to show link previews for links posted in our app and it works great. Users can type any link in the textbox and it will show a preview of the link before the post is sent.

However, we've found that if a user types a link to a huge file (for example, an Ubuntu ISO), the app will download the whole file since it makes a fetch call on the URL.
https://github.com/flyerhq/react-native-link-preview/blob/main/src/utils.ts#L80

As can be seen in Flipper:

Is there a way to stop the download after fetching obviously too much data, say 1MB? Fetching too much/infinite data could cause an app crash by using too much memory. Granted, we can limit the impact of this by fetching the data server-side and passing previewData, in which case only the post sender would fetch that much data. Yet if we could avoid that behaviour, that would be great too.

Android App Crash on specific link

Hi, I have the following issue with a specific link: https://donate.giveasyoulive.com/donate?eid=19178

For some kind of reason this link fails, I guess, and on Android, the app crashes because of this issue and I don't know why this link has any issue and why...

Maybe someone had a similar issue and found a way to debug this?

Request: option to not display the link

Hello, any chance we can add an option to not display the actual link? In my use case the link is redundant.

how do i change the text color tho, i can change the container background color but not text color

URLs with '@' and other allowed characters are not parsed correctly

Looks like URLs that contain @ or some other valid characters are not fully parsed.

For example, the URL https://www.npmjs.com/package/@flyerhq/react-native-link-preview results with the following link preview:

And here is the expected result:

I suppose the link regex should be extended by other valid URL characters.

Or, alternatively, the ability to pass custom regex could be added.

PS.: Thank you for your library!

Add loading option

It`s possible to add a component loading when loading server data?

Custom Interface

Can I custom position view , like i drop image in left , header and desc in right

Feature request - Caching

When you put multiple link preview components to the screen with same link, then it makes multiple fetches to the link. In our use case we could have thousands of previews with same link

Prevent opening link and add longPress event

Hi, I'd like to add the longPress event to the preview (wrapped inside Pressable), but it always opens the link. Is there a way that I could prevent the title/text or image opening the link and wrap the content inside Pressable, so the I can open up a different menu on longPress?