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

Cards & Surfaces

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

Layout components for organizing content including cards, surfaces, and dividers with Material Design elevation and styling.

Capabilities

Card

Container component for grouping related content with optional actions and elevation.

function Card(props: CardProps): JSX.Element;

interface CardProps {
  children: React.ReactNode;
  mode?: 'elevated' | 'outlined' | 'contained';
  elevation?: MD3Elevation;
  style?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

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;
}

interface CardTitleProps {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  left?: (props: { size: number }) => React.ReactNode;
  right?: (props: { size: number }) => React.ReactNode;
  leftStyle?: StyleProp<ViewStyle>;
  rightStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  subtitleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

interface CardContentProps {
  children: React.ReactNode;
  index?: number;
  total?: number;
  siblings?: Array<string>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

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

interface CardCoverProps {
  source: ImageSourcePropType;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Usage Example:

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

<Card>
  <Card.Title
    title="Card Title"
    subtitle="Card Subtitle"
    left={(props) => <Avatar.Icon {...props} icon="folder" />}
  />
  <Card.Content>
    <Text>Card content</Text>
  </Card.Content>
  <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
  <Card.Actions>
    <Button>Cancel</Button>
    <Button>Ok</Button>
  </Card.Actions>
</Card>

Surface

Basic container with Material Design elevation and theming.

function Surface(props: SurfaceProps): JSX.Element;

interface SurfaceProps {
  children: React.ReactNode;
  elevation?: MD3Elevation;
  mode?: 'flat' | 'elevated';
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Divider

Visual separator line component.

function Divider(props: DividerProps): JSX.Element;

interface DividerProps {
  bold?: boolean;
  horizontalInset?: boolean;
  leftInset?: boolean;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Usage Examples:

import React from 'react';
import { Surface, Divider } from 'react-native-paper';
import { View, Text } from 'react-native';

// Surface with elevation
<Surface elevation={4} style={{ padding: 16 }}>
  <Text>Content with elevation</Text>
</Surface>

// Divider between items
<View>
  <Text>Item 1</Text>
  <Divider />
  <Text>Item 2</Text>
</View>

Types

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

interface ImageSourcePropType {
  // React Native image source type
}

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