tessl/npm-react-native-paper

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Native Paper

Name: tessl/npm-react-native-paper
Author: tessl

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',
}