Use React Native Web's Pressable with Remix's Link magic

I just released remix-react-native-pressable, a small package that allows you to use React Native Web's <Pressable> component with all of Remix's <Link> properties and magic.

Essentially, it implements the same logic Remix uses in their <Link>, but adapted to React Native Web's <Pressable> props.

Here's a little example using the to property:

import { View, Text } from 'react-native'; import { RemixPressable } from 'remix-react-native-pressable'; export default function MyRemixRoute() { return ( <View> <RemixPressable to="/about"> <Text>Link to /about</Text> </RemixPressable> </View> ); } 

Just like that, you get a link rendered using <RemixPressable>. The main benefit of this is that you can now use this component like any other React Native Web's <Pressable> you have in your app.

Here's another example (extracted from my website's rewrite!), in which you can see another way of using this library. I have a design system with a Button that uses <Pressable> in its implementation, but the design system is platform agnostic, so it doesn't know about Remix. For cases like this, we can use the <RemixPressableChildren> component to get the props we need to pass to the platform-agnostic <Button>.

import { RemixPressableChildren } from 'remix-react-native-pressable'; import { Button } from 'ui/lib/Button'; ... export default function Index() { ... return ( <> <RemixPressableChildren to="/blog"> {(pressableProps) => ( <Button {...pressableProps}>More publications</Button> )} </RemixPressableChildren> </> ); } 

Now that you've seen how <RemixPressable> works, here are both the repository and its npm page:

• github.com/HorusGoul/remix-react-native-pressable
• npmjs.com/package/remix-react-native-pressable

Also, I recently published an article about How to Setup React Native Web in a Remix project. If you're interested in using React Native with Remix, that's probably the best resource to get started!

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: @HorusGoul