tessl/npm-react-native-paper

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

—

Pending

Overview

Eval results

Files

Typography & Display

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

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

Capabilities

Text

Base text component with Material Design typography scaling.

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

interface TextProps {
  variant?: keyof MD3Typescale;
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

MD2 Typography Components

Backward-compatible typography components for Material Design 2.

function Caption(props: CaptionProps): JSX.Element;
function Headline(props: HeadlineProps): JSX.Element;
function Paragraph(props: ParagraphProps): JSX.Element;
function Subheading(props: SubheadingProps): JSX.Element;
function Title(props: TitleProps): JSX.Element;

interface CaptionProps {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

interface HeadlineProps {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

interface ParagraphProps {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

interface SubheadingProps {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

interface TitleProps {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

Avatar

Avatar components for displaying user profile images, icons, or text.

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

interface AvatarIconProps {
  icon: IconSource;
  size?: number;
  color?: string;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface AvatarImageProps {
  source: ImageSourcePropType;
  size?: number;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface AvatarTextProps {
  label: string;
  size?: number;
  color?: string;
  labelStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Badge

Small status indicator typically used with other components.

function Badge(props: BadgeProps): JSX.Element;

interface BadgeProps {
  children?: React.ReactNode;
  size?: number;
  visible?: boolean;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Chip

Compact element representing an input, attribute, or action.

function Chip(props: ChipProps): JSX.Element;

interface ChipProps {
  children: React.ReactNode;
  mode?: 'flat' | 'outlined';
  avatar?: React.ReactNode;
  icon?: IconSource;
  closeIcon?: IconSource;
  selected?: boolean;
  disabled?: boolean;
  onPress?: () => void;
  onClose?: () => void;
  onLongPress?: () => void;
  delayLongPress?: number;
  rippleColor?: ColorValue;
  selectedColor?: string;
  showSelectedOverlay?: boolean;
  showSelectedCheck?: boolean;
  compact?: boolean;
  elevated?: boolean;
  textStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Icon

Icon component for displaying icons from various sources.

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

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

Usage Examples:

import React from 'react';
import { Text, Avatar, Badge, Chip, Icon } from 'react-native-paper';
import { View } from 'react-native';

// Typography examples
<Text variant="headlineMedium">Large Headline</Text>
<Text variant="bodyMedium">Body text</Text>
<Paragraph>Legacy paragraph component</Paragraph>

// Avatar examples
<Avatar.Icon size={64} icon="account" />
<Avatar.Image size={64} source={{uri: 'https://example.com/avatar.jpg'}} />
<Avatar.Text size={64} label="JD" />

// Badge and Chip examples
<View>
  <Badge>3</Badge>
  <Badge visible={true} size={8} style={{ position: 'absolute', top: 0, right: 0 }} />
</View>

<Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
<Chip mode="outlined" selected closeIcon="close" onClose={() => console.log('Closed')}>Closable Chip</Chip>

// Icon examples
<Icon source="star" size={24} color="gold" />
<Icon source={require('./assets/custom-icon.png')} size={32} />

Types

type MD3Typescale = {
  displayLarge: MD3Type;
  displayMedium: MD3Type;
  displaySmall: MD3Type;
  headlineLarge: MD3Type;
  headlineMedium: MD3Type;
  headlineSmall: MD3Type;
  titleLarge: MD3Type;
  titleMedium: MD3Type;
  titleSmall: MD3Type;
  labelLarge: MD3Type;
  labelMedium: MD3Type;
  labelSmall: MD3Type;
  bodyLarge: MD3Type;
  bodyMedium: MD3Type;
  bodySmall: MD3Type;
  default: Omit<MD3Type, 'lineHeight' | 'fontSize'>;
};

interface MD3Type {
  fontFamily: string;
  letterSpacing: number;
  fontWeight: Font['fontWeight'];
  lineHeight: number;
  fontSize: number;
  fontStyle?: Font['fontStyle'];
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native-paper

docs

lists-data-display.md

overlays-feedback.md

progress-status.md

provider-theming.md

typography-display.md

tile.json

tessl/npm-react-native-paper