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

Overlays & Feedback

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

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

Capabilities

Dialog

Modal dialog component with multiple sub-components for content organization.

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

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

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

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

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

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

function Menu(props: MenuProps): JSX.Element;

interface MenuProps {
  visible: boolean;
  onDismiss: () => void;
  anchor: React.ReactNode | { x: number; y: number };
  children: React.ReactNode;
  contentStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

namespace Menu {
  function Item(props: MenuItemProps): JSX.Element;
}

interface MenuItemProps {
  title: string;
  icon?: IconSource;
  onPress?: () => void;
  disabled?: boolean;
  accessibilityLabel?: string;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  theme?: ThemeProp;
}

Modal

Basic modal overlay component.

function Modal(props: ModalProps): JSX.Element;

interface ModalProps {
  visible: boolean;
  onDismiss?: () => void;
  children: React.ReactNode;
  dismissable?: boolean;
  contentContainerStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Portal

Portal component for rendering content outside normal component hierarchy.

function Portal(props: PortalProps): JSX.Element;

interface PortalProps {
  children: React.ReactNode;
}

namespace Portal {
  function Host(props: PortalHostProps): JSX.Element;
}

interface PortalHostProps {
  children: React.ReactNode;
}

Snackbar

Toast message component for brief feedback.

function Snackbar(props: SnackbarProps): JSX.Element;

interface SnackbarProps {
  visible: boolean;
  onDismiss: () => void;
  children: React.ReactNode;
  action?: {
    label: string;
    onPress: () => void;
    accessibilityLabel?: string;
  };
  duration?: number;
  elevation?: MD3Elevation;
  onIconPress?: () => void;
  icon?: IconSource;
  iconAccessibilityLabel?: string;
  rippleColor?: ColorValue;
  style?: StyleProp<ViewStyle>;
  wrapperStyle?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

Tooltip

Tooltip component for contextual information.

function Tooltip(props: TooltipProps): JSX.Element;

interface TooltipProps {
  title: string;
  children: React.ReactElement;
  enterTouchDelay?: number;
  leaveTouchDelay?: number;
  theme?: ThemeProp;
}

Usage Examples:

import React, { useState } from 'react';
import { Dialog, Menu, Modal, Snackbar, Portal, Button, Text } from 'react-native-paper';

// Dialog example
function DialogExample() {
  const [visible, setVisible] = useState(false);

  return (
    <Portal>
      <Dialog visible={visible} onDismiss={() => setVisible(false)}>
        <Dialog.Title>Alert</Dialog.Title>
        <Dialog.Content>
          <Text>This is a dialog</Text>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onPress={() => setVisible(false)}>Done</Button>
        </Dialog.Actions>
      </Dialog>
    </Portal>
  );
}

// Menu example
function MenuExample() {
  const [visible, setVisible] = useState(false);

  return (
    <Menu
      visible={visible}
      onDismiss={() => setVisible(false)}
      anchor={<Button onPress={() => setVisible(true)}>Show menu</Button>}
    >
      <Menu.Item onPress={() => {}} title="Item 1" />
      <Menu.Item onPress={() => {}} title="Item 2" />
    </Menu>
  );
}

// Snackbar example
function SnackbarExample() {
  const [visible, setVisible] = useState(false);

  return (
    <Snackbar
      visible={visible}
      onDismiss={() => setVisible(false)}
      action={{
        label: 'Undo',
        onPress: () => {
          // Do something
        },
      }}
    >
      Hey there! I'm a Snackbar.
    </Snackbar>
  );
}

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