/react-native-reusables

shadcn/ui for React Native: Copy, paste, and tailor React Native components to suit your specific requirements.

Primary LanguageTypeScriptMIT LicenseMIT

Work in progress...

React Native Reusables

banner

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/

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:

starter-base-template

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.