stream-chat-react-native-core 4.1.0 → 4.1.1

package/lib/module/icons/Smile.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Smile.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Smile.tsx";
 
 var Smile = function Smile(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Sound.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Sound.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Sound.tsx";
 
 var Sound = function Sound(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/TAR.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/TAR.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/TAR.tsx";
 
 var TAR = function TAR(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/TXT.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/TXT.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/TXT.tsx";
 
 var TXT = function TXT(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/ThreadReply.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/ThreadReply.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/ThreadReply.tsx";
 
 var ThreadReply = function ThreadReply(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/ThumbsDownReaction.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/ThumbsDownReaction.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/ThumbsDownReaction.tsx";
 
 var ThumbsDownReaction = function ThumbsDownReaction(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/ThumbsUpReaction.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/ThumbsUpReaction.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/ThumbsUpReaction.tsx";
 
 var ThumbsUpReaction = function ThumbsUpReaction(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Time.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Time.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Time.tsx";
 
 var Time = function Time(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Unknown.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Unknown.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Unknown.tsx";
 
 var Unknown = function Unknown(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Unpin.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Unpin.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Unpin.tsx";
 
 var Unpin = function Unpin(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/User.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/User.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/User.tsx";
 
 var User = function User(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/UserAdd.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserAdd.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserAdd.tsx";
 
 var UserAdd = function UserAdd(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/UserAdmin.js

@@ -16,7 +16,7 @@ var _base = require("./utils/base");
 var _excluded = ["height", "width"];
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserAdmin.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserAdmin.tsx";
 
 var UserAdmin = function UserAdmin(props) {
   var height = props.height,

package/lib/module/icons/UserDelete.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserDelete.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserDelete.tsx";
 
 var UserDelete = function UserDelete(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/UserMinus.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserMinus.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserMinus.tsx";
 
 var UserMinus = function UserMinus(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/WutReaction.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/WutReaction.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/WutReaction.tsx";
 
 var WutReaction = function WutReaction(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/XLS.js

@@ -14,7 +14,7 @@ var _reactNativeSvg = require("react-native-svg");
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/XLS.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/XLS.tsx";
 
 var XLS = function XLS(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/XLSX.js

@@ -14,7 +14,7 @@ var _reactNativeSvg = require("react-native-svg");
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/XLSX.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/XLSX.tsx";
 
 var XLSX = function XLSX(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/ZIP.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/ZIP.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/ZIP.tsx";
 
 var ZIP = function ZIP(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/utils/base.js

@@ -16,7 +16,7 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/utils/base.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/utils/base.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.1.0"
+  "version": "4.1.1"
 }

package/lib/typescript/components/ImageGallery/ImageGallery.d.ts

@@ -55,7 +55,6 @@ export declare type ImageGalleryCustomComponents<StreamChatGenerics extends Defa
 };
 declare type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ImageGalleryCustomComponents<StreamChatGenerics> & {
     overlayOpacity: Animated.SharedValue<number>;
-    visible: boolean;
     imageGalleryGridHandleHeight?: number;
     /**
      * This should be

package/lib/typescript/components/ImageGallery/components/ImageGrid.d.ts

@@ -18,7 +18,6 @@ export declare type GridImageItem<StreamChatGenerics extends DefaultStreamChatGe
 declare type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ImageGalleryGridImageComponents<StreamChatGenerics> & {
     closeGridView: () => void;
     photos: Photo<StreamChatGenerics>[];
-    resetVisibleValues: () => void;
     setImage: React.Dispatch<React.SetStateAction<{
         messageId?: string | undefined;
         url?: string | undefined;

package/lib/typescript/components/MessageOverlay/MessageOverlay.d.ts

@@ -2,9 +2,8 @@ import Animated from 'react-native-reanimated';
 import { MessageOverlayContextValue, MessageOverlayData } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import { OverlayContextValue, OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare type MessageOverlayPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions' | 'OverlayReactionsAvatar' | 'reset'> & Omit<MessageOverlayData<StreamChatGenerics>, 'supportedReactions'> & Pick<OverlayContextValue, 'overlay' | 'setOverlay'> & Pick<OverlayProviderProps<StreamChatGenerics>, 'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions' | 'messageTextNumberOfLines' | 'overlayOpacity'> & {
+export declare type MessageOverlayPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions' | 'OverlayReactionsAvatar'> & Omit<MessageOverlayData<StreamChatGenerics>, 'supportedReactions'> & Pick<OverlayContextValue, 'overlay' | 'setOverlay'> & Pick<OverlayProviderProps<StreamChatGenerics>, 'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions' | 'messageTextNumberOfLines' | 'overlayOpacity'> & {
     showScreen?: Animated.SharedValue<number>;
-    visible?: boolean;
 };
 export declare type MessageOverlayProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Omit<MessageOverlayPropsWithContext<StreamChatGenerics>, 'overlayOpacity'>> & Pick<MessageOverlayPropsWithContext<StreamChatGenerics>, 'overlayOpacity'> & Pick<MessageOverlayPropsWithContext<StreamChatGenerics>, 'isMyMessage' | 'error' | 'isThreadMessage' | 'message' | 'messageReactions'>;
 /**

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -191,6 +191,8 @@ export declare type Theme = {
             usernameText: TextStyle;
         };
         backgroundColor?: string;
+        pager?: ViewStyle;
+        slide?: ImageStyle;
     };
     inlineDateSeparator: {
         container: ViewStyle;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/ImageGallery/ImageGallery.tsx

@@ -22,7 +22,6 @@ import {
 import Animated, {
   cancelAnimation,
   Easing,
-  interpolate,
   runOnJS,
   runOnUI,
   useAnimatedGestureHandler,
@@ -125,7 +124,6 @@ export type ImageGalleryCustomComponents<
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryCustomComponents<StreamChatGenerics> & {
     overlayOpacity: Animated.SharedValue<number>;
-    visible: boolean;
     imageGalleryGridHandleHeight?: number;
     /**
      * This should be
@@ -145,12 +143,11 @@ export const ImageGallery = <
     imageGalleryGridSnapPoints,
     numberOfImageGalleryGridColumns,
     overlayOpacity,
-    visible,
   } = props;
   const {
     theme: {
       colors: { white_snow },
-      imageGallery: { backgroundColor },
+      imageGallery: { backgroundColor, pager, slide },
     },
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
@@ -191,10 +188,10 @@ export const ImageGallery = <
    * Fade animation for screen, it is always rendered with pointerEvents
    * set to none for fast opening
    */
-  const showScreen = useSharedValue(0);
-  const fadeScreen = (show: boolean) => {
+  const screenTranslateY = useSharedValue(screenHeight);
+  const showScreen = () => {
     'worklet';
-    showScreen.value = withTiming(show ? 1 : 0, {
+    screenTranslateY.value = withTiming(0, {
       duration: 250,
       easing: Easing.out(Easing.ease),
     });
@@ -204,11 +201,9 @@ export const ImageGallery = <
    * Run the fade animation on visible change
    */
   useEffect(() => {
-    if (visible) {
-      Keyboard.dismiss();
-    }
-    fadeScreen(visible);
-  }, [visible]);
+    Keyboard.dismiss();
+    showScreen();
+  }, []);
 
   /**
    * Image height from URL or default to full screen height
@@ -305,28 +300,6 @@ export const ImageGallery = <
     offsetScale.value = 1;
   };
 
-  /**
-   * Reset all key values for visible
-   */
-  const resetVisibleValues = () => {
-    'worklet';
-    resetTouchValues();
-    resetMovementValues();
-    headerFooterVisible.value = 1;
-    offsetX.value = 0;
-    offsetY.value = 0;
-    adjustedFocalX.value = 0;
-    adjustedFocalY.value = 0;
-    tapX.value = 0;
-    tapY.value = 0;
-  };
-
-  useEffect(() => {
-    if (!visible) {
-      resetVisibleValues();
-    }
-  }, [visible]);
-
   /**
    * Photos array created from all currently available
    * photo attachments
@@ -656,7 +629,6 @@ export const ImageGallery = <
                 easing: Easing.out(Easing.ease),
               },
               () => {
-                showScreen.value = 0;
                 runOnJS(setOverlay)('none');
               },
             );
@@ -1018,7 +990,7 @@ export const ImageGallery = <
         },
       ],
     }),
-    [visible],
+    [],
   );
 
   /**
@@ -1038,10 +1010,9 @@ export const ImageGallery = <
    */
   const showScreenStyle = useAnimatedStyle<ViewStyle>(
     () => ({
-      opacity: interpolate(showScreen.value, [0, 0.01, 1], [0, 1, 1]),
       transform: [
         {
-          translateY: interpolate(showScreen.value, [0, 1], [screenHeight, 0]),
+          translateY: screenTranslateY.value,
         },
       ],
     }),
@@ -1067,12 +1038,8 @@ export const ImageGallery = <
       setGridPhotos(photos);
     }
   };
-
   return (
-    <Animated.View
-      pointerEvents={visible ? 'auto' : 'none'}
-      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
-    >
+    <Animated.View pointerEvents={'auto'} style={[StyleSheet.absoluteFillObject, showScreenStyle]}>
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <TapGestureHandler
         minPointers={1}
@@ -1111,6 +1078,7 @@ export const ImageGallery = <
                         style={[
                           styles.animatedContainer,
                           pagerStyle,
+                          pager,
                           {
                             transform: [
                               { scaleX: -1 }, // Also only here for opening, wrong direction when not included
@@ -1132,11 +1100,14 @@ export const ImageGallery = <
                             screenHeight={screenHeight}
                             selected={selectedIndex === i}
                             shouldRender={Math.abs(selectedIndex - i) < 4}
-                            style={{
-                              height: screenHeight * 8,
-                              marginRight: MARGIN,
-                              width: screenWidth * 8,
-                            }}
+                            style={[
+                              {
+                                height: screenHeight * 8,
+                                marginRight: MARGIN,
+                                width: screenWidth * 8,
+                              },
+                              slide,
+                            ]}
                             translateX={translateX}
                             translateY={translateY}
                           />
@@ -1190,7 +1161,6 @@ export const ImageGallery = <
             closeGridView={closeGridView}
             numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
             photos={gridPhotos}
-            resetVisibleValues={resetVisibleValues}
             setImage={setImage}
             {...imageGalleryCustomComponents?.grid}
           />

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -119,7 +119,6 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
   ImageGalleryGridImageComponents<StreamChatGenerics> & {
     closeGridView: () => void;
     photos: Photo<StreamChatGenerics>[];
-    resetVisibleValues: () => void;
     setImage: React.Dispatch<
       React.SetStateAction<
         | {
@@ -143,7 +142,6 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     photos,
-    resetVisibleValues,
     setImage,
   } = props;
 
@@ -162,7 +160,6 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     selectAndClose: () => {
-      resetVisibleValues();
       setImage({ messageId: photo.messageId, url: photo.uri });
       closeGridView();
     },

package/src/components/MessageList/MessageList.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   FlatListProps,
   FlatList as FlatListType,
+  Platform,
   ScrollViewProps,
   StyleSheet,
   View,
@@ -389,6 +390,22 @@ const MessageListWithContext = <
    */
   const onViewableItemsChanged = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
+      /**
+       * When a new message comes in, list scrolls down to the bottom automatically (using prop `maintainVisibleContentPosition`)
+       * and we mark the channel as read from handleScroll function.
+       * Although this logic is dependent on the fact that `onScroll` event gets triggered during this process.
+       * But for Android, this event is not triggered when messages length is lesser than visible screen height.
+       *
+       * And thus we need to check if the message list length is lesser than visible screen height and mark the channel as read.
+       */
+      if (
+        Platform.OS === 'android' &&
+        viewableItems?.length &&
+        viewableItems?.length >= messageListLengthBeforeUpdate.current
+      ) {
+        channel.markRead();
+      }
+
       if (viewableItems && !hideStickyDateHeader) {
         updateStickyHeaderDateIfNeeded(viewableItems);
       }
@@ -448,7 +465,6 @@ const MessageListWithContext = <
       if (!client || !channel || messageList.length === 0) {
         return;
       }
-
       if (
         (hasNewMessage && isMyMessage) ||
         messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current ||

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -89,7 +89,6 @@ export type MessageOverlayPropsWithContext<
   | 'OverlayReactionList'
   | 'OverlayReactions'
   | 'OverlayReactionsAvatar'
-  | 'reset'
 > &
   Omit<MessageOverlayData<StreamChatGenerics>, 'supportedReactions'> &
   Pick<OverlayContextValue, 'overlay' | 'setOverlay'> &
@@ -104,7 +103,6 @@ export type MessageOverlayPropsWithContext<
     | 'overlayOpacity'
   > & {
     showScreen?: Animated.SharedValue<number>;
-    visible?: boolean;
   };
 
 const MessageOverlayWithContext = <
@@ -135,10 +133,8 @@ const MessageOverlayWithContext = <
     OverlayReactionList = OverlayReactionListDefault,
     OverlayReactions = DefaultOverlayReactions,
     OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
-    reset,
     setOverlay,
     threadList,
-    visible,
     isMyMessage,
     messageReactions,
     error,
@@ -192,42 +188,26 @@ const MessageOverlayWithContext = <
   const scale = useSharedValue(1);
 
   const showScreen = useSharedValue(0);
-  const fadeScreen = (show: boolean) => {
+  const fadeScreen = () => {
     'worklet';
-    if (show) {
-      offsetY.value = 0;
-      translateY.value = 0;
-      scale.value = 1;
-    }
-    showScreen.value = show
-      ? withSpring(1, {
-          damping: 600,
-          mass: 0.5,
-          restDisplacementThreshold: 0.01,
-          restSpeedThreshold: 0.01,
-          stiffness: 200,
-          velocity: 32,
-        })
-      : withTiming(
-          0,
-          {
-            duration: 150,
-            easing: Easing.out(Easing.ease),
-          },
-          () => {
-            if (!show) {
-              runOnJS(reset)();
-            }
-          },
-        );
+
+    offsetY.value = 0;
+    translateY.value = 0;
+    scale.value = 1;
+    showScreen.value = withSpring(1, {
+      damping: 600,
+      mass: 0.5,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01,
+      stiffness: 200,
+      velocity: 32,
+    });
   };
 
   useEffect(() => {
-    if (visible) {
-      Keyboard.dismiss();
-    }
-    fadeScreen(!!visible);
-  }, [visible]);
+    Keyboard.dismiss();
+    fadeScreen();
+  }, []);
 
   const onPan = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
     onActive: (evt) => {
@@ -324,7 +304,7 @@ const MessageOverlayWithContext = <
       <MessageProvider value={messageContext}>
         <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
           <Animated.View
-            pointerEvents={visible ? 'auto' : 'none'}
+            pointerEvents={'auto'}
             style={[StyleSheet.absoluteFillObject, containerStyle]}
           >
             <PanGestureHandler
@@ -542,18 +522,13 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     alignment: prevAlignment,
     message: prevMessage,
     messageReactionTitle: prevMessageReactionTitle,
-    visible: prevVisible,
   } = prevProps;
   const {
     alignment: nextAlignment,
     message: nextMessage,
     messageReactionTitle: nextMessageReactionTitle,
-    visible: nextVisible,
   } = nextProps;
 
-  const visibleEqual = prevVisible === nextVisible;
-  if (!visibleEqual) return false;
-
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
 
@@ -601,7 +576,6 @@ export const MessageOverlay = <
     OverlayReactionList,
     OverlayReactions,
     OverlayReactionsAvatar,
-    reset,
   } = useMessageOverlayContext<StreamChatGenerics>();
   const { overlay, setOverlay } = useOverlayContext();
 
@@ -618,7 +592,6 @@ export const MessageOverlay = <
     <MemoizedMessageOverlay
       {...{
         overlay,
-        reset,
         setOverlay,
       }}
       {...componentProps}

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -218,7 +218,6 @@ export const OverlayProvider = <
                     OverlayReactionList={OverlayReactionList}
                     OverlayReactions={OverlayReactions}
                     OverlayReactionsAvatar={OverlayReactionsAvatar}
-                    visible={overlay === 'message'}
                   />
                 )}
                 {overlay === 'gallery' && (
@@ -228,7 +227,6 @@ export const OverlayProvider = <
                     imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
                     numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
                     overlayOpacity={overlayOpacity}
-                    visible={overlay === 'gallery'}
                   />
                 )}
                 <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />

package/src/contexts/themeContext/utils/theme.ts

@@ -195,6 +195,8 @@ export type Theme = {
       usernameText: TextStyle;
     };
     backgroundColor?: string;
+    pager?: ViewStyle;
+    slide?: ImageStyle;
   };
   inlineDateSeparator: {
     container: ViewStyle;