Input

Input is a theme-aware text input component with support for titles, descriptions, helper text, validation states, and leading/trailing icons. It extends React Native's TextInput with additional UI chrome for building form-like interfaces.

The component automatically handles focus/blur styling, RTL icon swapping, and state-based visual feedback (error, success, default).

Usage

import { Input } from "stream-chat-react-native";

<Input
  variant="outline"
  title="Channel Name"
  description="Enter a name for your channel"
  placeholder="e.g. General"
  state="default"
/>;

With validation states:

<Input
  variant="outline"
  title="Email"
  state="error"
  errorMessage="Please enter a valid email address"
  value={email}
  onChangeText={setEmail}
/>

With icons:

<Input
  variant="outline"
  LeadingIcon={(props) => <SearchIcon {...props} />}
  TrailingIcon={(props) => <ClearIcon {...props} />}
  placeholder="Search..."
/>

Props

Input extends TextInputProps from React Native, so all standard text input props (like value, onChangeText, placeholder, keyboardType, etc.) are supported.