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.

Purpose

Build your own component libraries with react-native-reusables. Copy, paste, and tailor the code to suit your specific requirements.

Features

• Universal: Components, hooks, and utilities for Android, iOS, and the web applications.
• Accessibility: Built with accessibility in mind. Using radix-ui/primitives for web and rn-primitives for native platforms.
• Incremental adoption: Use as much or as little as you need at your own pace.
• Code sharing: Share code between web and native applications.
• Customization: The code lives in your project, not in your node_modules folder. You can customize it to your heart’s content.
• Dark mode: Re-usable css variables for light and dark modes.

Project Scope

This project includes only components built without third-party libraries or those that use @rn-primitives (universal radix-ui/primitives). However, we have a list of libraries and repositories to help you find or create these additional components.

How to use

1. Use a template or manually setup configuration
2. Browse and copy/paste into your project
3. Customize the code to suit your specific requirements

The react-native-reusables way

This project aims to provide as little opinionated code as possible. However, some opinionated code is necessary to provide a consistent and easy-to-use experience.

• The CSS variable names are based on shadcn/ui’s naming convention.

• Folder structure:

  • ~/components/ui for components styled with NativeWind.
  • ~/lib for utilities, hooks, and constants.

• Directorycomponents/

  • Directoryui/

    • …
• Directorylib/

  • …