or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons-actions.mdcards-surfaces.mdform-controls.mdindex.mdlists-data-display.mdnavigation.mdoverlays-feedback.mdprogress-status.mdprovider-theming.mdreact-navigation.mdtypography-display.md
tile.json

tessl/npm-react-native-paper

Material Design component library for React Native applications with comprehensive theming and cross-platform support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-paper@5.14.x

To install, run

npx @tessl/cli install tessl/npm-react-native-paper@5.14.0

index.mddocs/

React Native Paper

React Native Paper is a comprehensive Material Design component library for React Native applications. It provides a complete collection of Material Design components that work seamlessly across iOS and Android platforms, with full theming support, TypeScript integration, and extensive customization options.

Package Information

  • Package Name: react-native-paper
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-paper or yarn add react-native-paper

Core Imports

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

CommonJS:

const { PaperProvider, Button, Card } = require('react-native-paper');

Basic Usage

import React from 'react';
import { PaperProvider, Button, Card, Text } from 'react-native-paper';
import { View } from 'react-native';

export default function App() {
  return (
    <PaperProvider>
      <View style={{ flex: 1, padding: 16 }}>
        <Card>
          <Card.Title title="Welcome" subtitle="React Native Paper" />
          <Card.Content>
            <Text>This is a Material Design card component.</Text>
          </Card.Content>
          <Card.Actions>
            <Button mode="contained">
              Get Started
            </Button>
          </Card.Actions>
        </Card>
      </View>
    </PaperProvider>
  );
}

Architecture

React Native Paper is built around several key architectural concepts:

  • Provider System: PaperProvider wraps your app and provides theme context to all components
  • Material Design 3: Latest Material Design guidelines with full MD3 token support and backwards compatibility with MD2
  • Theming Engine: Comprehensive theming system with light/dark mode support, custom color schemes, and typography scaling
  • Component Composition: Complex components built from smaller composable parts (e.g., Card.Title, Card.Content)
  • Platform Adaptation: Components automatically adapt to iOS and Android design patterns while maintaining Material Design principles
  • TypeScript Integration: Full type safety with comprehensive prop interfaces and theme typing

Capabilities

Core Provider & Theming

Essential provider components and theming utilities for setting up React Native Paper in your application.

function PaperProvider(props: ProviderProps): JSX.Element;

interface ProviderProps {
  theme?: MD3Theme | MD2Theme;
  children: React.ReactNode;
  settings?: {
    icon?: IconSource;
  };
}

function useTheme<T = MD3Theme>(overrides?: $DeepPartial<T>): T;
function withTheme<Props, C>(WrappedComponent: ComponentType<Props & { theme: MD3Theme | MD2Theme }> & C): ComponentType<Props> & C;

Provider & Theming

Buttons & Actions

Interactive components for user actions including buttons, floating action buttons, and icon buttons.

function Button(props: ButtonProps): JSX.Element;
function IconButton(props: IconButtonProps): JSX.Element;
function FAB(props: FABProps): JSX.Element;
function TouchableRipple(props: TouchableRippleProps): JSX.Element;

interface ButtonProps {
  mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
  children: React.ReactNode;
  onPress?: () => void;
  disabled?: boolean;
  loading?: boolean;
  icon?: IconSource;
}

Buttons & Actions

Form Controls

Input components including text fields, checkboxes, radio buttons, switches, and form validation helpers.

function TextInput(props: TextInputProps): JSX.Element;
function Checkbox(props: CheckboxProps): JSX.Element;
function RadioButton(props: RadioButtonProps): JSX.Element;
function Switch(props: SwitchProps): JSX.Element;

interface TextInputProps {
  label?: string;
  placeholder?: string;
  value: string;
  onChangeText: (text: string) => void;
  mode?: 'flat' | 'outlined';
  error?: boolean;
  disabled?: boolean;
}

Form Controls

Cards & Surfaces

Layout components for organizing content including cards, surfaces, and dividers.

function Card(props: CardProps): JSX.Element;
function Surface(props: SurfaceProps): JSX.Element;
function Divider(props: DividerProps): JSX.Element;

namespace Card {
  function Title(props: CardTitleProps): JSX.Element;
  function Content(props: CardContentProps): JSX.Element;
  function Actions(props: CardActionsProps): JSX.Element;
  function Cover(props: CardCoverProps): JSX.Element;
}

Cards & Surfaces

Lists & Data Display

Components for displaying structured data including lists, data tables, and related components.

namespace List {
  function Item(props: ListItemProps): JSX.Element;
  function Accordion(props: ListAccordionProps): JSX.Element;
  function Section(props: ListSectionProps): JSX.Element;
  function Icon(props: ListIconProps): JSX.Element;
  function Image(props: ListImageProps): JSX.Element;
}

function DataTable(props: DataTableProps): JSX.Element;

namespace DataTable {
  function Header(props: DataTableHeaderProps): JSX.Element;
  function Row(props: DataTableRowProps): JSX.Element;
  function Cell(props: DataTableCellProps): JSX.Element;
}

Lists & Data Display

Navigation Components

Navigation and app structure components including app bars, bottom navigation, and drawer components.

namespace Appbar {
  function Header(props: AppbarHeaderProps): JSX.Element;
  function Content(props: AppbarContentProps): JSX.Element;
  function Action(props: AppbarActionProps): JSX.Element;
  function BackAction(props: AppbarBackActionProps): JSX.Element;
}

function BottomNavigation(props: BottomNavigationProps): JSX.Element;

namespace Drawer {
  function Item(props: DrawerItemProps): JSX.Element;
  function Section(props: DrawerSectionProps): JSX.Element;
  function CollapsedItem(props: DrawerCollapsedItemProps): JSX.Element;
}

Navigation

Overlays & Feedback

Modal and overlay components including dialogs, menus, modals, portals, and feedback components.

namespace Dialog {
  function Title(props: DialogTitleProps): JSX.Element;
  function Content(props: DialogContentProps): JSX.Element;
  function Actions(props: DialogActionsProps): JSX.Element;
  function ScrollArea(props: DialogScrollAreaProps): JSX.Element;
  function Icon(props: DialogIconProps): JSX.Element;
}

function Menu(props: MenuProps): JSX.Element;
function Modal(props: ModalProps): JSX.Element;
function Portal(props: PortalProps): JSX.Element;
function Snackbar(props: SnackbarProps): JSX.Element;

Overlays & Feedback

Typography & Display

Text and display components including typography variants, avatars, badges, chips, and icons.

function Text(props: TextProps): JSX.Element;
function customText(variant: keyof MD3Typescale): ComponentType<TextProps>;

namespace Avatar {
  function Icon(props: AvatarIconProps): JSX.Element;
  function Image(props: AvatarImageProps): JSX.Element;
  function Text(props: AvatarTextProps): JSX.Element;
}

function Badge(props: BadgeProps): JSX.Element;
function Chip(props: ChipProps): JSX.Element;
function Icon(props: { source: IconSource; size?: number; color?: string }): JSX.Element;

Typography & Display

Progress & Status

Components for showing loading states, progress, and status information.

function ActivityIndicator(props: ActivityIndicatorProps): JSX.Element;
function ProgressBar(props: ProgressBarProps): JSX.Element;
function Banner(props: BannerProps): JSX.Element;

interface ActivityIndicatorProps {
  animating?: boolean;
  color?: string;
  size?: number | 'small' | 'large';
  hidesWhenStopped?: boolean;
}

Progress & Status

React Navigation Integration

Components and utilities for integrating with React Navigation, including Material bottom tab navigation.

function createMaterialBottomTabNavigator(): TypedNavigator<ParamListBase, NavigationState, MaterialBottomTabNavigationOptions, MaterialBottomTabNavigationEventMap, MaterialBottomTabNavigationProp<ParamListBase>>;

function MaterialBottomTabView(props: MaterialBottomTabViewProps): JSX.Element;

function adaptNavigationTheme<T extends NavigationTheme>(themes: {
  reactNavigationLight?: T;
  reactNavigationDark?: T;
  materialLight?: MD3Theme;
  materialDark?: MD3Theme;
}): { LightTheme?: T; DarkTheme?: T };

React Navigation Integration

Core Types

type IconSource = string | ImageSourcePropType | {
  default: ImageSourcePropType;
} | {
  ios: ImageSourcePropType;
  android: ImageSourcePropType;
};

interface MD3Theme extends ThemeBase {
  version: 3;
  isV3: true;
  colors: MD3Colors;
  fonts: MD3Typescale;
}

interface MD2Theme extends ThemeBase {
  version: 2;
  isV3: false;
  colors: MD2Colors;
  fonts: Fonts;
}

interface ThemeBase {
  dark: boolean;
  mode?: 'adaptive' | 'exact';
  roundness: number;
  animation: {
    scale: number;
    defaultAnimationDuration?: number;
  };
}

type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;

enum MD3TypescaleKey {
  displayLarge = 'displayLarge',
  displayMedium = 'displayMedium',
  displaySmall = 'displaySmall',
  headlineLarge = 'headlineLarge',
  headlineMedium = 'headlineMedium',
  headlineSmall = 'headlineSmall',
  titleLarge = 'titleLarge',
  titleMedium = 'titleMedium',
  titleSmall = 'titleSmall',
  labelLarge = 'labelLarge',
  labelMedium = 'labelMedium',
  labelSmall = 'labelSmall',
  bodyLarge = 'bodyLarge',
  bodyMedium = 'bodyMedium',
  bodySmall = 'bodySmall',
}