v4.3.23

Author: mathews-cometchat

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react-native",
-  "version": "4.3.22",
+  "version": "4.3.23",
   "description": "Ready-to-use Chat UI Components for React Native",
   "main": "src/index",
   "module": "src/index",

src/CometChatMessageHeader/CometChatMessageHeader.tsx

@@ -9,7 +9,13 @@ import {
   ViewProps,
   //@ts-ignore
 } from 'react-native';
-import React, { useEffect, useState, useRef, useContext } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useContext,
+  useCallback,
+} from 'react';
 import { AvatarStyle, CometChatContext, CometChatListItem } from '../shared';
 import { localize } from '../shared';
 import { ICONS } from './resources';
@@ -400,6 +406,17 @@ export const CometChatMessageHeader = (
     };
   }, []);
 
+  const AppBarOptionsView = useCallback(() => {
+    if (AppBarOptions) {
+      return (
+        <AppBarOptions
+          {...(user ? { user } : groupObj ? { group: groupObj } : {})}
+        />
+      );
+    }
+    return null;
+  }, [user?.getUid(), groupObj?.getGuid()]);
+
   return (
     <View
       style={
@@ -498,19 +515,7 @@ export const CometChatMessageHeader = (
                   : null
                 : null
             }
-            TailView={
-              AppBarOptions
-                ? () => (
-                    <AppBarOptions
-                      {...(user
-                        ? { user }
-                        : groupObj
-                        ? { group: groupObj }
-                        : {})}
-                    />
-                  )
-                : null
-            }
+            TailView={AppBarOptionsView}
             headViewContainerStyle={headViewContainerStyle}
             tailViewContainerStyle={tailViewContainerStyle}
             avatarStyle={_avatarStyle}

src/calls/CometChatIncomingCall/CometChatIncomingCall.tsx

@@ -2,7 +2,8 @@ import React, { useState, useContext, useEffect, useRef } from 'react';
 import {
   View,
   Text,
-  TextStyle
+  TextStyle,
+  Modal
 } from 'react-native';
 //@ts-ignore
 import { CometChat } from '@cometchat/chat-sdk-react-native';
@@ -214,7 +215,14 @@ export const CometChatIncomingCall = (props: CometChatIncomingCallInterface) =>
   }, []);
 
   return (
-    <>
+    <Modal
+          transparent
+          animated
+          animationType="fade"
+          onRequestClose={() => {
+            return;
+          }}
+        >
       {
         showCallScreen ?
           <CometChatOngoingCall
@@ -277,6 +285,6 @@ export const CometChatIncomingCall = (props: CometChatIncomingCallInterface) =>
             }}
           />
       }
-    </>
+    </Modal>
   )
 };

src/calls/CometChatOutgoingCall/CometChatOutgoingCall.tsx

@@ -221,7 +221,12 @@ export const CometChatOutgoingCall = (props: CometChatOutgoingCallInterface) =>
       transparent
       animated
       animationType="fade"
-      onRequestClose={() => onDeclineButtonPressed && onDeclineButtonPressed(call as CometChat.Call)}
+      onRequestClose={() => {
+        if (isCallConnected) {
+          return;
+        }
+        onDeclineButtonPressed && onDeclineButtonPressed(call as CometChat.Call)
+      }}
     >
       <SafeAreaView>
         {

src/shared/views/CometChatListItem/CometChatListItem.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 import {
   View,
@@ -194,13 +194,13 @@ export const CometChatListItem = (props: CometChatListItemInterface) => {
   /**
    * Component to be display the Tail section
    */
-  const TailViewFc = () => {
+  const TailViewFc = useCallback(() => {
     return (
       <View style={[Style.tailViewStyle, tailViewContainerStyle ?? {}]}>
         {Boolean(TailView) && typeof TailView === 'function' && <TailView />}
       </View>
     );
-  };
+  }, [tailViewContainerStyle, tailViewContainerStyle, TailView]);
 
   /**
    * Component to be display the Options in list after swipe