Claude Code for React Native (2026)

The Workflow

Use Claude Code to accelerate React Native mobile development: generate cross-platform components, configure navigation stacks, handle platform-specific code, and write tests. Covers both Expo and bare React Native workflows.

Expected time: 10 minutes setup Prerequisites: React Native CLI or Expo CLI, Claude Code installed, Node.js 18+

Setup

1. Initialize Project with Claude Code Context

# For Expo projects
npx create-expo-app@latest my-app --template blank-typescript
cd my-app
# For bare React Native
npx @react-native-community/cli init MyApp --template react-native-template-typescript
cd MyApp

2. Create CLAUDE.md for React Native

# Project: MyApp (React Native)
Expo SDK 52, React Native 0.76, TypeScript strict mode.
## Stack
- Navigation: React Navigation v7 (native stack)
- State: Zustand + React Query (TanStack Query v5)
- Styling: NativeWind v4 (Tailwind for RN)
- Forms: React Hook Form + Zod
- Testing: Jest + React Native Testing Library
## Conventions
- Components: src/components/ (one file per component)
- Screens: src/screens/ (screen components only)
- Hooks: src/hooks/ (custom hooks)
- Platform-specific: use .ios.tsx / .android.tsx suffixes
- All components must have displayName for debugging
- Use SafeAreaView wrapper on all screens
- Minimum touch target: 44x44 points

3. Verify

claude --print "List the screens in src/screens/ and describe the navigation structure"
# Expected output:
# Describes your app's screen files and navigation setup

Usage Example

Generate a complete authentication flow with Claude Code:

claude
> Create a login screen with:
> - Email and password fields with validation (React Hook Form + Zod)
> - "Remember me" toggle
> - Biometric authentication option (Face ID / fingerprint)
> - Loading state during authentication
> - Error display for invalid credentials
> - Use NativeWind for styling
> - Platform-specific biometric handling

Claude Code generates:

// src/screens/LoginScreen.tsx
import { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
  Platform,
  Alert,
  KeyboardAvoidingView,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import * as LocalAuthentication from "expo-local-authentication";
import { useAuthStore } from "@/stores/auth";
const loginSchema = z.object({
  email: z.string().email("Please enter a valid email"),
  password: z.string().min(8, "Password must be at least 8 characters"),
  rememberMe: z.boolean().default(false),
});
type LoginFormData = z.infer<typeof loginSchema>;
export function LoginScreen() {
  const [isLoading, setIsLoading] = useState(false);
  const [biometricAvailable, setBiometricAvailable] = useState(false);
  const login = useAuthStore((state) => state.login);
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
    defaultValues: { email: "", password: "", rememberMe: false },
  });
  const onSubmit = async (data: LoginFormData) => {
    setIsLoading(true);
    try {
      await login(data.email, data.password, data.rememberMe);
    } catch (error) {
      Alert.alert("Login Failed", "Invalid email or password.");
    } finally {
      setIsLoading(false);
    }
  };
  const handleBiometric = async () => {
    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: "Authenticate to log in",
      cancelLabel: "Cancel",
      disableDeviceFallback: false,
    });
    if (result.success) {
      await login("biometric", "", false);
    }
  };
  return (
    <SafeAreaView className="flex-1 bg-white">
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        className="flex-1 justify-center px-6"
      >
        <Text className="text-3xl font-bold text-center mb-8">
          Welcome Back
        </Text>

        <Controller
          control={control}
          name="email"
          render={({ field: { onChange, onBlur, value } }) => (
            <View className="mb-4">
              <TextInput
                className="border border-gray-300 rounded-xl px-4 py-3 text-base"
                placeholder="Email"
                keyboardType="email-address"
                autoCapitalize="none"
                autoComplete="email"
                onChangeText={onChange}
                onBlur={onBlur}
                value={value}
              />
              {errors.email && (
                <Text className="text-red-500 text-sm mt-1">
                  {errors.email.message}
                </Text>
              )}
            </View>
          )}
        />

        <Controller
          control={control}
          name="password"
          render={({ field: { onChange, onBlur, value } }) => (
            <View className="mb-4">
              <TextInput
                className="border border-gray-300 rounded-xl px-4 py-3 text-base"
                placeholder="Password"
                secureTextEntry
                autoComplete="password"
                onChangeText={onChange}
                onBlur={onBlur}
                value={value}
              />
              {errors.password && (
                <Text className="text-red-500 text-sm mt-1">
                  {errors.password.message}
                </Text>
              )}
            </View>
          )}
        />

        <TouchableOpacity
          onPress={handleSubmit(onSubmit)}
          disabled={isLoading}
          className="bg-blue-600 rounded-xl py-4 items-center mb-4"
          style={{ minHeight: 48 }}
        >
          {isLoading ? (
            <ActivityIndicator color="white" />
          ) : (
            <Text className="text-white font-semibold text-base">Log In</Text>
          )}
        </TouchableOpacity>

        {biometricAvailable && (
          <TouchableOpacity
            onPress={handleBiometric}
            className="border border-blue-600 rounded-xl py-4 items-center"
            style={{ minHeight: 48 }}
          >
            <Text className="text-blue-600 font-semibold text-base">
              {Platform.OS === "ios" ? "Sign in with Face ID" : "Sign in with Fingerprint"}
            </Text>
          </TouchableOpacity>
        )}
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}
LoginScreen.displayName = "LoginScreen";

Generate the matching test:

> Write a test for LoginScreen covering form validation, submission,
> and biometric fallback

// src/screens/__tests__/LoginScreen.test.tsx
import { render, fireEvent, waitFor } from "@testing-library/react-native";
import { LoginScreen } from "../LoginScreen";
jest.mock("expo-local-authentication", () => ({
  authenticateAsync: jest.fn().mockResolvedValue({ success: true }),
  hasHardwareAsync: jest.fn().mockResolvedValue(true),
  isEnrolledAsync: jest.fn().mockResolvedValue(true),
}));
describe("LoginScreen", () => {
  it("shows validation errors for empty fields", async () => {
    const { getByText } = render(<LoginScreen />);
    fireEvent.press(getByText("Log In"));
    await waitFor(() => {
      expect(getByText("Please enter a valid email")).toBeTruthy();
    });
  });
  it("calls login on valid submission", async () => {
    const { getByPlaceholderText, getByText } = render(<LoginScreen />);
    fireEvent.changeText(getByPlaceholderText("Email"), "test@example.com");
    fireEvent.changeText(getByPlaceholderText("Password"), "password123");
    fireEvent.press(getByText("Log In"));
    await waitFor(() => {
      expect(getByText("Log In")).toBeTruthy();
    });
  });
});

Common Issues

  • NativeWind classes not applying: Ensure nativewind/babel is in your babel.config.js plugins and restart Metro bundler with cache clear: npx expo start -c.
  • Platform-specific code not picked up: Use .ios.tsx and .android.tsx suffixes, not conditional imports. Claude Code handles this when instructed in CLAUDE.md.
  • Expo modules not available in bare RN: Tell Claude Code which environment you use in CLAUDE.md. Expo modules require expo install, bare RN uses npm install with native linking.

Why This Matters

React Native projects have significant boilerplate per screen. Claude Code generates a production-ready screen with validation, error handling, and tests in under 3 minutes instead of the typical 30-minute manual effort.

Build yours → Create a custom CLAUDE.md with our Generator Tool.

Estimate tokens → Calculate your usage with our Token Estimator.

Try it: Paste your error into our Error Diagnostic for an instant fix.

Frequently Asked Questions

Do I need a paid Anthropic plan to use this?

Claude Code works with any Anthropic API plan, including the free tier. However, the free tier has lower rate limits (requests per minute and tokens per minute) that may slow down multi-step workflows. For professional use, the Build or Scale plan provides higher limits and priority access during peak hours.

How does this affect token usage and cost?

The token cost depends on the size of your prompts and Claude’s responses. Typical development tasks consume 10K-50K tokens per interaction. Using a CLAUDE.md file and skills reduces exploration tokens by 50-80%, which directly lowers costs. Monitor your usage at console.anthropic.com/settings/billing.

Can I customize this for my specific project?

Yes. All Claude Code behavior can be customized through CLAUDE.md (project rules), .claude/settings.json (permissions), and .claude/skills/ (domain knowledge). The most impactful customization is adding your project’s specific patterns, conventions, and common commands to CLAUDE.md so Claude Code follows your standards from the start.

What happens when Claude Code makes a mistake?

Claude Code creates files and edits through standard filesystem operations, so all changes are visible in git diff. If a change is wrong, revert it with git checkout -- <file> for a single file or git stash for all changes. Claude Code does not make irreversible changes unless you explicitly allow destructive commands in settings.json.

Practical Details

When working with Claude Code on this topic, keep these implementation details in mind:

Project Configuration. Your CLAUDE.md should include specific references to how your project handles this area. Include file paths, naming conventions, and any project-specific patterns that differ from defaults. Claude Code reads this file at session start and uses it to guide all operations.

Integration with Existing Tools. Claude Code works alongside your existing development tools rather than replacing them. It respects .gitignore for file visibility, uses your project’s installed dependencies, and follows the build/test scripts defined in package.json (or equivalent). Ensure your toolchain is working correctly before involving Claude Code.

Performance Considerations. For large codebases (10,000+ files), Claude Code’s file scanning can be slow if not properly scoped. Use .claudeignore to exclude generated directories (dist, build, .next, coverage) and dependency directories (node_modules, vendor). This typically reduces scan time by 80-90%.

Version Control Integration. All changes Claude Code makes are regular filesystem operations visible to git. Use git diff after each significant change to review what was modified. For experimental changes, create a branch first with git checkout -b experiment/topic so you can easily discard or keep the results.

See Also