flyerhq / react-native-link-preview Goto Github PK
View Code? Open in Web Editor NEWFully customizable preview of the URL extracted from the provided text.
License: MIT License
Fully customizable preview of the URL extracted from the provided text.
License: MIT License
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?
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?
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.
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?
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
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!
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.
It`s possible to add a component loading when loading server data?
{"description": undefined, "image": undefined, "link": "https://www.facebook.com/100002427324091/posts/4134550663302470/", "title": "KalimpongNews Kalimpong"}
The image is always undefined no matter what fb url I pass.
I have tried Posts, Videos, images everything but this image tag is always undefined
when I insert a Spotify link as a text string, the only thing returned is the link, no previews or logo. Is this an issue everyone is having ?
Can I custom position view , like i drop image in left , header and desc in right
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?
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
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.
Hello, any chance we can add an option to not display the actual link? In my use case the link is redundant.
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.
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' />
Testing in both Simulator and real device (iPhone X). And I got only a youtube title, no description and no preview image.
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!
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"
},
A feed system rarely shows the underlying URL, add support to show/hide URL. A custom renderURL can also be an option, then consumers can just return null for that function.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.