What is React Native Paper?

React Native Paper is a Material Design 3 component library for React Native. It provides pre-built, styled components that follow Google’s Material Design guidelines.

Why Use a Component Library?

Instead of building buttons, cards, and inputs from scratch, Paper provides:

• Pre-built components - Buttons, Cards, TextInputs, Dialogs, etc.
• Consistent design - All components follow Material Design
• Accessibility - Built-in accessibility features
• Theming - Easy to customize colors, fonts, etc.
• Well-tested - Used by thousands of apps

Official Documentation: reactnativepaper.com

Getting Started

React Native Paper is already configured in the starter code. The theme is set up in mobile/theme.ts and the provider wraps the app in mobile/app/_layout.tsx.

Common Paper Components

1. Layout

• Surface - Container component with elevation and background color.
• Divider - Horizontal divider line for separating content.

2. Form

• TextInput - Text input field with label, helper text, and error states.
• Button - Button component with multiple modes (contained, outlined, text, elevated).
• Switch - Toggle switch for boolean values.
• Checkbox - Checkbox for multiple selections.
• RadioButton - Radio button for single selection from a group.

3. Feedback

• ActivityIndicator - Loading spinner indicator.
• Snackbar - Temporary message notification that appears at the bottom of the screen.
• Banner - Banner component for displaying important messages.

4. Data Display

• Card - Card container with optional sections (title, content, actions).
• List - List component with icons, avatars, and actions.
• Chip - Compact element representing input, attribute, or action.
• Badge - Badge component for displaying small status indicators.
• DataTable - Table component for displaying structured data.

5. Overlay

• Dialog - Modal dialog overlay for focused interactions.
• Portal - Renders children outside the component tree (useful for modals).

Component Examples

import { Button, Card, TextInput, Dialog, Snackbar } from 'react-native-paper';

// Button with different modes
<Button mode="contained" onPress={handlePress}>
  Contained Button
</Button>
<Button mode="outlined" onPress={handlePress}>
  Outlined Button
</Button>
<Button mode="text" onPress={handlePress}>
  Text Button
</Button>

// Card with title, content, and actions
<Card>
  <Card.Title title="Card Title" subtitle="Card Subtitle" />
  <Card.Content>
    <Text>Card content goes here</Text>
  </Card.Content>
  <Card.Actions>
    <Button>Cancel</Button>
    <Button>Ok</Button>
  </Card.Actions>
</Card>

// Text Input with label and error state
<TextInput
  label="Email"
  value={email}
  onChangeText={setEmail}
  mode="outlined"
  error={hasError}
  helperText={hasError ? "Invalid email" : ""}
/>

// Dialog
<Dialog visible={visible} onDismiss={hideDialog}>
  <Dialog.Title>Alert</Dialog.Title>
  <Dialog.Content>
    <Text>This is a dialog message</Text>
  </Dialog.Content>
  <Dialog.Actions>
    <Button onPress={hideDialog}>Cancel</Button>
    <Button onPress={handleConfirm}>OK</Button>
  </Dialog.Actions>
</Dialog>

// Snackbar for notifications
<Snackbar
  visible={snackbarVisible}
  onDismiss={() => setSnackbarVisible(false)}
  duration={3000}
>
  Action completed!
</Snackbar>

Hooks

• useTheme - Hook to access the Paper theme object.
• usePaperTheme - Hook to access Paper-specific theme properties.

import { useTheme } from 'react-native-paper';

function MyComponent() {
  const theme = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.primary }}>
      {/* Use theme colors */}
    </View>
  );
}

Icons

React Native Paper works with Material Community Icons (already installed in the starter code):

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

<Icon name="home" size={24} color="#000" />

Icon Library: Material Design Icons

Theming

React Native Paper supports theming through the PaperProvider component. The theme is configured in mobile/theme.ts and uses design tokens for consistency.

import { PaperProvider } from 'react-native-paper';
import { appTheme } from './theme';

function App() {
  return (
    <PaperProvider theme={appTheme}>
      {/* Your app components */}
    </PaperProvider>
  );
}

Resources

React Native Paper

• React Native Paper Documentation
• Components Reference
• Theming Guide
• GitHub Repository
• Material Design Icons