Claude Code React Native Paper Mobile UI Guide

React Native Paper provides a comprehensive set of Material Design components for cross-platform mobile applications. Combined with Claude Code and its frontend-design skill, you can accelerate development significantly. This guide covers practical workflows for building mobile UIs efficiently.

Setting Up React Native Paper

Before diving into component development, ensure your project has React Native Paper installed and configured. The library requires React Native Paper itself, along with react-native-vector-icons for icons and react-native-safe-area-context for proper layout handling.

npm install react-native-paper react-native-vector-icons react-native-safe-area-context

After installation, wrap your app with the PaperProvider component to enable theming throughout your application:

import { PaperProvider, MD3LightTheme } from 'react-native-paper';

const theme = {
  ...MD3LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    primary: '#6200ee',
    secondary: '#03dac6',
  },
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <YourAppContent />
    </PaperProvider>
  );
}

The frontend-design skill can help you set up the entire theming structure and generate component scaffolds based on your design requirements.

Component Development Workflow

When building mobile UIs with React Native Paper, Claude Code becomes invaluable for generating components, handling navigation, and managing state. The typical workflow involves creating the component structure, implementing the UI with Paper components, and adding interaction logic.

The tdd skill proves essential here. Write your component tests first to define the expected behavior:

import { render, fireEvent } from '@testing-library/react-native';
import { MyButton } from './MyButton';

describe('MyButton', () => {
  it('renders correctly with label', () => {
    const { getByText } = render(<MyButton label="Submit" />);
    expect(getByText('Submit')).toBeTruthy();
  });

  it('calls onPress when pressed', () => {
    const onPressMock = jest.fn();
    const { getByText } = render(
      <MyButton label="Submit" onPress={onPressMock} />
    );
    fireEvent.press(getByText('Submit'));
    expect(onPressMock).toHaveBeenCalled();
  });
});

Run tests with the tdd skill loaded, and Claude Code will help identify edge cases and ensure your components behave correctly across different scenarios.

Building Common UI Patterns

React Native Paper excels at implementing standard mobile UI patterns. Here are practical implementations for common scenarios.

Lists with Actions

The DataTable component handles large datasets elegantly with built-in sorting and pagination:

import { DataTable, Text, IconButton } from 'react-native-paper';

export function UserList({ users, onEdit, onDelete }) {
  return (
    <DataTable>
      <DataTable.Header>
        <DataTable.Title>Name</DataTable.Title>
        <DataTable.Title>Email</DataTable.Title>
        <DataTable.Title>Actions</DataTable.Title>
      </DataTable.Header>

      {users.map((user) => (
        <DataTable.Row key={user.id}>
          <DataTable.Cell>{user.name}</DataTable.Cell>
          <DataTable.Cell>{user.email}</DataTable.Cell>
          <DataTable.Cell>
            <IconButton icon="pencil" onPress={() => onEdit(user)} />
            <IconButton icon="delete" onPress={() => onDelete(user.id)} />
          </DataTable.Cell>
        </DataTable.Row>
      ))}
    </DataTable>
  );
}

Form Components

Paper provides TextInput with built-in validation states and helper text:

import { TextInput, HelperText, Button } from 'react-native-paper';
import { useState } from 'react';

export function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!email.includes('@')) {
      newErrors.email = 'Invalid email address';
    }
    if (password.length < 8) {
      newErrors.password = 'Password must be at least 8 characters';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) {
      onSubmit({ email, password });
    }
  };

  return (
    <>
      <TextInput
        label="Email"
        value={email}
        onChangeText={setEmail}
        mode="outlined"
        error={!!errors.email}
        keyboardType="email-address"
      />
      <HelperText type="error" visible={!!errors.email}>
        {errors.email}
      </HelperText>

      <TextInput
        label="Password"
        value={password}
        onChangeText={setPassword}
        mode="outlined"
        error={!!errors.password}
        secureTextEntry
      />
      <HelperText type="error" visible={!!errors.password}>
        {errors.password}
      </HelperText>

      <Button mode="contained" onPress={handleSubmit}>
        Sign In
      </Button>
    </>
  );
}

Combine React Native Paper with React Navigation for complete screen management. The Appbar component works well with navigation headers:

import { Appbar } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';

export function ScreenHeader({ title }) {
  const navigation = useNavigation();

  return (
    <Appbar.Header>
      <Appbar.BackAction onPress={() => navigation.goBack()} />
      <Appbar.Content title={title} />
      <Appbar.Action icon="magnify" onPress={() => {}} />
      <Appbar.Action icon="dots-vertical" onPress={() => {}} />
    </Appbar.Header>
  );
}

The frontend-design skill can generate entire screen layouts based on descriptions. For example, describe a settings screen with specific sections, and Claude Code will produce the complete component structure with appropriate Paper components.

State Management Integration

React Native Paper works well with various state management solutions. For simpler applications, React Context provides adequate state sharing:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);

  const toggleTheme = () => setIsDark(!isDark);

  const theme = isDark ? darkTheme : lightTheme;

  return (
    <ThemeContext.Provider value={{ theme, isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

For complex applications, consider integrating with Redux Toolkit for state management. The supermemory skill helps maintain context across sessions when working on larger feature implementations that span multiple development sessions.

Documentation and Asset Generation

Once your components are built, the pdf skill generates documentation from your component files:

# Generate component documentation
"Create a PDF documenting all the Paper components used in this project with props tables"

The canvas-design skill assists with generating icons and visual assets when you need custom graphics that match your Paper-based UI.

Testing Considerations

Mobile UI testing requires attention to platform-specific behaviors. Use the tdd skill to establish testing patterns:

import { render, fireEvent, waitFor } from '@testing-library/react-native';
import { Provider as PaperProvider } from 'react-native-paper';

const wrapper = ({ children }) => (
  <PaperProvider>{children}</PaperProvider>
);

describe('Mobile Components', () => {
  it('handles touch interactions correctly', async () => {
    const { getByText } = render(
      <Button onPress={handlePress}>Press Me</Button>,
      { wrapper }
    );
    
    fireEvent.press(getByText('Press Me'));
    
    await waitFor(() => {
      expect(handlePress).toHaveBeenCalled();
    });
  });
});

Performance Optimization

React Native Paper components are optimized for performance, but you can enhance them further:

Use React.memo for components that render frequently with the same props
Implement useCallback for event handlers passed to Paper components
Use the pagination prop on DataTable for large datasets

The frontend-design skill can analyze your component tree and suggest performance improvements specific to your implementation.

Building mobile UIs with React Native Paper becomes significantly more productive when combined with Claude Code’s specialized skills. The frontend-design skill accelerates component generation, the tdd skill ensures test coverage, and the pdf skill automates documentation. These tools together form a powerful development workflow for cross-platform mobile applications. For more on best frontend development skills, see the dedicated guide.

Built by theluckystrike — More at zovo.one