Work in progress...

React Native Reusables

Universal shadcn/ui for React Native

Crafted with NativeWind v4 and accessibility in mind, react-native-reusables is open source, offering a foundation for developing your own high-quality component library.

https://github.com/mrzachnugent/react-native-reusables/assets/63797719/ae7e074f-05a4-4568-b71a-f1e0be13650d

📖 Read the docs: https://rnr-docs.vercel.app/

🌐 Try the web showcase: https://rnr-showcase.vercel.app/

How to use

For your own project:

1. Start with a template or manually setup configuration: Check out the docs

2. Browse the docs and use the CLI to add the components to your project

For this repository:

1. Fork this repo, then clone your fork on your machine.

2. Change directory into the cloned repo: cd react-native-reusables

3. Install the dependencies (IMPORTANT: Must use pnpm): pnpm i

4. From the root directory, start up desired app with the following commands:

• Showcase
  • iOS: pnpm dev:showcase
  • Android: pnpm dev:showcase:android
  • Web: pnpm dev:showcase:web
• Starter-base
  • iOS: pnpm dev:starter-base
  • Android: pnpm dev:starter-base:android
  • Web: pnpm dev:starter-base:web
• Docs: pnpm dev:docs

Templates

Starter-base:

<img src="https://github.com/mrzachnugent/react-native-reusables/assets/63797719/42c94108-38a7-498b-9c70-18640420f1bc" alt="starter-base-template" style="width:270px;" />

Follow instructions or check out the code

Includes:

• NativeWind v4
• Dark and light mode
  • Android Navigation Bar matches mode
  • Persistent mode
• Common components
  • ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip

rn-primitives

RNR components are built on top of universal (iOS, Android, and Web) style agnostic (can be used with any styling system) react-native primitives which use radix-ui/primitives for the web.

Deprecated-UI

See screenshots

The first draft of components with little to no focus on the web. The code remains for those who may still want to use it.

Community Templates

• RNR Base Bare by a0m0rajab: A simple app using Supabase as the backend, featuring sign-in/sign-up and profile functionality.

If you'd like to share a template you've made with react-native-reusables, feel free to open a PR. The format should replicate the other community template items

[Name of template](https://github.com/your-profile/your-template-repo) by [yourGithubHandle](https://github.com/yourGithubHandle): _A short description_