React Native Chat Typing Indicator

A smooth, customizable, and high-performance typing indicator for React Native chat applications. Built with react-native-reanimated for 60fps animations.

Installation

npm install react-native-chat-typing-indicator react-native-reanimated

Note: This package requires react-native-reanimated. After installing, make sure to follow the Reanimated installation guide to complete the setup (e.g., adding the babel plugin).

Usage

import { TypingIndicator } from 'react-native-chat-typing-indicator';

function Example() {
  return (
    <View>
      <TypingIndicator />
    </View>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | style | ViewStyle | - | Container styles | | dotColor | string | '#000' | Dot color | | dotStyles | ViewStyle | - | Custom styles for each dot wrapper | | dotRadius | number | 2.5 | Dot radius in pixels | | dotMargin | number | 3 | Space between dots | | dotCount | number | 3 | Number of dots | | dotAmplitude | number | 3 | Bounce height for wave/bounce animations | | dotSpeed | number | 0.15 | Animation speed (higher = faster) | | dotY | number | 0 | Vertical offset for dots | | animationPreset | AnimationPreset | 'wave' | Animation style: 'wave', 'bounce', 'pulse', 'fade' | | showEnteringAnimation | boolean | true | Show enter animation on mount |

Examples

Animation Presets

// Wave (default) - dots animate in sequence
<TypingIndicator animationPreset="wave" />

// Bounce - all dots bounce together
<TypingIndicator animationPreset="bounce" />

// Pulse - dots scale up and down
<TypingIndicator animationPreset="pulse" />

// Fade - dots fade in and out
<TypingIndicator animationPreset="fade" />

Custom Styling

// Gray Wave
<TypingIndicator
  dotColor="#8E8E93"
  dotRadius={4}
  dotMargin={3}
  dotAmplitude={3}
/>

// Blue Bounce
<TypingIndicator
  dotColor="#1264A3"
  dotRadius={3}
  dotCount={3}
  animationPreset="bounce"
/>

// Large and slow
<TypingIndicator
  dotRadius={6}
  dotAmplitude={8}
  dotSpeed={0.08}
/>

// Fast animation
<TypingIndicator dotSpeed={0.25} />

With Container Styling

<TypingIndicator
  style={{
    backgroundColor: '#E8E8E8',
    borderRadius: 16,
    paddingHorizontal: 12,
    paddingVertical: 8,
  }}
  dotColor="#666"
/>

Requirements

• React Native >= 0.64.0
• React >= 17.0.0
• react-native-reanimated >= 3.0.0

License

MIT