Installation
📋 Requirements​
| React Native | React | iOS | Android | Expo | TypeScript |
|---|---|---|---|---|---|
| >= 0.82.0 | >= 19 | >= 15.1 | API 24+ (7.0) | SDK 55+ | >= 5.0 (optional) |
The floor comes from react-native-gesture-handler 3, which the library is built on (3.0+ is required; it supports React Native 0.82 and newer). The example app runs Expo SDK 58 with React Native 0.88.
📦 Installation​
Expo Projects​
npx expo install @kesha-antonov/react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
Bare React Native Projects​
Three steps
1. Install the packages. Reanimated 4 also needs react-native-worklets; leave it out on Reanimated 3:
yarn add @kesha-antonov/react-native-chat react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
npm install --save @kesha-antonov/react-native-chat react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
2. Add the worklets Babel plugin as the last entry in babel.config.js - react-native-worklets/plugin on Reanimated 4, react-native-reanimated/plugin on Reanimated 3 - following the react-native-reanimated installation guide.
3. Install iOS pods, then rebuild the native app (npx react-native run-ios / run-android) and restart Metro with --reset-cache. every peer above ships native code, so reloading the JS bundle alone is not enough:
npx pod-install
Optional peers​
Every feature below turns itself on when its package is installed and stays hidden when it is not - there is nothing to configure. getChatCapabilities() reports what the current install can do, e.g. to build UI that matches the chat's. In development, a feature that was asked for but cannot work (say audioRecording={{ isEnabled: true }} without expo-audio) logs one hint.
| Package | Feature | getChatCapabilities() key |
|---|---|---|
expo-clipboard or @react-native-clipboard/clipboard | "Copy" in the long-press menu | clipboard |
expo-haptics | Haptic ticks (long-press, swipe-to-reply, recording) | haptics |
expo-blur | Blurred backdrop behind the menu and the round video recorder | blur |
react-native-svg | Lucide icons and vector rings | svg |
expo-audio | Voice playback and hold-to-record voice notes | audioPlayback, voiceRecording |
react-native-audio-api | Voice waveforms, resume and trim | waveform |
expo-video | Inline video and round video notes | videoPlayback |
react-native-vision-camera 5 | In-chat round video capture | roundVideoCapture |
expo-image-picker | System camera fallback for video notes | videoRecording |
react-native-streamdown | Rich streaming markdown | markdown |
@lodev09/react-native-true-sheet | Native attachment sheet | nativeSheet |
expo-media-library | The attachment menu's photo grid | mediaLibrary |
expo-image-picker | The attachment menu's system photo picker and camera | imagePicker |
expo-document-picker | The attachment menu's File tab | documentPicker |
expo-location | The attachment menu's Location tab | location |
expo-sharing | Opening a received file in the share sheet (otherwise Linking) | sharing |
@react-native-async-storage/async-storage | Emoji recents and skin tones kept across launches | persistentEmojiRecents |
expo-image | Gallery thumbnails straight from the photo library | - |