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:
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
Top comments (0)