How to use with react-native?

[arximughal]

Would this work by default with react-native projects? Or any idea how to make it work in react-native?

[HOUCe]

Hey @arximughal @addyosmani ,

I think quicklink can't work with React native/React projects by default. But we can use this anyway by creating a React native/React component which implements with quicklink.
I've made one, check react-quicklink-component. The <Quicklink> component was designed by render props pattern and connected with raw quicklink by ref.

So, we can use like so:

<Quicklink quicklink={options}>
  <Comp1 />
  ...
  <CompN />
</Quicklink>

As for React native, I suppose the philosophy is the same. But the key point is how to collect link urls. Quicklink uses document.querySelectorAll and iterates <a> tags to get prefetch set which seems impossible for React native. But we can try with React.Children.map() to filter urls, in this case, we can make a React native version.

[arximughal]

@HOUCe This sounds really great. I have an app in react-native which uses a lot of images. Fortunately, I get all the URLs for the images before starting a quiz so this component can really really help in that matter as I won't have to filter URLs. Thanks for the component, I'll definitely check it out 🙂

[addyosmani]

Thanks for creating https://www.npmjs.com/package/react-quicklink-component, @HOUCe. This is neat. Outside of leveraging React.children.map() for this I think your component might be the best option for React native users to take advantage of quicklink's concepts. We otherwise plan to focus on providing a lean core.

I'm going to close up this issue and suggest folks use the above component for RN 👍