Buttons and inputs

The SDK draws its buttons and text fields with a few shared components. Using them in your own screens keeps the colors, sizes, press states and right-to-left behavior consistent with the SDK. Every component on this page is exported from stream-chat-react-native and stream-chat-expo, and none has an override key.

Best practices

• Give an icon-only Button an accessibility label, with accessibilityLabel or accessibilityLabelKey. It has no text to announce.
• Button fills the width of its container unless it's iconOnly. Pass style={{ width: "auto" }} for a button as wide as its label.
• Pass icons as LeadingIcon and TrailingIcon, not inside label. The button sizes and colors them, and swaps them in a right-to-left layout.
• Keep Input's state and messages in your own state, and set state="error" with an errorMessage when validation fails. On Android, TalkBack announces the message.
• Every component here reads the theme, which OverlayProvider and Chat provide.

Available components

Button

Button is a React Native Gesture Handler Pressable inside a rounded View. variant and type pick its colors from the button* semantic tokens:

A pressed button gets semantics.backgroundUtilityPressed, and a selected one semantics.backgroundUtilitySelected. A disabled one uses the disabled colors.

ButtonProps are the props of the Gesture Handler Pressable, which go to it, plus:

disabled and onLayout come from Pressable. disabled defaults to false, and onLayout goes to the outer View. IconRenderer is (props: IconProps) => React.ReactNode, so the icons of ComponentsContext can be passed as they are.

Input

Input is a React Native TextInput with a frame around it. It forwards its ref to the TextInput. Above the field it shows title and description, and below it a helper line that depends on state:

While state is 'error', errorMessage is also announced through an assertive live region, even with helperText off. accessibilityLiveRegion is Android only, so VoiceOver on iOS doesn't announce it. The border is semantics.borderUtilityActive while the field is focused and semantics.borderUtilityDisabled while it isn't editable.

InputProps are the props of TextInput, which go to it, plus:

editable defaults to true. A style you pass replaces the field's default text style instead of adding to it, so set the font size and color you need in it.

SearchInput

SearchInput renders an Input with a search icon, the placeholder "Search", no helper line, words capitalized and autocorrect off. Once the user has typed, a clear button shows; it empties the field and calls onChangeText(""). It sits in a View with padding on every side.

SearchInputProps is Partial<InputProps>. Every prop you pass goes to the Input and replaces the default, except onChangeText, which SearchInput wraps to track whether the field has text.

SpeedSettingsButton

SpeedSettingsButton shows the rate with one decimal, such as x1.0 or x1.5, in a 40 by 24 point pill. It doesn't change the rate itself. Your onPress does.

The button has no accessibility label or role. Wrap it, or set them through a component of your own, when it must be reachable with a screen reader.

GiphyChip

GiphyChip takes no props. It reads the composer from useMessageComposer(), so it renders inside a Channel or a Thread. It shows the name of the text composer's command in capitals, after a lightning icon, and a cross that calls TextComposer.clearCommand(). The composer's text field renders it while a command is set.

Example

A form with a validated field, a search field, and a full-width and an icon-only button:

import { useState } from "react";
import { View } from "react-native";
import {
  Button,
  Input,
  SearchInput,
  useComponentsContext,
} from "stream-chat-react-native";

export const RenameForm = ({
  onFilter,
  onSave,
}: {
  onFilter: (query: string) => void;
  onSave: (name: string) => void;
}) => {
  const { icons } = useComponentsContext();
  const [name, setName] = useState("");
  const tooLong = name.length > 40;

  return (
    <View style={{ gap: 12, padding: 16 }}>
      <SearchInput onChangeText={onFilter} placeholder="Find a channel" />
      <Input
        errorMessage="Use 40 characters or fewer"
        infoText="Everyone in the channel sees the name"
        onChangeText={setName}
        state={tooLong ? "error" : "default"}
        title="Channel name"
        value={name}
        variant="outline"
      />
      <View style={{ flexDirection: "row", gap: 8 }}>
        <Button
          disabled={!name || tooLong}
          label="Save"
          onPress={() => onSave(name)}
          style={{ flex: 1 }}
          type="solid"
          variant="primary"
        />
        <Button
          accessibilityLabel="Clear name"
          iconOnly
          LeadingIcon={icons.Cross}
          onPress={() => setName("")}
          type="outline"
          variant="secondary"
        />
      </View>
    </View>
  );
};

Related

• Overriding components: the icons of ComponentsContext and the IconProps they take.
• Lists and indicators: EmptySearchResult, which the SDK shows under SearchInput when nothing matches.
• Accessibility: turning on the SDK's accessibility layer, which accessibilityLabelKey depends on.