https://github.com/horusgoul/remix-react-native-pressable

React Native Web's <Pressable>, but with Remix's <Link> magic.
https://github.com/horusgoul/remix-react-native-pressable

react-native react-native-web remix

Last synced: about 1 month ago
JSON representation

React Native Web's <Pressable>, but with Remix's <Link> magic.

• Host: GitHub
• URL: https://github.com/horusgoul/remix-react-native-pressable
• Owner: HorusGoul
• License: mit
• Created: 2022-02-19T12:06:47.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-19T13:07:20.000Z (almost 3 years ago)
• Last Synced: 2024-11-01T20:04:06.370Z (about 2 months ago)
• Topics: react-native, react-native-web, remix
• Language: TypeScript
• Homepage:
• Size: 197 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# remix-react-native-pressable

[![NPM](https://img.shields.io/npm/v/remix-react-native-pressable.svg)](https://www.npmjs.com/package/remix-react-native-pressable)

[![Bundlephobia][bundlephobia-badge]][bundlephobia]

[![Github All Contributors][all-contributors-badge]](#contributors)

[![License][license-badge]][license]

[![License][twitter-badge]][twitter]

[![License][star-badge]][star]

React Native Web's ``, but with Remix's `` magic.

## How to use:

Install it with your favorite package manager:

```bash

# npm

npm install remix-react-native-pressable

# yarn

yarn add remix-react-native-pressable

# pnpm

pnpm add remix-react-native-pressable

```

Imagine `` is like a Remix ``, but with all the React Native Web `Pressable` props!

Here's a little example using the `to` property.

```tsx

import { View, Text } from 'react-native';

import { RemixPressable } from 'remix-react-native-pressable';

export default function MyRemixRoute() {

  return (

    

      

        Link to /about

      

    

  );

}

```

We also provide a `` component and a `useRemixPressableProps` hook, in case you want to build your own wrapper or use the render prop pattern.

## More docs:

- Check out the [Remix's `` documentation for more info](https://remix.run/docs/en/v1/api/remix#link).

- Since Remix's `` wraps React Router DOM's ``, you can use [the same props](https://reactrouter.com/docs/en/v6/api#link).

- Also, React Native Web's `` has a [full list of props](https://necolas.github.io/react-native-web/docs/pressable/).

## Contributors

  

    
Horus Lugo
🚧 🤔 💻 🎨 👀

  

[all-contributors-badge]: https://img.shields.io/github/all-contributors/HorusGoul/remix-react-native-pressable/main

[license-badge]: https://img.shields.io/github/license/HorusGoul/remix-react-native-pressable

[license]: ./LICENSE

[bundlephobia-badge]: https://img.shields.io/bundlephobia/minzip/remix-react-native-pressable

[bundlephobia]: https://bundlephobia.com/package/remix-react-native-pressable

[twitter-badge]: https://img.shields.io/twitter/follow/horusgoul.svg?style=social&label=Follow

[twitter]: https://twitter.com/horusgoul

[star-badge]: https://img.shields.io/github/stars/HorusGoul/remix-react-native-pressable.svg?style=social&label=Star

[star]: https://github.com/horusgoul/remix-react-native-pressable