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