DOCSEARCHbyAlgolia
Submit Docs

React Native Reusables Documentation

repository·main·Indexed 27 days ago

https://github.com/founded-labs/react-native-reusables

A collection of open-source UI components for React Native inspired by shadcn/ui and built with Nativewind. Includes a CLI for initializing projects, adding components (such as accordion, button, and dialog), and diagnosing project setup via the doctor command. Supports Nativewind and Uniwind styling libraries.

Tokens
25K
Snippets
86
Records
165
Agent score
91%

What's inside React Native Reusables

  1. Overview of React Native Reusables

    main
    React Native Reusables brings the shadcn/ui experience to React Native. It provides beautifully crafted, open-source components built with Nativewind. The goal is to offer a component library that is as easy to use and customizable as shadcn/ui, but optimized for React Native environments.

  3. Understand the Text inheritance system

    main

    Because React Native child components do not automatically inherit styles from parents, the Text component utilizes TextClassContext.

    When a parent component (such as a Button) wraps its content with this context, the Text component automatically consumes and applies those styles. This ensures that text styling remains consistent with the parent's visual state.

  4. Understand the React Native Reusables approach

    main
    React Native Reusables is not a traditional component library. Instead, it provides the patterns, structure, and styling conventions to help you build your own component library. It brings the shadcn/ui experience to React Native by using familiar tools and consistent naming conventions, allowing you to create universal apps with your preferred design system.

  5. Install the React Native Reusables CLI

    main

    You can run the CLI directly using your preferred package manager without a permanent installation. Use the following commands to execute CLI commands:

    npx @react-native-reusables/cli@latest <command>
pnpm dlx @react-native-reusables/cli@latest <command>
yarn dlx @react-native-reusables/cli@latest <command>
bunx --bun @react-native-reusables/cli@latest <command>

  6. Install the Sign up form via CLI

    main

    You can add the SignUpForm block to your project using the React Native Reusables CLI. Depending on your authentication provider, use one of the following commands:

    Standard (No integration)

    Use this if you are implementing your own authentication logic:

    npx @react-native-reusables/cli add sign-up-form

    Clerk Integration

    Use this if you are using Clerk for authentication:

    npx @react-native-reusables/cli add sign-up-form-clerk

    Note: If using Clerk, ensure you have followed the Clerk Expo quick start to configure your API keys before using the component.

  8. Install Social Connections manually (Clerk)

    main

    To manually install the Social Connections block integrated with Clerk, follow these steps:

    1. Install the required Expo dependencies:
      npx expo install expo-auth-session expo-web-browser
    2. Install the Clerk package if you haven't already:
      npx expo install @clerk/expo
    3. Configure your app for Clerk by following the Clerk Expo quick start.
    4. Ensure you have the Button component installed.
    5. Copy the Clerk-specific block code into your project.
    6. Update import paths and address any // TODO: comments with your app-specific logic.
    npx expo install expo-auth-session expo-web-browser
npx expo install @clerk/expo

  9. Install the Reset password form via CLI

    main

    You can add the ResetPasswordForm block to your project using the React Native Reusables CLI. Choose the command based on whether you are using Clerk for authentication.

    For standard integration (no Clerk):

    add reset-password-form

    For Clerk integration:

    add reset-password-form-clerk

    After running the command, import the component into your screen. It is recommended to wrap it in a ScrollView with keyboardShouldPersistTaps="handled" for a better user experience.

    import { ResetPasswordForm } from '@/components/reset-password-form';
import { ScrollView, View } from 'react-native';

export default function ResetPasswordScreen() {
  return (
    <ScrollView
      keyboardShouldPersistTaps="handled"
      contentContainerClassName="sm:flex-1 items-center justify-center p-4 py-8 sm:py-4 sm:p-6 mt-safe"
      keyboardDismissMode="interactive">
      <View className="w-full max-w-sm">
        <ResetPasswordForm />
      </View>
    </ScrollView>
  );
}

  11. Install the Context Menu component

    main

    You can install the Context Menu component using the React Native Reusables CLI or manually.

    Using the CLI

    Run the following command to add the component to your project:

    add context-menu

    Manual Installation

    1. Install the core dependency:
      npx expo install @rn-primitives/context-menu
    2. Copy the required UI component files (text.tsx, icon.tsx, and context-menu.tsx) into your project's component directory.
    3. Update the import paths within those files to match your project's structure.
    npx expo install @rn-primitives/context-menu