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

Buttons & Actions

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

Interactive components for user actions including buttons, floating action buttons, icon buttons, and touchable elements with Material Design styling.

Capabilities

Button

Primary button component with multiple modes following Material Design guidelines.

/**
 * Button component with Material Design styling
 * @param props - Button configuration and content
 * @returns JSX Element for the button
 */
function Button(props: ButtonProps): JSX.Element;

interface ButtonProps {
  /** Button styling mode */
  mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
  /** Button content/label */
  children: React.ReactNode;
  /** Press handler function */
  onPress?: (event: GestureResponderEvent) => void;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Whether to show loading spinner */
  loading?: boolean;
  /** Icon to display in button */
  icon?: IconSource;
  /** Use compact styling */
  compact?: boolean;
  /** Custom background color */
  buttonColor?: string;
  /** Custom text color */
  textColor?: string;
  /** Make label text uppercase */
  uppercase?: boolean;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Whether color is dark (affects text color) */
  dark?: boolean;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Accessibility hint */
  accessibilityHint?: string;
  /** Accessibility role */
  accessibilityRole?: AccessibilityRole;
  /** Test ID for testing */
  testID?: string;
  /** Long press handler */
  onLongPress?: (event: GestureResponderEvent) => void;
  /** Press in handler */
  onPressIn?: (event: GestureResponderEvent) => void;
  /** Press out handler */
  onPressOut?: (event: GestureResponderEvent) => void;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Custom content style */
  contentStyle?: StyleProp<ViewStyle>;
  /** Custom label style */
  labelStyle?: StyleProp<TextStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Examples:

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

// Basic button
<Button mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>

// Button with icon
<Button mode="outlined" icon="camera" onPress={handlePress}>
  Take Photo
</Button>

// Loading button
<Button mode="contained" loading={isLoading} disabled={isLoading}>
  {isLoading ? 'Loading...' : 'Submit'}
</Button>

// Custom styled button
<Button 
  mode="contained-tonal" 
  buttonColor="#6200EE" 
  textColor="white"
  contentStyle={{ height: 50 }}
>
  Custom Button
</Button>

IconButton

Button component that displays only an icon, useful for toolbars and compact layouts.

/**
 * Button component that displays only an icon
 * @param props - Icon button configuration
 * @returns JSX Element for the icon button
 */
function IconButton(props: IconButtonProps): JSX.Element;

interface IconButtonProps {
  /** Icon to display */
  icon: IconSource;
  /** Icon size */
  size?: number;
  /** Icon color */
  iconColor?: string;
  /** Press handler */
  onPress?: (event: GestureResponderEvent) => void;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button mode styling */
  mode?: 'text' | 'outlined' | 'contained' | 'contained-tonal';
  /** Custom container color */
  containerColor?: string;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Whether button is selected (toggle state) */
  selected?: boolean;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Test ID */
  testID?: string;
  /** Long press handler */
  onLongPress?: (event: GestureResponderEvent) => void;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Examples:

import React from 'react';
import { IconButton } from 'react-native-paper';

// Basic icon button
<IconButton icon="heart" onPress={() => console.log('Liked')} />

// Styled icon button
<IconButton 
  icon="share" 
  mode="contained"
  containerColor="#E1F5FE"
  iconColor="#0277BD"
  size={24}
  onPress={handleShare}
/>

// Toggle icon button
<IconButton 
  icon={isFavorite ? "heart" : "heart-outline"}
  selected={isFavorite}
  onPress={() => setIsFavorite(!isFavorite)}
/>

Floating Action Button (FAB)

Prominent circular button for primary actions, typically positioned at the bottom-right of the screen.

/**
 * Floating Action Button component
 * @param props - FAB configuration
 * @returns JSX Element for the FAB
 */
function FAB(props: FABProps): JSX.Element;

interface FABProps {
  /** Icon to display in FAB */
  icon: IconSource;
  /** Press handler */
  onPress?: (event: GestureResponderEvent) => void;
  /** FAB size variant */
  size?: 'small' | 'medium' | 'large';
  /** FAB mode/style variant */
  mode?: 'surface' | 'primary' | 'secondary' | 'tertiary';
  /** Whether FAB is disabled */
  disabled?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Optional label text */
  label?: string;
  /** Whether FAB is extended (with label) */
  extended?: boolean;
  /** Custom background color */
  color?: string;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Custom icon color */
  customSize?: number;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Test ID */
  testID?: string;
  /** Long press handler */
  onLongPress?: (event: GestureResponderEvent) => void;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Examples:

import React from 'react';
import { FAB } from 'react-native-paper';

// Basic FAB
<FAB icon="plus" onPress={() => addItem()} />

// Extended FAB with label
<FAB 
  icon="plus" 
  label="Add Item"
  extended
  onPress={handleAdd}
/>

// Small FAB
<FAB 
  icon="edit" 
  size="small"
  onPress={handleEdit}
  style={{ position: 'absolute', bottom: 16, right: 16 }}
/>

// Custom styled FAB
<FAB 
  icon="camera"
  mode="primary"
  color="#FF5722"
  size="large"
  onPress={takePicture}
/>

FAB Group

Container for multiple related FABs that can expand/collapse.

/**
 * FAB Group component for multiple related actions
 * @param props - FAB Group configuration
 * @returns JSX Element for the FAB group
 */
namespace FAB {
  function Group(props: FABGroupProps): JSX.Element;
}

interface FABGroupProps {
  /** Whether the group is open */
  open: boolean;
  /** Handler for open/close state changes */
  onStateChange: (state: { open: boolean }) => void;
  /** Icon for the main FAB */
  icon: IconSource;
  /** Array of action FABs */
  actions: Array<{
    icon: IconSource;
    label?: string;
    onPress: () => void;
    color?: string;
    accessibilityLabel?: string;
    testID?: string;
    size?: 'small' | 'medium';
    disabled?: boolean;
    style?: StyleProp<ViewStyle>;
  }>;
  /** Color of the main FAB */
  color?: string;
  /** Custom backdrop color */
  backdropColor?: string;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Accessibility label for main FAB */
  accessibilityLabel?: string;
  /** Test ID */
  testID?: string;
  /** Custom style for main FAB */
  fabStyle?: StyleProp<ViewStyle>;
  /** Custom style for container */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Example:

import React, { useState } from 'react';
import { FAB } from 'react-native-paper';

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <FAB.Group
      open={open}
      icon={open ? 'close' : 'plus'}
      actions={[
        {
          icon: 'camera',
          label: 'Take Photo',
          onPress: () => console.log('Take photo'),
        },
        {
          icon: 'image',
          label: 'Choose Image',
          onPress: () => console.log('Choose image'),
        },
        {
          icon: 'file-document',
          label: 'Create Document',
          onPress: () => console.log('Create document'),
        },
      ]}
      onStateChange={({ open }) => setOpen(open)}
    />
  );
}

Animated FAB

FAB with entrance/exit animations and extended mode support.

/**
 * Animated Floating Action Button with entrance/exit animations
 * @param props - Animated FAB configuration
 * @returns JSX Element for the animated FAB
 */
function AnimatedFAB(props: AnimatedFABProps): JSX.Element;

interface AnimatedFABProps {
  /** Icon to display */
  icon: IconSource;
  /** Optional label text */
  label?: string;
  /** Whether FAB should be extended with label */
  extended: boolean;
  /** Press handler */
  onPress?: (event: GestureResponderEvent) => void;
  /** Whether FAB is visible */
  visible?: boolean;
  /** Animation duration in ms */
  animateFrom?: 'left' | 'right';
  /** Icon color */
  iconColor?: string;
  /** Custom background color */
  color?: string;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Whether FAB is disabled */
  disabled?: boolean;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Test ID */
  testID?: string;
  /** Long press handler */
  onLongPress?: (event: GestureResponderEvent) => void;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Example:

import React, { useState, useEffect } from 'react';
import { AnimatedFAB } from 'react-native-paper';
import { useScrollToTop } from '@react-navigation/native';

function ScrollableScreen() {
  const [isExtended, setIsExtended] = useState(true);
  const [visible, setVisible] = useState(true);

  const onScroll = ({ nativeEvent }) => {
    const currentScrollPosition = Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
    setIsExtended(currentScrollPosition <= 0);
  };

  return (
    <>
      <ScrollView onScroll={onScroll}>
        {/* Content */}
      </ScrollView>
      <AnimatedFAB
        icon="plus"
        label="Add Item"
        extended={isExtended}
        onPress={() => console.log('Add pressed')}
        visible={visible}
        animateFrom="right"
        style={{ bottom: 16, right: 16, position: 'absolute' }}
      />
    </>
  );
}

TouchableRipple

Low-level touchable component with Material Design ripple effect.

/**
 * Touchable component with Material Design ripple effect
 * @param props - TouchableRipple configuration
 * @returns JSX Element with ripple touch feedback
 */
function TouchableRipple(props: TouchableRippleProps): JSX.Element;

interface TouchableRippleProps {
  /** Content to make touchable */
  children: React.ReactNode;
  /** Press handler */
  onPress?: (event: GestureResponderEvent) => void;
  /** Long press handler */
  onLongPress?: (event: GestureResponderEvent) => void;
  /** Press in handler */
  onPressIn?: (event: GestureResponderEvent) => void;
  /** Press out handler */
  onPressOut?: (event: GestureResponderEvent) => void;
  /** Whether touch is disabled */
  disabled?: boolean;
  /** Color of ripple effect */
  rippleColor?: ColorValue;
  /** Color of underlay (iOS) */
  underlayColor?: ColorValue;
  /** Whether ripple is centered */
  centered?: boolean;
  /** Whether ripple is borderless */
  borderless?: boolean;
  /** Custom ripple radius */
  radius?: number;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Accessibility role */
  accessibilityRole?: AccessibilityRole;
  /** Accessibility state */
  accessibilityState?: {
    disabled?: boolean;
    selected?: boolean;
    checked?: boolean | 'mixed';
    busy?: boolean;
    expanded?: boolean;
  };
  /** Test ID */
  testID?: string;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Example:

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

<TouchableRipple
  onPress={() => console.log('Pressed')}
  rippleColor="rgba(0, 0, 0, .32)"
>
  <View style={{ padding: 16 }}>
    <Text>Custom touchable content</Text>
  </View>
</TouchableRipple>

Toggle Button Components

Button components for selection and toggle states.

/**
 * Toggle button for binary selection
 * @param props - Toggle button configuration
 * @returns JSX Element for toggle button
 */
function ToggleButton(props: ToggleButtonProps): JSX.Element;

interface ToggleButtonProps {
  /** Icon to display */
  icon: IconSource;
  /** Press handler */
  onPress?: () => void;
  /** Whether button is selected/pressed */
  status?: 'checked' | 'unchecked';
  /** Whether button is disabled */
  disabled?: boolean;
  /** Custom icon size */
  size?: number;
  /** Custom icon color */
  iconColor?: string;
  /** Ripple color */
  rippleColor?: ColorValue;
  /** Accessibility label */
  accessibilityLabel?: string;
  /** Test ID */
  testID?: string;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

/**
 * Group of toggle buttons for multi-selection
 * @param props - Toggle button group configuration
 * @returns JSX Element for toggle button group
 */
namespace ToggleButton {
  function Group(props: ToggleButtonGroupProps): JSX.Element;
  function Row(props: ToggleButtonRowProps): JSX.Element;
}

interface ToggleButtonGroupProps {
  /** Value change handler */
  onValueChange: (value: string) => void;
  /** Currently selected value */
  value: string;
  /** Array of button configurations */
  buttons: Array<{
    value: string;
    icon: IconSource;
    disabled?: boolean;
    accessibilityLabel?: string;
    testID?: string;
  }>;
  /** Density mode */
  density?: 'regular' | 'medium' | 'high';
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

interface ToggleButtonRowProps {
  /** Multi-value change handler */
  onValueChange: (value: string[]) => void;
  /** Currently selected values */
  value: string[];
  /** Array of button configurations */
  buttons: Array<{
    value: string;
    icon: IconSource;
    disabled?: boolean;
    accessibilityLabel?: string;
    testID?: string;
  }>;
  /** Density mode */
  density?: 'regular' | 'medium' | 'high';
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Examples:

import React, { useState } from 'react';
import { ToggleButton } from 'react-native-paper';

// Single toggle button
function SingleToggle() {
  const [status, setStatus] = useState('unchecked');
  
  return (
    <ToggleButton
      icon="heart"
      status={status}
      onPress={() => setStatus(status === 'checked' ? 'unchecked' : 'checked')}
    />
  );
}

// Toggle button group (single selection)
function ToggleGroup() {
  const [value, setValue] = useState('left');
  
  return (
    <ToggleButton.Group
      onValueChange={setValue}
      value={value}
      buttons={[
        { value: 'left', icon: 'format-align-left' },
        { value: 'center', icon: 'format-align-center' },
        { value: 'right', icon: 'format-align-right' },
      ]}
    />
  );
}

// Toggle button row (multi-selection)
function ToggleRow() {
  const [value, setValue] = useState(['bold']);
  
  return (
    <ToggleButton.Row
      onValueChange={setValue}
      value={value}
      buttons={[
        { value: 'bold', icon: 'format-bold' },
        { value: 'italic', icon: 'format-italic' },
        { value: 'underline', icon: 'format-underlined' },
      ]}
    />
  );
}

Types

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

type ColorValue = string | number;

interface AccessibilityRole {
  // React Native accessibility role values
}

interface GestureResponderEvent {
  // React Native gesture event object
}

interface StyleProp<T> {
  // React Native style prop type
}

interface ViewStyle {
  // React Native view styles
}

interface TextStyle {
  // React Native text styles
}

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

tessl/npm-react-native-paper

buttons-actions.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Buttons & Actions

Capabilities

Button

IconButton

Floating Action Button (FAB)

FAB Group

Animated FAB

TouchableRipple

Toggle Button Components

Types

buttons-actions.mddocs/