Component <RNUrlPreview text={'https://fb.watch'} onError={(error) => console.log('eere', error)} onLoad={console.log} /> creates such view:

Handler onLoad outputs this info:

contentType: "application/vnd.wap.xhtml+xml; charset=utf-8"
favicons: ["https://m.facebook.com/favicon.ico"]
mediaType: "application"
url: "https://m.facebook.com/watch"

Handler onError does not firing.

So, when I tap this url preview, I get this error:

TypeError: Cannot read property '0' of null

Hi,
I really like this library. But I got this err 'TypeError: Cannot read property 'style' of undefined
' when I set up on webapp.

Add a loading component (may be a custom one like shimmer) while the link is loading

add imageProps with default props imageProps={{resizeMode: 'contain'}} and remove resizeMode props

Hi, I really appreciate this library.

When I try to customize the rendering by using some props as textContainerStyle, it overrides the default value

I have an input and im trying to develop input as twitter. In this case, i needed to check links and display them. If this library works once correct, doesnt change after that.

const UrlPreview = ({ text }) => {
  useEffect(() => {}, [text]);
  return (
    <View style={{ width: '100%', height: 200 }}>
      <Text>{text}</Text>
      <RNUrlPreview text={text} />
    </View>
  );
};

I'm passing my changevalue from input here. I added text component to check text is changed, yes text is changed but rnurlpreview doesnt display new url. I hope it is clear, is there any suggestion?

Local integration of link-preview-js logic, getting needed data from an URL, and remove dependencies

NPM version is out of date. Please publish the latest code to NPM

When you place a react native url preview within a flatlist, a memory leak occurs that will end up crashing your app.

Can I use this on a backend with nodeJs?

Hi the library works excellent and looks so good but we have a problem with https://google.com

normal url:

google:

what could happen ?

greetings

Hi there,

Thanks for this great library.

Would it be possible to add an onPress prop? This would allow to use an in-app browser or open up plenty of possibilities.

Best

Try putting an image url like that, or any other working image URL.
<UrlPreview text="https://i.picsum.photos/id/630/200/300.jpg" />

Instead of an image preview you will see container with the background.
I checked on the code. There is an error of getting image URL link from array of data.images.

Could not find a declaration file for module 'react-native-url-preview'. '/node_modules/react-native-url-preview/index.js' implicitly has an 'any' type.
Try `npm install @types/react-native-url-preview` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-url-preview';`

Should add support to TypeScript declaration.

when i used this package i got warning that this package requires a update.

Make react-native-url-preview a functional component instead of current class component

Description
REGEX match returns null for this url example.

URL Example: https://lightning.engineering/posts/2021-11-30-lightning-terminal

[Screenshot]

I noticed in a list of link previews that the latest item in the list wouldn't have the updated url

is this right? doesn't componentDidUpdate get previous props instead of next props?

 componentDidUpdate(nextProps) {
    if (nextProps.text !== this.props.text) {
      this.getPreview(nextProps.text);
    } else if (nextProps.text == null) {
      this.setState({isUri: false});
    }
  }

this works

 componentDidUpdate(prevProps) {
    if (prevProps.text !== this.props.text) {
      this.getPreview(this.props.text);
    } else if (this.props.text == null) {
      this.setState({isUri: false});
    }
  }

Hi, i use a simple case like your example but getting error when loading
I'm using React Native version 0.61.5
"Attempt to invoke interface method 'java.lang.String com.facebook.react.bridge.ReadableMap.getString(java.lang.String)' on a null object reference"

www.google.com - does not work.
http://google.com - works
https://google.com - works.

Testing on iOS. Am is missing something? Or it is designed to work with only HTTP and HTTPS URLs

do you have a replacement plan now that https://github.com/ospfranco/link-preview-js is now longer maintained?

pass the text to link-preview-js directly

Hi, what is the license of this project? :)

Hey!
I really love this library, and it works perfectly on native platforms.
The only thing is I'm using my app on the web with react-native-web.
I get this error:

TypeError: Cannot read property 'style' of undefined
Module.../../../../../../../../../Users/kristinabuscail/nodejs/wavychat-expo/node_modules/react-native-url-preview/index.js
node_modules/react-native-url-preview/index.js:252
249 | onLoad: PropTypes.func,
250 | onError: PropTypes.func,
251 | text: PropTypes.string,

252 | containerStyle: ViewPropTypes.style,
253 | imageStyle: ViewPropTypes.style,
254 | faviconStyle: ViewPropTypes.style,
255 | textContainerStyle: ViewPropTypes.style,
View compiled

Would be really cool to have your help.
BTW could you add typescript types. Would be much easier

I'm honestly not sure if this is an issue with RNUrlPreview but in the latest build of our app some link previews were not rendering and on inspection we were getting LinkPreviewError logged in the console for those urls which then don't render the preview.

"github.com" works
"https://www.google.com" fails
"www.google.com" works on Android, fails on iOS
"omnilife.ai" fails
"www.omnilife.ai" works

To diagnose I regressed back to our last release branch and rebuilt the app - with the same failures as above, yet our live app works.

The only difference that I can see therefore is that both xcode and Android studio have both upgraded. I may be clutching at straws, but could there be an issue with your library and xcode 11.4.1?

Hi there,

I'm using your package and found that whatever I do on 'onPress' action, it will redirect me to my external browser. Please have it customizable so that we can also navigate within the App if we want when the link is pressed.

Hi, really appreciate this library! I'm using it to render url previews in a chat, and I would like to support "close preview" functionality, where a preview is rendered, but if the user presses a close button, it would hide the preview for the remainder of the time that the component is mounted.

I have two ideas for how to do this, but both would require changes to this library, so wanted to get feedback on whether you'd have a preference, so I can try to implement one and open a PR.

1. Update this library to accept callback props like onLoad and onError which would be called when the info is successfully retrieved to render the preview, or if that fails, respectively. These could be used by consumers of this library to listen for when the preview is ready (or if getting the preview failed), and then render their own "close" button and stop rendering the url-preview component if it's pressed. Without these listeners, I could still render my own "close" button to hide the preview, but I won't know whether the preview is even rendering, so it would end up looking weird having just a "close preview" button without a preview present 😄
2. Add the functionality for closing previews directly to this library. Could just be an "X" icon in the top right that updates component state to hide the preview when it's pressed, and maybe support for passing in a custom button as a prop.

I would be happy to do either (or both) and open a PR, but wanted to get feedback first. Let me know what you think!

Youtube link not working, just showing youtube icon
@maherzaidoune