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

``bash
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

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

function Example() {
return (



);
}
`

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

$3

`tsx
// Wave (default) - dots animate in sequence


// Bounce - all dots bounce together


// Pulse - dots scale up and down


// Fade - dots fade in and out

`

$3

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

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

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

// Fast animation

`

$3

`tsx
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