Initial Setup

CLI

Quickly create a new project using the React Native Reusables CLI.

For existing projects

If a package.json is detected, the CLI will install all necessary dependencies and automatically configure your project for you.

Usage

Run the following command in your terminal, answer the prompts, and you’re good to go!

npx @react-native-reusables/cli@latest init

After initialization

You can add more components with the following command:

npx @react-native-reusables/cli@latest add

Features

React Native Reusables

• Dependencies
  • NativeWind
  • Expo Navigation Bar
  • Tailwind Animate
  • Class Variance Authority
  • CLSX
  • Tailwind Merge
  • React Native SVG
  • Lucide React Native
  • RN Primitives Portal
• Configurations
  • Dark and light mode
  • Path aliases
  • Utility files and components

File structure

• Directoryapps

  • _layout.tsx
  • +not-found.tsx
  • index.tsx
• Directoryassets

  • Directoryimages

    • adaptive-icon.png
    • favicon.png
    • icon.png
    • splash.png
• Directorycomponents

  • Directoryui

    • avatar.tsx
    • button.tsx
    • card.tsx
    • progress.tsx
    • text.tsx
    • tooltip.tsx
  • ToggleTheme.tsx
• Directorylib

  • Directoryicons

    • iconWithClassName.ts
    • Info.tsx
    • MoonStar.tsx
    • Sun.tsx
  • android-navigation-bar.tsx
  • constants.ts
  • useColorScheme.tsx
  • utils.ts
• .gitignore
• app.json
• babel.config.js
• global.css
• index.js
• metro.config.js
• nativewind-env.d.ts
• package.json
• README.md
• tailwind.config.js
• tsconfig.json

Options

Option	Description	Default
-c, --cwd <path>	The working directory	Current directory
-o, --overwrite	Overwrite existing files (for existing projects)	false

Manual Installation

1. Follow the installation guide for NativeWind from the official documentation

2. Install the following packages:

Universal

Platforms: Web, iOS, and Android

npx expo install tailwindcss-animate class-variance-authority clsx tailwind-merge

Native only

Platforms: iOS and Android

npx expo install class-variance-authority clsx tailwind-merge

3. Configure path aliases

We use the ~ alias. This is how you can configure it in your tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["*"]
    }
  }
}

4. Add a cn helper

Add the following code to the ~/lib/utils.ts file:

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

5. Add the useColorScheme hook

Add the following code to the ~/lib/useColorScheme.tsx file:

import { useColorScheme as useNativewindColorScheme } from 'nativewind';

export function useColorScheme() {
  const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
  return {
    colorScheme: colorScheme ?? 'dark',
    isDarkColorScheme: colorScheme === 'dark',
    setColorScheme,
    toggleColorScheme,
  };
}

6. Add the following css variables to ~/global.css file.

Tip

If you want inspiration for your own colors, check out:

ui by jln.dev/

or

themes by ui/shadcn

Note

When customizing, make sure to use .dark:root or @media (prefers-color-scheme: dark) for the dark mode css selector.

7. Add the following code in the ~/lib/constants.ts file for the navigation theme colors:

If you changed the colors in the ~/global.css file, update the ~/lib/constants.ts file with the new colors. Each color has a commented css variable name next to it.

8. Use the CSS variables in your tailwind.config.js file.

Universal

Platforms: Web, iOS, and Android

Native only

Platforms: iOS and Android

9. Configure React Navigation Theme

In your root component (ex: the root _layout.tsx if you’re using expo-router), add the following code to load the selected theme, prevent the flash of the default theme, and store the selected theme in the async storage.

10. Add the <ToggleTheme/> icons

Follow the next step and add the <Sun/> and <MoonStar/> icons from the examples.