This content originally appeared on DEV Community and was authored by Horus Lugo
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
This content originally appeared on DEV Community and was authored by Horus Lugo
Horus Lugo | Sciencx (2022-02-19T13:09:59+00:00) Use React Native Web’s Pressable with Remix’s Link magic. Retrieved from https://www.scien.cx/2022/02/19/use-react-native-webs-pressable-with-remixs-link-magic/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.