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

Form Controls

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

Input components for forms and user data entry, including text inputs, checkboxes, radio buttons, switches, search bars, and segmented buttons.

Capabilities

TextInput

Primary text input component with Material Design styling and multiple modes.

/**
 * Text input component with Material Design styling
 * @param props - Text input configuration
 * @returns JSX Element for text input
 */
function TextInput(props: TextInputProps): JSX.Element;

interface TextInputProps {
  /** Input mode styling */
  mode?: 'flat' | 'outlined';
  /** Input label */
  label?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Current input value */
  value: string;
  /** Value change handler */
  onChangeText: (text: string) => void;
  /** Whether input has error state */
  error?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether input is read-only */
  editable?: boolean;
  /** Input type/keyboard */
  keyboardType?: 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad' | 'url';
  /** Text content type for autofill */
  textContentType?: 'none' | 'username' | 'password' | 'emailAddress' | 'name' | 'givenName' | 'familyName' | 'addressCity' | 'addressState' | 'addressCityAndState' | 'sublocality' | 'countryName' | 'postalCode' | 'telephoneNumber' | 'creditCardNumber' | 'organizationName' | 'newPassword' | 'oneTimeCode';
  /** Auto capitalize behavior */
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  /** Auto complete type */
  autoComplete?: string;
  /** Whether text is secure (password) */
  secureTextEntry?: boolean;
  /** Maximum input length */
  maxLength?: number;
  /** Whether input is multiline */
  multiline?: boolean;
  /** Number of lines for multiline */
  numberOfLines?: number;
  /** Focus handler */
  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
  /** Blur handler */
  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
  /** Submit editing handler */
  onSubmitEditing?: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
  /** Left icon or element */
  left?: React.ReactNode,
  /** Right icon or element */
  right?: React.ReactNode;
  /** Selection color */
  selectionColor?: string;
  /** Underline color for flat mode */
  underlineColor?: string;
  /** Active underline color for flat mode */
  activeUnderlineColor?: string;
  /** Active outline color for outlined mode */
  activeOutlineColor?: string;
  /** Outline color for outlined mode */
  outlineColor?: string;
  /** Dense mode for compact layout */ 
  dense?: boolean;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
  /** Test ID */
  testID?: string;
  /** Content style */
  contentStyle?: StyleProp<TextStyle>;
  /** Render function for custom rendering */
  render?: (props: RenderProps) => React.ReactNode;
}

Usage Examples:

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

function MyForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  return (
    <>
      <TextInput
        label="Email"
        value={email}
        onChangeText={setEmail}
        mode="outlined"
        keyboardType="email-address"
        autoComplete="email"
        left={<TextInput.Icon icon="email" />}
      />
      
      <TextInput
        label="Password"
        value={password}
        onChangeText={setPassword}
        mode="outlined"
        secureTextEntry={!showPassword}
        right={
          <TextInput.Icon 
            icon={showPassword ? "eye-off" : "eye"}
            onPress={() => setShowPassword(!showPassword)}
          />
        }
      />
    </>
  );
}

TextInput Adornments

Icon and affix components for TextInput decoration.

/**
 * Icon component for TextInput left/right adornment
 * @param props - Icon configuration
 * @returns JSX Element for text input icon
 */
namespace TextInput {
  function Icon(props: TextInputIconProps): JSX.Element;
  function Affix(props: TextInputAffixProps): JSX.Element;
}

interface TextInputIconProps {
  /** Icon source */
  icon: IconSource;
  /** Press handler */
  onPress?: () => void;
  /** Whether icon is pressable */
  forceTextInputFocus?: boolean;
  /** Icon color */
  color?: string;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

interface TextInputAffixProps {
  /** Affix text content */
  text: string;
  /** Affix type */
  type: 'prefix' | 'suffix';
  /** Text color */
  textColor?: string;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Searchbar

Specialized text input for search functionality with built-in search styling.

/**
 * Search input component with search-specific styling
 * @param props - Searchbar configuration
 * @returns JSX Element for search input
 */
function Searchbar(props: SearchbarProps): JSX.Element;

interface SearchbarProps {
  /** Placeholder text */
  placeholder?: string;
  /** Current search value */
  value: string;
  /** Value change handler */
  onChangeText: (query: string) => void;
  /** Search icon source */
  icon?: IconSource;
  /** Search icon color */
  iconColor?: string;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Search submission handler */
  onSubmitEditing?: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
  /** Focus handler */
  onFocus?: () => void;
  /** Blur handler */
  onBlur?: () => void;
  /** Clear icon press handler */
  onIconPress?: () => void;
  /** Clear button press handler */
  onClearIconPress?: () => void;
  /** Search icon accessibility label */
  searchAccessibilityLabel?: string;
  /** Clear icon accessibility label */
  clearAccessibilityLabel?: string;
  /** Custom input style */
  inputStyle?: StyleProp<TextStyle>;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
  /** Test ID */
  testID?: string;
}

Usage Example:

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

function SearchScreen() {
  const [searchQuery, setSearchQuery] = useState('');

  const onChangeSearch = (query: string) => setSearchQuery(query);

  return (
    <Searchbar
      placeholder="Search..."
      onChangeText={onChangeSearch}
      value={searchQuery}
      onSubmitEditing={() => performSearch(searchQuery)}
    />
  );
}

Checkbox

Checkbox input component with multiple platform styles and item wrapper.

/**
 * Checkbox input component
 * @param props - Checkbox configuration
 * @returns JSX Element for checkbox
 */
function Checkbox(props: CheckboxProps): JSX.Element;

interface CheckboxProps {
  /** Checkbox state */
  status: 'checked' | 'unchecked' | 'indeterminate';
  /** State change handler */
  onPress?: () => void;
  /** Whether checkbox is disabled */
  disabled?: boolean;
  /** Custom color */
  color?: string;
  /** Custom unchecked color */
  uncheckedColor?: string;
  /** Test ID */
  testID?: string;
  /** Theme override */
  theme?: ThemeProp;
}

/**
 * Platform-specific checkbox variants and item wrapper
 */
namespace Checkbox {
  function Item(props: CheckboxItemProps): JSX.Element;
  function Android(props: CheckboxAndroidProps): JSX.Element;
  function IOS(props: CheckboxIOSProps): JSX.Element;
}

interface CheckboxItemProps {
  /** Item label text */
  label: string;
  /** Checkbox state */
  status: 'checked' | 'unchecked' | 'indeterminate';
  /** State change handler */
  onPress?: () => void;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Label position relative to checkbox */
  position?: 'leading' | 'trailing';
  /** Custom color */
  color?: string;
  /** Custom unchecked color */
  uncheckedColor?: string;
  /** Custom ripple color */
  rippleColor?: ColorValue;
  /** Custom label style */
  labelStyle?: StyleProp<TextStyle>;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
  /** Test ID */
  testID?: string;
}

interface CheckboxAndroidProps extends CheckboxProps {
  /** Android-specific styling */
}

interface CheckboxIOSProps extends CheckboxProps {
  /** iOS-specific styling */
}

Usage Examples:

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

function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return (
    <>
      {/* Basic checkbox */}
      <Checkbox
        status={checked ? 'checked' : 'unchecked'}
        onPress={() => setChecked(!checked)}
      />

      {/* Checkbox with label */}
      <Checkbox.Item
        label="Accept terms and conditions"
        status={checked ? 'checked' : 'unchecked'}
        onPress={() => setChecked(!checked)}
      />

      {/* Platform-specific checkboxes */}
      <Checkbox.Android
        status={checked ? 'checked' : 'unchecked'}
        onPress={() => setChecked(!checked)}
      />
    </>
  );
}

RadioButton

Radio button input for single selection from multiple options.

/**
 * Radio button input component
 * @param props - Radio button configuration
 * @returns JSX Element for radio button
 */
function RadioButton(props: RadioButtonProps): JSX.Element;

interface RadioButtonProps {
  /** Radio button value */
  value: string;
  /** Current selected value */
  status?: 'checked' | 'unchecked';
  /** Whether radio button is disabled */
  disabled?: boolean;
  /** Press handler */
  onPress?: () => void;
  /** Custom color */
  color?: string;
  /** Custom unchecked color */
  uncheckedColor?: string;
  /** Test ID */
  testID?: string;
  /** Theme override */
  theme?: ThemeProp;
}

/**
 * Radio button variants and group components
 */
namespace RadioButton {
  function Group(props: RadioButtonGroupProps): JSX.Element;
  function Item(props: RadioButtonItemProps): JSX.Element;
  function Android(props: RadioButtonAndroidProps): JSX.Element;
  function IOS(props: RadioButtonIOSProps): JSX.Element;
}

interface RadioButtonGroupProps {
  /** Current selected value */
  value: string;
  /** Value change handler */
  onValueChange: (value: string) => void;
  /** Group content */
  children: React.ReactNode;
}

interface RadioButtonItemProps {
  /** Item label text */
  label: string;
  /** Radio button value */
  value: string;
  /** Current selected value */
  status?: 'checked' | 'unchecked';
  /** Whether item is disabled */
  disabled?: boolean;
  /** State change handler */
  onPress?: () => void;
  /** Label position */
  position?: 'leading' | 'trailing';
  /** Custom color */
  color?: string;
  /** Custom unchecked color */
  uncheckedColor?: string;
  /** Custom label style */
  labelStyle?: StyleProp<TextStyle>;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
  /** Test ID */
  testID?: string;
}

interface RadioButtonAndroidProps extends RadioButtonProps {
  /** Android-specific styling */
}

interface RadioButtonIOSProps extends RadioButtonProps {
  /** iOS-specific styling */
}

Usage Examples:

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

function RadioExample() {
  const [value, setValue] = useState('first');

  return (
    <RadioButton.Group onValueChange={setValue} value={value}>
      <RadioButton.Item label="First option" value="first" />
      <RadioButton.Item label="Second option" value="second" />
      <RadioButton.Item label="Third option" value="third" />
    </RadioButton.Group>
  );
}

Switch

Toggle switch component for binary settings.

/**
 * Toggle switch component
 * @param props - Switch configuration  
 * @returns JSX Element for switch
 */
function Switch(props: SwitchProps): JSX.Element;

interface SwitchProps {
  /** Whether switch is on */
  value: boolean;
  /** Value change handler */
  onValueChange?: (value: boolean) => void;
  /** Whether switch is disabled */
  disabled?: boolean;
  /** Custom thumb color */
  thumbColor?: string;
  /** Custom track color */
  trackColor?: {
    false?: string;
    true?: string;
  };
  /** iOS thumb color */
  ios_backgroundColor?: string;
  /** Test ID */
  testID?: string;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Example:

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

function SwitchExample() {
  const [isSwitchOn, setIsSwitchOn] = useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return (
    <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
  );
}

SegmentedButtons

Group of buttons for single selection from multiple options.

/**
 * Segmented button group for single selection
 * @param props - Segmented buttons configuration
 * @returns JSX Element for segmented buttons
 */
function SegmentedButtons(props: SegmentedButtonsProps): JSX.Element;

interface SegmentedButtonsProps {
  /** Array of button configurations */
  buttons: Array<{
    value: string;
    label?: string;
    icon?: IconSource;
    disabled?: boolean;
    accessibilityLabel?: string;
    testID?: string;
    showSelectedCheck?: boolean;
    style?: StyleProp<ViewStyle>;
    labelStyle?: StyleProp<TextStyle>;
    onPress?: () => void;
  }>;
  /** Current selected value */
  value: string;
  /** Value change handler */
  onValueChange: (value: string) => void;
  /** Density mode */
  density?: 'regular' | 'small' | 'medium' | 'high';
  /** Whether buttons are multiline */
  multiSelect?: boolean;
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Example:

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

function SegmentedExample() {
  const [value, setValue] = useState('');

  return (
    <SegmentedButtons
      value={value}
      onValueChange={setValue}
      buttons={[
        {
          value: 'walk',
          label: 'Walking',
          icon: 'walk',
        },
        {
          value: 'train',
          label: 'Transit',
          icon: 'train',
        },
        {
          value: 'drive',
          label: 'Driving',
          icon: 'car',
        },
      ]}
    />
  );
}

HelperText

Helper text component for providing additional context to form inputs.

/**
 * Helper text component for form inputs
 * @param props - Helper text configuration
 * @returns JSX Element for helper text
 */
function HelperText(props: HelperTextProps): JSX.Element;

interface HelperTextProps {
  /** Helper text type */
  type: 'error' | 'info';
  /** Whether helper text is visible */
  visible?: boolean;
  /** Helper text content */
  children: React.ReactNode;
  /** Custom text color */
  color?: string;
  /** Text padding */
  padding?: 'none' | 'normal';
  /** Custom style */
  style?: StyleProp<ViewStyle>;
  /** Theme override */
  theme?: ThemeProp;
}

Usage Example:

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

function FormWithHelper() {
  const [email, setEmail] = useState('');
  const [hasError, setHasError] = useState(false);

  const onChangeText = (text: string) => {
    setEmail(text);
    setHasError(!text.includes('@'));
  };

  return (
    <>
      <TextInput
        label="Email"
        value={email}
        onChangeText={onChangeText}
        error={hasError}
      />
      <HelperText type="error" visible={hasError}>
        Email address is invalid!
      </HelperText>
    </>
  );
}

Types

interface NativeSyntheticEvent<T> {
  // React Native synthetic event type
}

interface TextInputFocusEventData {
  // React Native text input focus event data
}

interface TextInputSubmitEditingEventData {
  // React Native text input submit event data
}

interface RenderProps {
  // Custom render props for TextInput
}

type ColorValue = string | number;

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

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

Form Controls

Capabilities

TextInput

TextInput Adornments

Searchbar

Checkbox

RadioButton

Switch

SegmentedButtons

HelperText

Types

form-controls.mddocs/