React Native Reusables

Reset Password Form

Founded Labs

Installation

No MCP yet? Connect your agent.

Usage

Add the block to a screen. The wrapper below is what the docs use: a scroll view that keeps the keyboard behaviour sensible on phones and centers the form on larger screens.

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>
  );
}

Two versions

Pick the integration when you take the block:

  • None (bring your own auth). The UI, validation, and loading states are wired up, and the places where your own auth logic goes are marked with // TODO: comments. Nothing else needs to be installed.
  • Clerk. The same screen with Clerk's Expo hooks (useSignIn) doing the work. It needs @clerk/expo, a configured ClerkProvider, and a development build rather than Expo Go.

Both versions come in a Nativewind and a Uniwind flavor; pick the one matching your styling engine.

What you still write

The // TODO: comments in the file mark app-specific logic and navigation. In the version without an auth provider:

  • Submit form and navigate to protected screen if successful

In the Clerk version:

  • Handle other statuses

Clerk setup

Applies to the Clerk version only. After adding the block, follow steps 2 to 4 of Clerk's Expo quick start to wrap the app in ClerkProvider and set your keys. Use a development build so every Clerk Expo feature works. The Clerk docs cover the hooks the block uses.

Starting a new project? The clerk-auth template ships with every Clerk block pre-configured:

npx @react-native-reusables/cli@latest init -t clerk-auth

Agent guide

Add the cn helper and the theme color variables the files useWhen: The project has no components.json file.From the collection

The files import cn from @/lib/utils:

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

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

Class names such as bg-background, text-muted-foreground, border-border, bg-primary, and rounded-lg resolve through these theme variables. Define them in the global CSS and map each color in the Tailwind theme as hsl(var(--name)), with --radius mapped to borderRadius.lg (md is calc(var(--radius) - 2px), sm is calc(var(--radius) - 4px)).

Light:

VariableValue
--backgroundhsl(0 0% 100%)
--foregroundhsl(0 0% 3.9%)
--cardhsl(0 0% 100%)
--card-foregroundhsl(0 0% 3.9%)
--popoverhsl(0 0% 100%)
--popover-foregroundhsl(0 0% 3.9%)
--primaryhsl(0 0% 9%)
--primary-foregroundhsl(0 0% 98%)
--secondaryhsl(0 0% 96.1%)
--secondary-foregroundhsl(0 0% 9%)
--mutedhsl(0 0% 96.1%)
--muted-foregroundhsl(0 0% 45.1%)
--accenthsl(0 0% 96.1%)
--accent-foregroundhsl(0 0% 9%)
--destructivehsl(0 84.2% 60.2%)
--borderhsl(0 0% 89.8%)
--inputhsl(0 0% 89.8%)
--ringhsl(0 0% 63%)
--radius0.625rem

Dark:

VariableValue
--backgroundhsl(0 0% 3.9%)
--foregroundhsl(0 0% 98%)
--cardhsl(0 0% 3.9%)
--card-foregroundhsl(0 0% 98%)
--popoverhsl(0 0% 3.9%)
--popover-foregroundhsl(0 0% 98%)
--primaryhsl(0 0% 98%)
--primary-foregroundhsl(0 0% 9%)
--secondaryhsl(0 0% 14.9%)
--secondary-foregroundhsl(0 0% 98%)
--mutedhsl(0 0% 14.9%)
--muted-foregroundhsl(0 0% 63.9%)
--accenthsl(0 0% 14.9%)
--accent-foregroundhsl(0 0% 98%)
--destructivehsl(0 70.9% 59.4%)
--borderhsl(0 0% 14.9%)
--inputhsl(0 0% 14.9%)
--ringhsl(300 0% 45%)
--radius0.625rem

Nativewind projects: the files assume 1rem is 16px, so pass inlineRem: 16 to Nativewind in metro.config.js:

module.exports = withNativeWind(config, { input: './global.css', inlineRem: 16 });

Related items

Requires