Message reactions (emojis) for PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

The Message List component interacts with emoji picker and uses the emojis to react to text messages.

To keep the components library lightweight and provide maximum customizability, an emoji picker component is not included directly in the package. Instead, it's expected to be installed directly in your application and provided into react-native-chat-components using render props.

Interface

To use any emoji picker component of your choosing, it has to expose the onEmojiSelected() method which is called whenever an emoji is picked by the user. In that method, you must provide a single object argument which has an emoji property that returns a native emoji image that can be rendered by your app's supported browser. Additionally, the open property controls the visibility of the picker on the screen. You can use the onClose callback as an additional signal to close the picker when, for example, the user presses the area outside of the picker.

A TypeScript interface that you can import from the components looks like this:

interface EmojiPickerElementProps {
  onEmojiSelected?: ({ emoji }: { emoji: string }) => void;
  onClose?: () => void;
  open?: boolean;
}

rn-emoji-keyboard

rn-emoji-keyboard is a popular, customizable emoji picker component for React Native that is natively supported by PubNub Chat Components for React Native. It uses the same interface so the usage is plug-and-play.

1. Start by installing the package.

   npm install --save rn-emoji-keyboard

2. Import the component.

   import EmojiPicker from 'rn-emoji-keyboard'

3. Use it in your chat app.

   <Chat channel="test-channel">
     <MessageList enableReactions reactionsPicker={<EmojiPicker />} />
   </Chat>

react-native-emoji-selector

react-native-emoji-selector is another popular choice to provide emoji picking functionality. However, it uses a different interface so you have to write an adapter before rendering it in the components.

1. Start by installing the package.

   npm install --save react-native-emoji-selector

2. Import the component (and a helpful interface if you are using TypeScript).

   import EmojiSelector from 'react-native-emoji-selector'

3. Implement an adapter.

   const EmojiSelectorAdapter = (props: EmojiPickerElementProps) => {
       // control the picker visibility with the "open" property
       return props.open ? (
           <Modal>
               <EmojiSelector
                   // handling method's name is the same, however the input to it differs
                   // make sure to also close the picker after emoji was selected
                   onEmojiSelected={(emoji) => {
                       if (props.onEmojiSelected) props.onEmojiSelected({ emoji });
                       if (props.onClose) props.onClose();
                   }}
               />
           </Modal>
       ) : null;
   };

4. Use it in your chat app.

   <Chat channel="test-channel">
     <MessageList enableReactions reactionsPicker={<EmojiSelectorAdapter />} />
   </Chat>