Work in progress...
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.
react-native-reusables-preview_0ZCslnn9.mp4
📖 Read the docs (wip): https://rnr-docs.vercel.app/
🌐 Try the web showcase: https://rnr-showcase.vercel.app/
For your own project:
-
Start with a template or manually setup configuration: Check out the docs
-
Copy/paste what you need into your project (2 options)
- Follow instructions in docs (work in progress)
- Browse
packages/reusables/src/components/ui/*
- Copy file in your project to
~/components/ui/*
- If it uses a primitive, replace
@rnr/*
with~/components/primitives/*
- Copy the primitive to
~/components/primitives/*
- If the primitive uses other primitives repeat steps 2 and 3.
- Copy file in your project to
For this repository:
-
Clone the repo:
git clone https://github.com/mrzachnugent/react-native-reusables.git
-
Change directory into the cloned repo:
cd react-native-reusables
-
Install the dependencies (IMPORTANT: Must use pnpm):
pnpm i
-
Start up desired app
- Showcase
- iOS:
pnpm dev:showcase
- Android:
pnpm dev:showcase:android
- Web:
pnpm dev:showcase:web
- iOS:
- Starter-base
- iOS:
pnpm dev:starter-base
- Android:
pnpm dev:starter-base:android
- Web:
pnpm dev:starter-base:web
- iOS:
- Docs:
pnpm dev:docs
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
- ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip
-
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
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.