ChannelPreviewTypingIndicator

Renders typing state in a channel row inside ChannelList. This is the default component for the ChannelPreviewTypingIndicator override.

Best Practices

• Keep typing text compact to avoid truncating other preview content.
• Use this component only for list rows where live typing feedback is expected.
• Prefer participant names for group channels and a generic label for DMs.
• Avoid expensive derivation in render; pass precomputed values when customizing.
• Keep indicator styling aligned with ChannelPreviewView.

General Usage

Customize it and pass it via ChannelPreviewTypingIndicator on ChannelList.

import {
  ChannelList,
  ChannelPreviewTypingIndicator,
  WithComponents,
} from "stream-chat-react-native";

const CustomPreviewTypingIndicator = (props) => (
  <ChannelPreviewTypingIndicator {...props} />
);

const App = () => {
  return (
    <WithComponents
      overrides={{
        ChannelPreviewTypingIndicator: CustomPreviewTypingIndicator,
      }}
    >
      <ChannelList />
    </WithComponents>
  );
};

Props