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 (wip): 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. Copy/paste what you need into your project (2 options)

   • Follow instructions in docs (work in progress)
   • Browse packages/reusables/src/components/ui/*
     1. Copy file in your project to ~/components/ui/*
     2. If it uses a primitive, replace @rnr/* with ~/components/primitives/*
     3. Copy the primitive to ~/components/primitives/*
     • If the primitive uses other primitives repeat steps 2 and 3.

For this repository:

1. Clone the repo: git clone https://github.com/mrzachnugent/react-native-reusables.git

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

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

4. Start up desired app

• 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:

Follow instructions or check out the code

Includes:

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

Backlog

• Documentation Project
  Backlog for documentation. If you'd like to contribute, assign yourself the issue and track its progression in the project's backlog.

• Add missing universal components
  Refactor native components missing in /ui that are found in /deprecated-ui and add their web components from ui/shadcn

• Create following custom native components
  Replace 3rd party packages with custom native components

  • Calendar
  • Toast

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.