CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-native-base

Essential cross-platform UI components for React Native with comprehensive theming and accessibility support

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

forms.mddocs/

Form Components

Input controls, buttons, and form management components with built-in validation support and accessibility features.

Capabilities

Button Component

Interactive button component with various styles and states.

/**
 * Interactive button component with styling and state management
 * @param props - Button component props
 * @returns JSX element representing a pressable button
 */
function Button(props: IButtonProps): JSX.Element;

interface IButtonProps extends StyledProps {
  children?: React.ReactNode;
  onPress?: () => void;
  isDisabled?: boolean;
  isLoading?: boolean;
  loadingText?: string;
  spinner?: JSX.Element;
  variant?: "ghost" | "outline" | "solid" | "link" | "unstyled";
  colorScheme?: string;
  size?: "xs" | "sm" | "md" | "lg";
  leftIcon?: JSX.Element;
  rightIcon?: JSX.Element;
  startIcon?: JSX.Element;
  endIcon?: JSX.Element;
  _text?: ITextProps;
  _stack?: IStackProps;
  _loading?: ISpinnerProps;
  isPressed?: boolean;
  isFocused?: boolean;
  isHovered?: boolean;
  isDisabled?: boolean;
}

Usage Examples:

import { Button, AddIcon } from "native-base";

// Basic button
<Button onPress={() => console.log("pressed")}>
  Click me
</Button>

// Button with variant and color scheme
<Button variant="outline" colorScheme="blue" size="lg">
  Large Outline Button
</Button>

// Button with icons
<Button leftIcon={<AddIcon />} onPress={handleAdd}>
  Add Item
</Button>

// Loading button
<Button isLoading loadingText="Submitting...">
  Submit
</Button>

IconButton Component

Interactive button component specifically designed for displaying only an icon with various styles and interaction states.

/**
 * Interactive button component that displays only an icon
 * @param props - IconButton component props
 * @returns JSX element representing a pressable icon button
 */
function IconButton(props: IIconButtonProps): JSX.Element;

interface IIconButtonProps extends StyledProps {
  icon?: JSX.Element;
  _icon?: Partial<IIconProps>;
  colorScheme?: string;
  variant?: "ghost" | "outline" | "solid" | "unstyled";
  size?: "xs" | "sm" | "md" | "lg";
  isDisabled?: boolean;
  onPress?: () => void;
  _hover?: Partial<IIconButtonProps>;
  _pressed?: Partial<IIconButtonProps>;
  _focus?: Partial<IIconButtonProps>;
}

Usage Examples:

import { IconButton, AddIcon, EditIcon, DeleteIcon } from "native-base";

// Basic icon button
<IconButton
  icon={<AddIcon />}
  onPress={() => console.log("Add pressed")}
/>

// Icon button with variant and color scheme
<IconButton
  icon={<EditIcon />}
  variant="outline"
  colorScheme="blue"
  onPress={() => console.log("Edit pressed")}
/>

// Icon button with custom styling and states
<IconButton
  icon={<DeleteIcon />}
  colorScheme="red"
  variant="solid"
  size="sm"
  _hover={{ bg: "red.600" }}
  _pressed={{ bg: "red.700" }}
  onPress={() => console.log("Delete pressed")}
/>

// Icon button with custom icon styling
<IconButton
  icon={<AddIcon />}
  _icon={{ size: "lg", color: "primary.500" }}
  variant="ghost"
  onPress={() => console.log("Custom icon pressed")}
/>

Input Component

Text input component with various configurations and validation support.

/**
 * Text input component with styling and validation capabilities
 * @param props - Input component props
 * @returns JSX element representing a text input field
 */
function Input(props: IInputProps): JSX.Element;

/**
 * Input group container for combining input with addons
 * @param props - Box component props
 * @returns JSX element containing grouped input elements
 */
function InputGroup(props: IBoxProps): JSX.Element;

/**
 * Left addon for input groups
 * @param props - Box component props
 * @returns JSX element positioned as left addon
 */
function InputLeftAddon(props: IBoxProps): JSX.Element;

/**
 * Right addon for input groups
 * @param props - Box component props
 * @returns JSX element positioned as right addon
 */
function InputRightAddon(props: IBoxProps): JSX.Element;

interface IInputProps extends StyledProps {
  value?: string;
  defaultValue?: string;
  onChangeText?: (text: string) => void;
  placeholder?: string;
  placeholderTextColor?: string;
  isDisabled?: boolean;
  isReadOnly?: boolean;
  isRequired?: boolean;
  isInvalid?: boolean;
  variant?: "outline" | "filled" | "underlined" | "unstyled" | "rounded";
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
  type?: "text" | "password";
  InputLeftElement?: JSX.Element;
  InputRightElement?: JSX.Element;
  leftElement?: JSX.Element;
  rightElement?: JSX.Element;
  // Text input props
  multiline?: boolean;
  numberOfLines?: number;
  secureTextEntry?: boolean;
  keyboardType?: "default" | "numeric" | "email-address" | "phone-pad";
  autoCapitalize?: "none" | "sentences" | "words" | "characters";
  autoComplete?: string;
  autoCorrect?: boolean;
  autoFocus?: boolean;
  blurOnSubmit?: boolean;
  editable?: boolean;
  maxLength?: number;
  onBlur?: () => void;
  onFocus?: () => void;
  onSubmitEditing?: () => void;
  returnKeyType?: "default" | "done" | "go" | "next" | "search" | "send";
  selectTextOnFocus?: boolean;
  textContentType?: string;
}

Usage Examples:

import { Input, InputGroup, InputLeftAddon, SearchIcon } from "native-base";

// Basic input
<Input 
  placeholder="Enter your name"
  value={name}
  onChangeText={setName}
/>

// Input with validation states
<Input 
  isInvalid={hasError}
  placeholder="Email"
  keyboardType="email-address"
/>

// Input group with addon
<InputGroup>
  <InputLeftAddon children="https://" />
  <Input placeholder="website.com" />
</InputGroup>

// Input with elements
<Input 
  placeholder="Search"
  InputLeftElement={<SearchIcon ml={2} color="gray.400" />}
/>

TextArea Component

Multi-line text input component.

/**
 * Multi-line text input component
 * @param props - TextArea component props
 * @returns JSX element representing a multi-line text input
 */
function TextArea(props: ITextAreaProps): JSX.Element;

interface ITextAreaProps extends IInputProps {
  numberOfLines?: number;
  totalLines?: number;
  autoCompleteType?: string;
}

Checkbox Component

Checkbox input component with group support.

/**
 * Checkbox input component for boolean selections
 * @param props - Checkbox component props
 * @returns JSX element representing a checkbox input
 */
function Checkbox(props: ICheckboxProps): JSX.Element;

interface ICheckboxProps extends StyledProps {
  children?: React.ReactNode;
  value?: string;
  defaultIsChecked?: boolean;
  isChecked?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  isReadOnly?: boolean;
  onChange?: (isChecked: boolean) => void;
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  icon?: JSX.Element;
  _icon?: IIconProps;
  _text?: ITextProps;
  _interactionBox?: IBoxProps;
  accessibilityLabel?: string;
}

interface ICheckboxGroupProps extends StyledProps {
  value?: string[];
  defaultValue?: string[];
  onChange?: (values: string[]) => void;
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  isDisabled?: boolean;
  children?: React.ReactNode;
}

Usage Examples:

import { Checkbox, VStack } from "native-base";

// Basic checkbox
<Checkbox value="agree" onChange={setAgreed}>
  I agree to terms and conditions
</Checkbox>

// Checkbox group
<Checkbox.Group defaultValue={["item1"]} onChange={setSelectedItems}>
  <VStack space={2}>
    <Checkbox value="item1">Item 1</Checkbox>
    <Checkbox value="item2">Item 2</Checkbox>
    <Checkbox value="item3">Item 3</Checkbox>
  </VStack>
</Checkbox.Group>

Radio Component

Radio button component with group support.

/**
 * Radio button component for single selections
 * @param props - Radio component props
 * @returns JSX element representing a radio button
 */
function Radio(props: IRadioProps): JSX.Element;

/**
 * Context provider for radio groups
 */
const RadioContext: React.Context<IRadioValue>;

interface IRadioProps extends StyledProps {
  children?: React.ReactNode;
  value: string;
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  isDisabled?: boolean;
  isInvalid?: boolean;
  icon?: JSX.Element;
  _icon?: IIconProps;
  _text?: ITextProps;
  _interactionBox?: IBoxProps;
}

interface IRadioGroupProps extends StyledProps {
  name: string;
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  isDisabled?: boolean;
  children?: React.ReactNode;
}

interface IRadioValue {
  name: string;
  value: string;
  onChange: (value: string) => void;
}

Switch Component

Toggle switch component for boolean values.

/**
 * Toggle switch component for boolean selections
 * @param props - Switch component props
 * @returns JSX element representing a toggle switch
 */
function Switch(props: ISwitchProps): JSX.Element;

interface ISwitchProps extends StyledProps {
  value?: boolean;
  defaultIsChecked?: boolean;
  isChecked?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  onChange?: (isChecked: boolean) => void;
  onToggle?: () => void;
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  trackColor?: { false?: string; true?: string };
  thumbColor?: string;
  ios_backgroundColor?: string;
  onTrackColor?: string;
  offTrackColor?: string;
  onThumbColor?: string;
  offThumbColor?: string;
}

Select Component

Dropdown selection component with item support.

/**
 * Dropdown selection component
 * @param props - Select component props
 * @returns JSX element representing a dropdown select
 */
function Select(props: ISelectProps): JSX.Element;

interface ISelectProps extends IInputProps {
  selectedValue?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  placeholder?: string;
  placeholderTextColor?: string;
  dropdownIcon?: JSX.Element;
  dropdownOpenIcon?: JSX.Element;
  dropdownCloseIcon?: JSX.Element;
  customDropdownIconProps?: IIconProps;
  children?: React.ReactNode;
  accessibilityLabel?: string;
}

interface ISelectItemProps extends StyledProps {
  label: string;
  value: string;
  isDisabled?: boolean;
  children?: React.ReactNode;
  _text?: ITextProps;
}

Usage Example:

import { Select } from "native-base";

<Select 
  selectedValue={selectedValue} 
  placeholder="Choose option"
  onValueChange={setSelectedValue}
>
  <Select.Item label="Option 1" value="option1" />
  <Select.Item label="Option 2" value="option2" />
  <Select.Item label="Option 3" value="option3" />
</Select>

Slider Component

Range slider component for numeric input.

/**
 * Range slider component for numeric value selection
 * @param props - Slider component props
 * @returns JSX element representing a range slider
 */
function Slider(props: ISliderProps): JSX.Element;

interface ISliderProps extends StyledProps {
  value?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
  onChangeEnd?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  isDisabled?: boolean;
  isReadOnly?: boolean;
  colorScheme?: string;
  size?: "sm" | "md" | "lg";
  orientation?: "horizontal" | "vertical";
  thumbSize?: number;
  sliderTrackHeight?: number;
  children?: React.ReactNode;
}

FormControl Component

Form control wrapper with label, helper text, and error message support.

/**
 * Form control wrapper providing label, validation, and helper text
 * @param props - FormControl component props
 * @returns JSX element wrapping form input with metadata
 */
function FormControl(props: IFormControlProps): JSX.Element;

/**
 * Hook to access form control context
 * @returns Form control context values
 */
function useFormControlContext(): IFormControlContext;

interface IFormControlProps extends IBoxProps {
  isRequired?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  isReadOnly?: boolean;
  children?: React.ReactNode;
}

interface IFormControlLabelProps extends ITextProps {
  children?: React.ReactNode;
  _text?: ITextProps;
  _asterick?: ITextProps;
}

interface IFormControlErrorMessageProps extends ITextProps {
  children?: React.ReactNode;
  _text?: ITextProps;
  leftIcon?: JSX.Element;
}

interface IFormControlHelperTextProps extends ITextProps {
  children?: React.ReactNode;
  _text?: ITextProps;
}

interface IFormControlContext {
  isRequired: boolean;
  isDisabled: boolean;
  isInvalid: boolean;
  isReadOnly: boolean;
  isFocused: boolean;
  onFocus: () => void;
  onBlur: () => void;
}

Usage Example:

import { FormControl, Input, WarningOutlineIcon } from "native-base";

<FormControl isRequired isInvalid={hasError}>
  <FormControl.Label>Email</FormControl.Label>
  <Input 
    value={email}
    onChangeText={setEmail}
    keyboardType="email-address"
  />
  <FormControl.HelperText>
    We'll never share your email.
  </FormControl.HelperText>
  <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
    Please enter a valid email address.
  </FormControl.ErrorMessage>
</FormControl>

Advanced Form Components

NumberInput Component

Numeric input with increment/decrement controls.

/**
 * Numeric input component with stepper controls
 * @param props - NumberInput component props
 * @returns JSX element representing numeric input with controls
 */
function NumberInput(props: INumberInputProps): JSX.Element;

/**
 * Text field component for number input
 * @param props - NumberInputField component props
 * @returns JSX element representing the input field
 */
function NumberInputField(props: INumberInputFieldProps): JSX.Element;

/**
 * Container for increment/decrement steppers
 * @param props - NumberInputStepper component props
 * @returns JSX element containing stepper buttons
 */
function NumberInputStepper(props: INumberInputSteppersProps): JSX.Element;

/**
 * Increment stepper button
 * @param props - NumberInputStepper component props
 * @returns JSX element for increment button
 */
function NumberIncrementStepper(props: INumberInputStepperProps): JSX.Element;

/**
 * Decrement stepper button
 * @param props - NumberInputStepper component props
 * @returns JSX element for decrement button
 */
function NumberDecrementStepper(props: INumberInputStepperProps): JSX.Element;

interface INumberInputProps extends StyledProps {
  value?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  precision?: number;
  isDisabled?: boolean;
  isReadOnly?: boolean;
  isInvalid?: boolean;
  keepWithinRange?: boolean;
  clampValueOnBlur?: boolean;
  allowMouseWheel?: boolean;
  children?: React.ReactNode;
}

PinInput Component

PIN or OTP input component with multiple fields.

/**
 * PIN input component for secure numeric entry
 * @param props - PinInput component props
 * @returns JSX element representing PIN input fields
 */
function PinInput(props: IPinInputProps): JSX.Element;

interface IPinInputProps extends StyledProps {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  onComplete?: (value: string) => void;
  placeholder?: string;
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  manageFocus?: boolean;
  autoFocus?: boolean;
  otp?: boolean;
  id?: string;
  type?: "alphanumeric" | "number";
  mask?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  children?: React.ReactNode;
}

interface IPinInputFieldProps extends IInputProps {
  ref?: React.Ref<any>;
}

TextField Component

Enhanced text field with integrated label and validation.

/**
 * Enhanced text field component with integrated form features
 * @param props - TextField component props
 * @returns JSX element combining input, label, and validation
 */
function TextField(props: ITextFieldProps): JSX.Element;

interface ITextFieldProps extends StyledProps {
  label?: string;
  helperText?: string;
  errorMessage?: string;
  isRequired?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  InputProps?: IInputProps;
  _formControl?: IFormControlProps;
  _label?: IFormControlLabelProps;
  _helperText?: IFormControlHelperTextProps;
  _errorMessage?: IFormControlErrorMessageProps;
}

docs

animations.md

basic-components.md

forms.md

hooks-utilities.md

index.md

layout.md

media-data.md

navigation-feedback.md

overlays.md

theme.md

typography.md

tile.json