Typing Dots

The three bouncing dots of a chat typing indicator. A wave runs through the dots, each lifting and brightening in turn. With reduced motion they sit still at a medium brightness. Screen readers hear one element with the label, not the dots. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add typing-dots

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/typing-dots.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { View } from "react-native";
import { TypingDots } from "@/components/ui/typing-dots";

export default function Example() {
  const someoneIsTyping = true;

  return <View style={{ padding: 16 }}>{someoneIsTyping ? <TypingDots /> : null}</View>;
}

Render it only while the other person is typing. For dots without the bubble, for example inside your own bubble, pass bubble={false}.

Props