stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/store/apis/upsertReads.ts

@@ -2,11 +2,11 @@ import type { ReadResponse } from 'stream-chat';
 
 import { mapReadToStorable } from '../mappers/mapReadToStorable';
 import { mapUserToStorable } from '../mappers/mapUserToStorable';
-import { QuickSqliteClient } from '../QuickSqliteClient';
 import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
+import { SqliteClient } from '../SqliteClient';
 import type { PreparedQueries } from '../types';
 
-export const upsertReads = ({
+export const upsertReads = async ({
   cid,
   flush = true,
   reads,
@@ -30,14 +30,14 @@ export const upsertReads = ({
   queries.push(...storableUsers.map((storableUser) => createUpsertQuery('users', storableUser)));
   queries.push(...storableReads.map((storableRead) => createUpsertQuery('reads', storableRead)));
 
-  QuickSqliteClient.logger?.('info', 'upsertReads', {
+  SqliteClient.logger?.('info', 'upsertReads', {
     flush,
     reads: storableReads,
     users: storableUsers,
   });
 
   if (flush) {
-    QuickSqliteClient.executeSqlBatch(queries);
+    await SqliteClient.executeSqlBatch(queries);
   }
 
   return queries;

package/src/store/apis/upsertUserSyncStatus.ts

@@ -1,7 +1,7 @@
-import { QuickSqliteClient } from '../QuickSqliteClient';
 import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
+import { SqliteClient } from '../SqliteClient';
 
-export const upsertUserSyncStatus = ({
+export const upsertUserSyncStatus = async ({
   currentUserId,
   lastSyncedAt,
 }: {
@@ -13,10 +13,10 @@ export const upsertUserSyncStatus = ({
     userId: currentUserId,
   });
 
-  QuickSqliteClient.logger?.('info', 'upsertUserSyncStatus', {
+  SqliteClient.logger?.('info', 'upsertUserSyncStatus', {
     lastSyncedAt,
     userId: currentUserId,
   });
 
-  QuickSqliteClient.executeSql.apply(null, query);
+  await SqliteClient.executeSql.apply(null, query);
 };

package/src/test-utils/BetterSqlite.js

@@ -13,31 +13,23 @@ export class BetterSqlite {
     this.db.close();
   };
 
-  static getTables = () => {
-    this.openDB();
-    const tablesInDb = this.db.pragma(`table_list;`);
-    this.closeDB();
-
+  static getTables = async () => {
+    const tablesInDb = await this.db.pragma(`table_list;`);
     return tablesInDb;
   };
 
   static dropAllTables = () => {
-    this.openDB();
     const tableNames = Object.keys(tables);
 
     tableNames.forEach((name) => {
       const stmt = this.db.prepare(`DROP TABLE IF EXISTS ${name}`);
       stmt.run();
     });
-
-    this.closeDB();
   };
 
-  static selectFromTable = (table) => {
-    this.openDB();
-    const stmt = this.db.prepare(`SELECT * FROM ${table}`);
+  static selectFromTable = async (table) => {
+    const stmt = await this.db.prepare(`SELECT * FROM ${table}`);
     const result = stmt.all();
-    this.closeDB();
 
     return result;
   };

package/src/types/types.ts

@@ -21,6 +21,7 @@ export type Asset = {
   uri: string;
   width: number;
   id?: string;
+  originalUri?: string;
   size?: number;
 };
 
@@ -29,6 +30,7 @@ export type File = {
   duration?: number;
   id?: string;
   mimeType?: string;
+  originalUri?: string;
   size?: number;
   type?: FileTypes;
   // The uri should be of type `string`. But is `string|undefined` because the same type is used for the response from Stream's Attachment. This shall be fixed.
@@ -67,6 +69,13 @@ export type DefaultAttachmentType = UnknownType & {
   waveform_data?: number[];
 };
 
+export type Reaction = {
+  id: string;
+  name: string;
+  type: string;
+  image?: string;
+};
+
 interface DefaultUserType extends UnknownType {
   image?: string;
 }

package/src/utils/DBSyncManager.ts

@@ -9,8 +9,8 @@ import { addPendingTask } from '../store/apis/addPendingTask';
 
 import { deletePendingTask } from '../store/apis/deletePendingTask';
 import { getPendingTasks } from '../store/apis/getPendingTasks';
-import { QuickSqliteClient } from '../store/QuickSqliteClient';
-import type { PendingTask, PreparedQueries } from '../store/types';
+import { SqliteClient } from '../store/SqliteClient';
+import type { PendingTask } from '../store/types';
 import type { DefaultStreamChatGenerics } from '../types/types';
 
 /**
@@ -53,35 +53,39 @@ export class DBSyncManager {
    * @param client
    */
   static init = async (client: StreamChat) => {
-    this.client = client;
-    // If the websocket connection is already active, then straightaway
-    // call the sync api and also execute pending api calls.
-    // Otherwise wait for `connection.changed` event.
-    if (client.user?.id && client.wsConnection?.isHealthy) {
-      await this.syncAndExecutePendingTasks();
-      this.syncStatus = true;
-      this.listeners.forEach((l) => l(true));
-    }
-
-    // If a listener has already been registered, unsubscribe from it so
-    // that it can be reinstated. This can happen if we reconnect with a
-    // different user or the component invoking the init() function gets
-    // unmounted and then remounted again. This part of the code makes
-    // sure the stale listener doesn't produce a memory leak.
-    if (this.connectionChangedListener) {
-      this.connectionChangedListener.unsubscribe();
-    }
-
-    this.connectionChangedListener = this.client.on('connection.changed', async (event) => {
-      if (event.online) {
+    try {
+      this.client = client;
+      // If the websocket connection is already active, then straightaway
+      // call the sync api and also execute pending api calls.
+      // Otherwise wait for `connection.changed` event.
+      if (client.user?.id && client.wsConnection?.isHealthy) {
         await this.syncAndExecutePendingTasks();
         this.syncStatus = true;
         this.listeners.forEach((l) => l(true));
-      } else {
-        this.syncStatus = false;
-        this.listeners.forEach((l) => l(false));
       }
-    });
+
+      // If a listener has already been registered, unsubscribe from it so
+      // that it can be reinstated. This can happen if we reconnect with a
+      // different user or the component invoking the init() function gets
+      // unmounted and then remounted again. This part of the code makes
+      // sure the stale listener doesn't produce a memory leak.
+      if (this.connectionChangedListener) {
+        this.connectionChangedListener.unsubscribe();
+      }
+
+      this.connectionChangedListener = this.client.on('connection.changed', async (event) => {
+        if (event.online) {
+          await this.syncAndExecutePendingTasks();
+          this.syncStatus = true;
+          this.listeners.forEach((l) => l(true));
+        } else {
+          this.syncStatus = false;
+          this.listeners.forEach((l) => l(false));
+        }
+      });
+    } catch (error) {
+      console.log('Error in DBSyncManager.init: ', error);
+    }
   };
 
   /**
@@ -106,11 +110,11 @@ export class DBSyncManager {
     client: StreamChat<StreamChatGenerics>,
   ) => {
     if (!this.client?.user) return;
-    const cids = getAllChannelIds();
+    const cids = await getAllChannelIds();
     // If there are no channels, then there is no need to sync.
     if (cids.length === 0) return;
 
-    const lastSyncedAt = getLastSyncedAt({
+    const lastSyncedAt = await getLastSyncedAt({
       currentUserId: this.client.user.id,
     });
 
@@ -122,26 +126,27 @@ export class DBSyncManager {
       if (diff > 30) {
         // stream backend will send an error if we try to sync after 30 days.
         // In that case reset the entire DB and start fresh.
-        QuickSqliteClient.resetDB();
+        await SqliteClient.resetDB();
       } else {
         try {
           const result = await this.client.sync(cids, lastSyncedAtDate.toISOString());
-          const queries = result.events.reduce<PreparedQueries[]>((queries, event) => {
-            queries = queries.concat(handleEventToSyncDB(event, client, false));
-            return queries;
-          }, []);
+          const queryPromises = result.events.map(
+            async (event) => await handleEventToSyncDB(event, client),
+          );
+          const queriesArray = await Promise.all(queryPromises);
+          const queries = queriesArray.flat();
 
           if (queries.length) {
-            QuickSqliteClient.executeSqlBatch(queries);
+            await SqliteClient.executeSqlBatch(queries);
           }
         } catch (e) {
           // Error will be raised by the sync API if there are too many events.
           // In that case reset the entire DB and start fresh.
-          QuickSqliteClient.resetDB();
+          await SqliteClient.resetDB();
         }
       }
     }
-    upsertUserSyncStatus({
+    await upsertUserSyncStatus({
       currentUserId: this.client.user.id,
       lastSyncedAt: new Date().toString(),
     });
@@ -163,7 +168,7 @@ export class DBSyncManager {
     client: StreamChat<StreamChatGenerics>;
     task: PendingTask;
   }) => {
-    const removeFromApi = addPendingTask(task);
+    const removeFromApi = await addPendingTask(task);
 
     let response;
     try {
@@ -177,7 +182,7 @@ export class DBSyncManager {
       }
     }
 
-    removeFromApi();
+    await removeFromApi();
 
     return response;
   };
@@ -213,7 +218,7 @@ export class DBSyncManager {
   >(
     client: StreamChat<StreamChatGenerics>,
   ) => {
-    const queue = getPendingTasks();
+    const queue = await getPendingTasks();
     for (const task of queue) {
       if (!task.id) continue;
 
@@ -231,20 +236,20 @@ export class DBSyncManager {
         }
       }
 
-      deletePendingTask({
+      await deletePendingTask({
         id: task.id,
       });
       await restBeforeNextTask();
     }
   };
 
-  static dropPendingTasks = (conditions: { messageId: string }) => {
-    const tasks = getPendingTasks(conditions);
+  static dropPendingTasks = async (conditions: { messageId: string }) => {
+    const tasks = await getPendingTasks(conditions);
 
     for (const task of tasks) {
       if (!task.id) continue;
 
-      deletePendingTask({
+      await deletePendingTask({
         id: task.id,
       });
     }

package/src/utils/__tests__/getResizedImageUrl.test.ts

@@ -1,7 +1,6 @@
 import { PixelRatio } from 'react-native';
 
 import { getResizedImageUrl, GetResizedImageUrlParams } from '../getResizedImageUrl';
-import { StreamChatRN } from '../StreamChatRN';
 
 const TEST_URL_1 =
   'http://us-east.stream-io-cdn.com/blah?sig=34k23n4k23nk423&oh=300&ow=200&h=*&w=*&resize=*';
@@ -31,9 +30,9 @@ describe('getResizedImageUrl (happy flow)', () => {
   );
 
   it('should append all related params with resizableCDNHosts was set', () => {
-    StreamChatRN.setConfig({ resizableCDNHosts: ['my-company-cdn.com'] });
     const resizedUrl = getResizedImageUrl({
       height: 100,
+      resizableCDNHosts: ['my-company-cdn.com'],
       url: 'http://my-company-cdn.com/cat-photo?sig=34k23n4k23nk423&oh=300&ow=200',
       width: 100,
     });

package/src/utils/getResizedImageUrl.ts

@@ -1,8 +1,11 @@
 import { PixelRatio } from 'react-native';
 
-import { StreamChatRN } from './StreamChatRN';
+import {
+  chatConfigContextDefaultvalue,
+  ChatConfigContextValue,
+} from '../contexts/chatConfigContext/ChatConfigContext';
 
-export type GetResizedImageUrlParams = {
+export type GetResizedImageUrlParams = Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   url: string;
   height?: string | number;
   resize?: 'clip' | 'crop' | 'fill' | 'scale';
@@ -23,6 +26,7 @@ export type GetResizedImageUrlParams = {
  */
 export function getResizedImageUrl({
   height,
+  resizableCDNHosts = chatConfigContextDefaultvalue.resizableCDNHosts,
   resize = 'clip',
   url,
   width,
@@ -38,9 +42,7 @@ export function getResizedImageUrl({
     // In case of old CDN we don't want to do any kind of resizing.
 
     const isResizableUrl =
-      StreamChatRN.config.resizableCDNHosts.some((rCDNh) => url.includes(rCDNh)) &&
-      originalHeight &&
-      originalWidth;
+      resizableCDNHosts?.some((rCDNh) => url.includes(rCDNh)) && originalHeight && originalWidth;
 
     if (!isResizableUrl || (!height && !width)) return url;
 

package/src/utils/utils.ts

@@ -108,7 +108,7 @@ export const isEditedMessage = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: MessageType<StreamChatGenerics>,
-) => !!message.message_text_updated_at;
+) => !!message.message_text_updated_at && !message.ai_generated;
 
 /**
  * Default emoji search index for auto complete text input

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.44.2-beta.1"
+  "version": "6.0.0-beta.1"
 }

package/lib/commonjs/components/ImageBackground.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_jsxRuntime","_excluded","_this","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ImageBackground","props","children","_props$ImageComponent","ImageComponent","Image","imageStyle","importantForAccessibility","style","rest","_objectWithoutProperties2","flattenedStyle","StyleSheet","flatten","jsxs","View","accessibilityIgnoresInvertColors","jsx","assign","absoluteFill","height","width","exports"],"sourceRoot":"../../../src","sources":["components/ImageBackground.tsx"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAAyF,IAAAE,WAAA,GAAAF,OAAA;AAAA,IAAAG,SAAA;AAAA,IAAAC,KAAA;EAAAC,YAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA+BlF,IAAMW,eAIZ,GAAG,SAJSA,eAIZA,CAAIC,KAAK,EAAK;EACb,IACEC,QAAQ,GAMND,KAAK,CANPC,QAAQ;IAAAC,qBAAA,GAMNF,KAAK,CALPG,cAAc;IAAdA,cAAc,GAAAD,qBAAA,cAAGE,kBAAK,GAAAF,qBAAA;IACtBG,UAAU,GAIRL,KAAK,CAJPK,UAAU;IACVC,yBAAyB,GAGvBN,KAAK,CAHPM,yBAAyB;IACzBC,KAAK,GAEHP,KAAK,CAFPO,KAAK;IACFC,IAAI,OAAAC,yBAAA,aACLT,KAAK,EAAAxB,SAAA;EAET,IAAMkC,cAAc,GAAGC,uBAAU,CAACC,OAAO,CAACL,KAAK,CAAC;EAChD,OACE,IAAAhC,WAAA,CAAAsC,IAAA,EAACvC,YAAA,CAAAwC,IAAI;IACHC,gCAAgC,EAAE,IAAK;IACvCT,yBAAyB,EAAEA,yBAA0B;IACrDC,KAAK,EAAEA,KAAM;IAAAN,QAAA,GAEb,IAAA1B,WAAA,CAAAyC,GAAA,EAACb,cAAc,EAAAZ,MAAA,CAAA0B,MAAA,KACTT,IAAI;MACRF,yBAAyB,EAAEA,yBAA0B;MACrDC,KAAK,EAAE,CACLI,uBAAU,CAACO,YAAY,EACvB;QAQEC,MAAM,EAAET,cAAc,oBAAdA,cAAc,CAAES,MAAM;QAC9BC,KAAK,EAAEV,cAAc,oBAAdA,cAAc,CAAEU;MACzB,CAAC,EACDf,UAAU;IACV,EACH,CAAC,EACDJ,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAACoB,OAAA,CAAAtB,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/commonjs/components/Message/MessageSimple/ReactionList.js

@@ -1,305 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReactionList = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _MessageContext = require("../../../contexts/messageContext/MessageContext");
-var _MessagesContext = require("../../../contexts/messagesContext/MessagesContext");
-var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
-var _Unknown = require("../../../icons/Unknown");
-var _jsxRuntime = require("react/jsx-runtime");
-var _this = this,
-  _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/MessageSimple/ReactionList.tsx";
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Icon = function Icon(_ref) {
-  var _supportedReactions$f;
-  var pathFill = _ref.pathFill,
-    size = _ref.size,
-    style = _ref.style,
-    supportedReactions = _ref.supportedReactions,
-    type = _ref.type;
-  var ReactionIcon = ((_supportedReactions$f = supportedReactions.find(function (reaction) {
-    return reaction.type === type;
-  })) == null ? void 0 : _supportedReactions$f.Icon) || _Unknown.Unknown;
-  return (0, _jsxRuntime.jsx)(_reactNative.View, {
-    children: (0, _jsxRuntime.jsx)(ReactionIcon, {
-      height: size,
-      pathFill: pathFill,
-      style: style,
-      width: size
-    })
-  });
-};
-var ReactionListWithContext = function ReactionListWithContext(props) {
-  var alignment = props.alignment,
-    propFill = props.fill,
-    message = props.message,
-    messageContentWidth = props.messageContentWidth,
-    _onLongPress = props.onLongPress,
-    _onPress = props.onPress,
-    _onPressIn = props.onPressIn,
-    preventPress = props.preventPress,
-    propRadius = props.radius,
-    reactions = props.reactions,
-    propReactionSize = props.reactionSize,
-    showMessageOverlay = props.showMessageOverlay,
-    propStroke = props.stroke,
-    propStrokeSize = props.strokeSize,
-    supportedReactions = props.supportedReactions,
-    targetedMessage = props.targetedMessage;
-  var _useTheme = (0, _ThemeContext.useTheme)(),
-    _useTheme$theme = _useTheme.theme,
-    _useTheme$theme$color = _useTheme$theme.colors,
-    accent_blue = _useTheme$theme$color.accent_blue,
-    black = _useTheme$theme$color.black,
-    grey = _useTheme$theme$color.grey,
-    grey_gainsboro = _useTheme$theme$color.grey_gainsboro,
-    grey_whisper = _useTheme$theme$color.grey_whisper,
-    targetedMessageBackground = _useTheme$theme$color.targetedMessageBackground,
-    white = _useTheme$theme$color.white,
-    white_snow = _useTheme$theme$color.white_snow,
-    _useTheme$theme$messa = _useTheme$theme.messageSimple,
-    _useTheme$theme$messa2 = _useTheme$theme$messa.avatarWrapper,
-    leftAlign = _useTheme$theme$messa2.leftAlign,
-    spacer = _useTheme$theme$messa2.spacer,
-    _useTheme$theme$messa3 = _useTheme$theme$messa.reactionList,
-    container = _useTheme$theme$messa3.container,
-    iconFillColor = _useTheme$theme$messa3.iconFillColor,
-    middleIcon = _useTheme$theme$messa3.middleIcon,
-    themeRadius = _useTheme$theme$messa3.radius,
-    reactionBubble = _useTheme$theme$messa3.reactionBubble,
-    reactionContainer = _useTheme$theme$messa3.reactionContainer,
-    reactionCount = _useTheme$theme$messa3.reactionCount,
-    themeReactionSize = _useTheme$theme$messa3.reactionSize,
-    themeStrokeSize = _useTheme$theme$messa3.strokeSize,
-    screenPadding = _useTheme$theme.screenPadding;
-  var width = (0, _reactNative.useWindowDimensions)().width;
-  var supportedReactionTypes = supportedReactions.map(function (supportedReaction) {
-    return supportedReaction.type;
-  });
-  var hasSupportedReactions = reactions.some(function (reaction) {
-    return supportedReactionTypes.includes(reaction.type);
-  });
-  if (!hasSupportedReactions || messageContentWidth === 0) {
-    return null;
-  }
-  var alignmentLeft = alignment === 'left';
-  var fill = propFill || (alignmentLeft ? grey_gainsboro : grey_whisper);
-  var radius = propRadius || themeRadius;
-  var reactionSize = propReactionSize || themeReactionSize;
-  var highlighted = message.pinned || targetedMessage === message.id;
-  var stroke = propStroke || (highlighted ? targetedMessageBackground : white_snow);
-  var strokeSize = propStrokeSize || themeStrokeSize;
-  var x1 = alignmentLeft ? messageContentWidth + (Number(leftAlign.marginRight) || 0) + (Number(spacer.width) || 0) - radius * 0.5 : width - screenPadding * 2 - messageContentWidth;
-  var x2 = x1 + radius * 2 * (alignmentLeft ? 1 : -1);
-  var y1 = reactionSize + radius * 2;
-  var y2 = reactionSize - radius;
-  var insideLeftBound = x2 - reactionSize * reactions.length / 2 > screenPadding;
-  var insideRightBound = x2 + strokeSize + reactionSize * reactions.length / 2 < width - screenPadding * 2;
-  var left = reactions.length === 1 ? x1 + (alignmentLeft ? -radius : radius - reactionSize) : !insideLeftBound ? screenPadding : !insideRightBound ? width - screenPadding * 2 - reactionSize * reactions.length - strokeSize : x2 - reactionSize * reactions.length / 2 - strokeSize;
-  return (0, _jsxRuntime.jsx)(_reactNative.View, {
-    pointerEvents: "box-none",
-    style: [styles.container, {
-      height: reactionSize + radius * 5,
-      width: width
-    }, container],
-    testID: "reaction-list",
-    children: reactions.length ? (0, _jsxRuntime.jsxs)(_reactNative.View, {
-      pointerEvents: "box-none",
-      style: [_reactNative.StyleSheet.absoluteFill],
-      children: [(0, _jsxRuntime.jsxs)(_reactNativeSvg["default"], {
-        pointerEvents: "none",
-        children: [(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: x1,
-          cy: y1,
-          fill: stroke,
-          r: radius + strokeSize * 3
-        }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: x2,
-          cy: y2,
-          fill: stroke,
-          r: radius * 2 + strokeSize * 3
-        }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: x1,
-          cy: y1,
-          fill: fill,
-          r: radius + strokeSize
-        }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: x2,
-          cy: y2,
-          fill: fill,
-          r: radius * 2 + strokeSize
-        }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: x1,
-          cy: y1,
-          fill: alignmentLeft ? fill : white,
-          r: radius
-        }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: x2,
-          cy: y2,
-          fill: alignmentLeft ? fill : white,
-          r: radius * 2
-        })]
-      }), (0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        style: [_reactNative.StyleSheet.absoluteFill],
-        children: (0, _jsxRuntime.jsx)(_reactNativeSvg["default"], {
-          children: (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-            cx: x2,
-            cy: y2,
-            fill: alignmentLeft ? fill : white,
-            r: radius * 2
-          })
-        })
-      }), (0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        disabled: preventPress,
-        onLongPress: function onLongPress(event) {
-          if (_onLongPress) {
-            _onLongPress({
-              emitter: 'reactionList',
-              event: event
-            });
-          }
-        },
-        onPress: function onPress(event) {
-          if (_onPress) {
-            _onPress({
-              defaultHandler: function defaultHandler() {
-                return showMessageOverlay(false);
-              },
-              emitter: 'reactionList',
-              event: event
-            });
-          }
-        },
-        onPressIn: function onPressIn(event) {
-          if (_onPressIn) {
-            _onPressIn({
-              defaultHandler: function defaultHandler() {
-                return showMessageOverlay(false);
-              },
-              emitter: 'reactionList',
-              event: event
-            });
-          }
-        },
-        style: [styles.reactionBubble, {
-          backgroundColor: alignmentLeft ? fill : white,
-          borderColor: fill,
-          borderRadius: reactionSize,
-          borderWidth: strokeSize,
-          height: reactionSize - strokeSize * 2,
-          left: left + strokeSize,
-          top: strokeSize
-        }, reactionBubble],
-        children: reactions.map(function (reaction, index) {
-          return (0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [styles.reactionContainer, {
-              marginRight: index < reactions.length - 1 ? 5 : 0
-            }, reactionContainer],
-            children: [(0, _jsxRuntime.jsx)(Icon, {
-              pathFill: reaction.own ? iconFillColor || accent_blue : grey,
-              size: reactionSize / 2,
-              style: middleIcon,
-              supportedReactions: supportedReactions,
-              type: reaction.type
-            }, reaction.type), (0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.reactionCount, {
-                color: black
-              }, reactionCount],
-              children: reaction.count
-            })]
-          }, reaction.type);
-        })
-      })]
-    }) : null
-  });
-};
-var areEqual = function areEqual(prevProps, nextProps) {
-  var prevMessage = prevProps.message,
-    prevMessageContentWidth = prevProps.messageContentWidth,
-    prevReactions = prevProps.reactions,
-    prevTargetedMessage = prevProps.targetedMessage;
-  var nextMessage = nextProps.message,
-    nextMessageContentWidth = nextProps.messageContentWidth,
-    nextReactions = nextProps.reactions,
-    nextTargetedMessage = nextProps.targetedMessage;
-  var messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;
-  if (!messageContentWidthEqual) return false;
-  var messagePinnedEqual = prevMessage.pinned === nextMessage.pinned;
-  if (!messagePinnedEqual) return false;
-  var targetedMessageEqual = prevTargetedMessage === nextTargetedMessage;
-  if (!targetedMessageEqual) return false;
-  var latestReactionsEqual = Array.isArray(prevMessage.latest_reactions) && Array.isArray(nextMessage.latest_reactions) ? prevMessage.latest_reactions.length === nextMessage.latest_reactions.length && prevMessage.latest_reactions.every(function (_ref2, index) {
-    var _nextMessage$latest_r;
-    var type = _ref2.type;
-    return type === ((_nextMessage$latest_r = nextMessage.latest_reactions) == null ? void 0 : _nextMessage$latest_r[index].type);
-  }) : prevMessage.latest_reactions === nextMessage.latest_reactions;
-  if (!latestReactionsEqual) return false;
-  var reactionsEqual = Array.isArray(prevReactions) && Array.isArray(nextReactions) ? prevReactions.length === nextReactions.length && prevReactions.every(function (_ref3, index) {
-    var _nextMessage$latest_r2, _nextMessage$latest_r3;
-    var count = _ref3.count,
-      type = _ref3.type;
-    return type === ((_nextMessage$latest_r2 = nextMessage.latest_reactions) == null ? void 0 : _nextMessage$latest_r2[index].type) && count === ((_nextMessage$latest_r3 = nextMessage.latest_reactions) == null ? void 0 : _nextMessage$latest_r3[index].count);
-  }) : prevReactions === nextReactions;
-  if (!reactionsEqual) return false;
-  return true;
-};
-var MemoizedReactionList = _react["default"].memo(ReactionListWithContext, areEqual);
-var ReactionList = function ReactionList(props) {
-  var _useMessageContext = (0, _MessageContext.useMessageContext)(),
-    alignment = _useMessageContext.alignment,
-    message = _useMessageContext.message,
-    onLongPress = _useMessageContext.onLongPress,
-    onPress = _useMessageContext.onPress,
-    onPressIn = _useMessageContext.onPressIn,
-    preventPress = _useMessageContext.preventPress,
-    reactions = _useMessageContext.reactions,
-    showMessageOverlay = _useMessageContext.showMessageOverlay;
-  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
-    supportedReactions = _useMessagesContext.supportedReactions,
-    targetedMessage = _useMessagesContext.targetedMessage;
-  return (0, _jsxRuntime.jsx)(MemoizedReactionList, Object.assign({
-    alignment: alignment,
-    message: message,
-    onLongPress: onLongPress,
-    onPress: onPress,
-    onPressIn: onPressIn,
-    preventPress: preventPress,
-    reactions: reactions,
-    showMessageOverlay: showMessageOverlay,
-    supportedReactions: supportedReactions,
-    targetedMessage: targetedMessage
-  }, props));
-};
-exports.ReactionList = ReactionList;
-var styles = _reactNative.StyleSheet.create({
-  container: {
-    left: 0,
-    position: 'absolute',
-    top: 0
-  },
-  reactionBubble: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    paddingHorizontal: 5,
-    position: 'absolute'
-  },
-  reactionContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  reactionCount: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginLeft: 2
-  }
-});
-//# sourceMappingURL=ReactionList.js.map