feat: emoji reactions

package.json

@@ -44,6 +44,7 @@
     "react-native": "^0.78.0",
     "react-native-device-info": "^14.0.4",
     "react-native-drawer-layout": "^4.1.1",
+    "react-native-emoji-selector": "patch:react-native-emoji-selector@npm%3A0.2.0#~/.yarn/patches/react-native-emoji-selector-npm-0.2.0-d28c8d59eb.patch",
     "react-native-gesture-handler": "^2.24.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-keyboard-controller": "^1.16.6",

src/Generic.tsx

@@ -328,6 +328,11 @@ export const app = {
       `[FUNCTIONS] Tried to run uninitialised function openMessage (args: ${m})`,
     );
   },
+  openAddReaction: (m: Message | null) => {
+    console.log(
+      `[FUNCTIONS] Tried to run uninitialised function openAddReaction (args: ${m})`
+    );
+  },
   openChannelContextMenu: (c: Channel | null) => {
     console.log(
       `[FUNCTIONS] Tried to run uninitialised function openChannelContextMenu (args: ${c})`,

src/Modals.tsx

@@ -32,6 +32,7 @@ import {
   ServerSettingsSheet,
   SettingsSheet,
   StatusSheet,
+  AddReactionSheet
 } from '@clerotri/components/sheets';
 
 // Modals appear to break on the new architecture unless you wrap them in a View. see also https://github.com/react-navigation/react-navigation/issues/12301#issuecomment-2501692557
@@ -179,6 +180,7 @@ export const Modals = observer(() => {
       <MemberListSheet />
       <PinnedMessagesSheet />
       <ServerInfoSheet />
+      <AddReactionSheet />
       <FixedModal
         visible={!!imageViewerState.i}
         transparent={true}

src/components/common/BottomSheet.tsx

@@ -4,13 +4,14 @@ import {StyleSheet} from 'react-native';
 import BottomSheetCore, {
   BottomSheetBackdrop,
   BottomSheetScrollView,
+  BottomSheetView
 } from '@gorhom/bottom-sheet';
 import {observer} from 'mobx-react-lite';
 
 import {commonValues, Theme, ThemeContext} from '@clerotri/lib/themes';
 
 export const BottomSheet = observer(
-  ({sheetRef, children}: {sheetRef: any; children: any}) => {
+  ({sheetRef, innerScroll, children}: {sheetRef: any; innerScroll?: boolean; children: any}) => {
     const {currentTheme} = useContext(ThemeContext);
     const localStyles = useMemo(
       () => generateLocalStyles(currentTheme),
@@ -28,8 +29,13 @@ export const BottomSheet = observer(
         backdropComponent={BottomSheetBackdrop}
         style={localStyles.sheet}
         backgroundStyle={localStyles.sheetBackground}
-        handleIndicatorStyle={localStyles.handleIndicator}>
-        <BottomSheetScrollView>{children}</BottomSheetScrollView>
+        handleIndicatorStyle={localStyles.handleIndicator}
+        enableContentPanningGesture={!innerScroll}>
+        {innerScroll ? (
+          <BottomSheetView style={{ flexDirection: 'column', flex: 1 }}>{children}</BottomSheetView>
+        ) : (
+          <BottomSheetScrollView>{children}</BottomSheetScrollView>
+        )}
       </BottomSheetCore>
     );
   },

src/components/common/messaging/MessageReactions.tsx

@@ -2,9 +2,11 @@ import {useContext} from 'react';
 import {Pressable, View} from 'react-native';
 import {action} from 'mobx';
 import {observer} from 'mobx-react-lite';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import type {Message} from 'revolt.js';
 
+import {app} from '@clerotri/Generic';
 import {client} from '@clerotri/lib/client';
 import {Text} from '@clerotri/components/common/atoms';
 import {Image} from '@clerotri/crossplat/Image';
@@ -66,6 +68,29 @@ export const MessageReactions = observer(
               </Pressable>
             );
           })}
+
+          {msg.channel?.havePermission('React') ? (
+            <Pressable
+                  key={`message-${msg._id}-add-reaction}`}
+                  onPress={action(() => app.openAddReaction(msg))}
+                  style={{
+                    padding: commonValues.sizes.small,
+                    borderRadius: commonValues.sizes.small,
+                    borderColor: currentTheme.backgroundTertiary,
+                    backgroundColor: currentTheme.backgroundSecondary,
+                    borderWidth: commonValues.sizes.xs,
+                    marginEnd: commonValues.sizes.small,
+                    marginVertical: commonValues.sizes.xs,
+                  }}>
+                  <View style={{flexDirection: 'row'}}>
+                    <MaterialIcon
+                      name="add-reaction"
+                      size={20}
+                      color={currentTheme.foregroundPrimary}
+                    />
+                  </View>
+                </Pressable>
+          ) : null}
         </View>
       );
     }

src/components/sheets/AddReactionSheet.tsx

@@ -0,0 +1,67 @@
+import { useContext, useRef, useState, useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { observer } from 'mobx-react-lite';
+import EmojiSelector from 'react-native-emoji-selector';
+// import EmojiPicker from 'emoji-picker-react';
+
+import type BottomSheetCore from '@gorhom/bottom-sheet';
+
+import type { Message } from 'revolt.js';
+
+import { client } from '@clerotri/lib/client';
+import { showToast } from '@clerotri/lib/utils';
+import { app, setFunction } from '@clerotri/Generic';
+import { BottomSheet } from '@clerotri/components/common/BottomSheet';
+import { ThemeContext } from '@clerotri/lib/themes';
+import { useBackHandler } from '@clerotri/lib/ui';
+
+export const AddReactionSheet = observer(() => {
+  const { currentTheme } = useContext(ThemeContext);
+
+  const [message, setMessage] = useState(null as Message | null);
+
+  const sheetRef = useRef<BottomSheetCore>(null);
+
+  useBackHandler(() => {
+    if (message) {
+      sheetRef.current?.close();
+      return true;
+    }
+
+    return false;
+  });
+
+  setFunction('openAddReaction', async (m: Message | null) => {
+    setMessage(m);
+    m ? sheetRef.current?.expand() : sheetRef.current?.close();
+  });
+
+  function selectEmoji(emoji: string) {
+    if (!message) return;
+
+    const reaction = message.reactions.get(emoji) || [];
+
+    message.channel?.havePermission('React')
+      ? !Array.from(reaction).includes(client.user?._id!)
+        ? message.react(emoji)
+        : message.unreact(emoji)
+      : showToast('You cannot react to this message.');
+    app.openAddReaction(null);
+  }
+
+  return (
+    // BottomSheet cannot wrap our children in a scroll view because it will
+    // create a nested set of scroll views which causes issues
+    <BottomSheet innerScroll={true} sheetRef={sheetRef}>
+      <View style={{ paddingHorizontal: 16, flex: 1 }}>
+        {!message ? (
+          <></>
+        ) : (
+          <EmojiSelector
+            onEmojiSelected={selectEmoji}
+            columns={8} />
+        )}
+      </View>
+    </BottomSheet>
+  );
+});

src/components/sheets/MessageMenuSheet.tsx

@@ -56,6 +56,22 @@ export const MessageMenuSheet = observer(() => {
               }}>
               <ReplyMessage message={message} showSymbol={false} />
             </View>
+            {message.channel?.havePermission('React') && settings.get('ui.messaging.showReactions') ? (
+              <ContextButton
+              onPress={() => {
+                app.openAddReaction(message);
+                app.openMessage(null);
+              }}>
+              <View style={styles.iconContainer}>
+                <MaterialIcon
+                  name="add-reaction"
+                  size={20}
+                  color={currentTheme.foregroundPrimary}
+                />
+              </View>
+              <Text>Add Reaction</Text>
+            </ContextButton>
+            ) : null}
             {message.channel?.havePermission('SendMessage') ? (
               <ContextButton
                 onPress={() => {

src/components/sheets/index.ts

@@ -11,3 +11,4 @@ export {ServerInviteSheet} from './ServerInviteSheet';
 export {ServerSettingsSheet} from './ServerSettingsSheet';
 export {SettingsSheet} from './SettingsSheet';
 export {StatusSheet} from './StatusSheet';
+export {AddReactionSheet} from './AddReactionSheet';

yarn.lock

@@ -5593,6 +5593,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-datasource@npm:^6.0.0":
+  version: 6.1.1
+  resolution: "emoji-datasource@npm:6.1.1"
+  checksum: 10c0/b65d4cc3fa32d8ec03a5bc1c7c8506083ad12f3c2e244b7a8213c4f83619735899d124bb7471d1c794a6f4ac838f7b090c163495fa9b85bb96de4147daffa6aa
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -9975,6 +9982,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-emoji-selector@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "react-native-emoji-selector@npm:0.2.0"
+  dependencies:
+    emoji-datasource: "npm:^6.0.0"
+  checksum: 10c0/699d63074c9127e8e1ed8ea9bdc0ccfc5f4669e17564c2aef417082c756d513d49a74811ad0fc222197806e3a0e2cd90e78a98f2d39c6fba4625306c7cb32e8a
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:^2.24.0":
   version: 2.24.0
   resolution: "react-native-gesture-handler@npm:2.24.0"
@@ -10700,6 +10716,7 @@ __metadata:
     react-native: "npm:^0.78.0"
     react-native-device-info: "npm:^14.0.4"
     react-native-drawer-layout: "npm:^4.1.1"
+    react-native-emoji-selector: "npm:^0.2.0"
     react-native-gesture-handler: "npm:^2.24.0"
     react-native-get-random-values: "npm:^1.11.0"
     react-native-keyboard-controller: "npm:^1.16.6"