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

You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!#react#remix#react-native
February 19 · 2 min read

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 (
      <RemixPressable to="/about">
        <Text>Link to /about</Text>

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>

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

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

Share article

Where to find me

Made with by me Source code available on GitHubFollow me on Twitter if you want to know more about my future articles, projects, or whatever I come up with!