DEV Community

Horus Lugo
Horus Lugo

Posted on • Originally published at horus.dev

3 2

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  );
} 
Enter fullscreen mode Exit fullscreen mode

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

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay