React Native Gifted Chat

Emoji reactions allow users to react to messages with a quick picker. Reaction state (the reactions array on the message object) is managed by the developer.

Configuration

• reactions.isEnabled: Enables the feature.
• reactions.emojis: Array of emojis for the quick picker.
• reactions.onReactionPress: Callback (message, emoji) => void. You must implement the logic to add/remove reactions from your message data.
• reactions.renderReactionPicker: Optional override for a custom emoji browser.

interface IChatMessage extends IMessage {
  reactions?: { emoji: string, userIds: (string | number)[] }[]
}

// In your component:
<GiftedChat
  messages={messages}
  onSend={onSend}
  user={{ _id: CURRENT_USER_ID }}
  reactions={{
    isEnabled: true,
    onReactionPress: handleReactionPress,
  }}
/>

⚠️ IMPORTANT: This package (react-native-gifted-chat) is currently in maintenance mode and is not receiving new features.

Active development, including streaming AI messages and latest fixes, has moved to a maintained fork: @kesha-antonov/react-native-chat. New projects are encouraged to use the fork; migration is primarily a package rename.

Because the header's date text is updated via runOnJS (React state), there is a potential ~1 frame lag between the UI animation (running on the worklet/UI thread) and the text update (running on the JS thread). This can cause a 'wrong date flash' when scrolling into a newer day.

To prevent this, the library uses a Render Gate mechanism:

1. DayAnimated tracks the createdAt value it is actually rendering via a useEffect and a shared value called floatingRenderedDate.
2. The header's visibility is multiplied by a renderGate factor: renderGate = sticky.createdAt === floatingRenderedDate ? 1 : 0.
3. If the text hasn't caught up to the current sticky day, the header is hidden, and the inline separator (which is already correct) remains visible to cover the gap.

Result: The header opacity is calculated as: fade * stuckGate * renderGate.

The example application includes built-in support for switching between light and dark themes. While running in the iOS simulator, you can toggle the theme by pressing the following keyboard shortcut:

Cmd + Shift + A

To run the provided example application, follow these steps to install dependencies for both the root repository and the example directory, then build and start the app.

1. Install root dependencies and example dependencies:

   yarn install
   cd example
   yarn install

2. Install the native development build (required once or after native dependency changes):

   • For iOS: yarn installDevBuild:ios
   • For Android: yarn installDevBuild:android

3. Start the application on the iOS simulator:

   yarn start:ios

A comprehensive example app is available in the example directory of the repository. It demonstrates features like custom bubbles, avatars, replies, quick replies, typing indicators, and attachments.

To run the example locally:

# Clone and install
git clone https://github.com/FaridSafi/react-native-gifted-chat.git
cd react-native-gifted-chat/example
yarn install

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android

# Run on Web
npx expo start --web

To customize the appearance of specific components while maintaining their core functionality, react-native-gifted-chat provides a variety of renderProps.

Warning: When overriding components like renderSend, you may lose built-in behaviors (such as the automatic clearing of the input text after a message is sent) if you do not manually implement that logic within your custom component. To avoid this, ensure your custom component correctly handles the internal state and callbacks provided by the library.

// Example of the types of render props available for customization:
<GiftedChat
  renderInputToolbar={...}
  renderActions={...}
  renderComposer={...}
  renderSend={...}
  renderAvatar={...}
  renderBubble={...}
  renderSystemMessage={...}
  renderMessage={...}
  renderMessageText={...}
  renderCustomView={...}
/>

To prevent the TextInput from being hidden by the keyboard on Android, ensure your AndroidManifest.xml is configured with android:windowSoftInputMode="adjustResize" within the <activity> tag.

If you are using Expo, you may need to append a KeyboardAvoidingView after the GiftedChat component to handle layout correctly on Android:

<View style={{ flex: 1 }}>
   <GiftedChat />
   {Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />}
</View>

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

For bare React Native projects, follow these three steps:

Step 1: Install packages Using yarn:

yarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller

Using npm:

npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller

Step 2: Install iOS pods

npx pod-install

Step 3: Configure react-native-reanimated Add the react-native-reanimated/plugin to your babel.config.js as per the official reanimated installation guide.

To install react-native-gifted-chat in an Expo project, use the following command to ensure all necessary peer dependencies (like reanimated and gesture handler) are installed with compatible versions:

npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller