Input - AMiSi Mobile Starter

Input wraps React Native TextInput with the current theme colors and shared field styling.

Usage

import { useState } from 'react';

import { Input } from '@amisi-mobile-starter/ui';

export const SearchField = () => {
  const [query, setQuery] = useState('');

  return (
    <Input
      label="Search"
      iconName="search-outline"
      value={query}
      onChangeText={setQuery}
      helperText="Search by name or email."
    />
  );
};

Props

Prop	Type	Default	Description
`label`	`string`	`undefined`	Field label.
`error`	`string`	`undefined`	Error shown instead of helper text.
`helperText`	`string`	`undefined`	Supporting text shown when there is no error.
`iconName`	`React.ComponentProps<typeof Ionicons>['name']`	`undefined`	Leading Ionicons glyph name.
`rightAccessory`	`ReactNode`	`undefined`	Trailing content. It replaces the automatic clear button.

All React Native TextInputProps are accepted. A non-empty string value or defaultValue shows a clear button when onChangeText exists and rightAccessory does not.