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

``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).
`tsx
import { TypingIndicator } from 'react-native-chat-typing-indicator';
function Example() {
return (
);
}
`
| 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 |
`tsx
// Wave (default) - dots animate in sequence
// Bounce - all dots bounce together
// Pulse - dots scale up and down
// Fade - dots fade in and out
`
`tsx
// Gray Wave
dotRadius={4}
dotMargin={3}
dotAmplitude={3}
/>
// Blue Bounce
dotRadius={3}
dotCount={3}
animationPreset="bounce"
/>
// Large and slow
dotAmplitude={8}
dotSpeed={0.08}
/>
// Fast animation
`
`tsx``
backgroundColor: '#E8E8E8',
borderRadius: 16,
paddingHorizontal: 12,
paddingVertical: 8,
}}
dotColor="#666"
/>
- React Native >= 0.64.0
- React >= 17.0.0
- react-native-reanimated >= 3.0.0
MIT