optimistic UI

README.md

@@ -88,6 +88,8 @@ These packages help make the ui-kit smooth and functioning
 [react-native-autolink](https://www.npmjs.com/package/react-native-autolink)</br>
 [react-native-screens](https://www.npmjs.com/package/react-native-screens)</br>
 [emoji-mart-native](https://www.npmjs.com/package/emoji-mart-native)</br>
+[react-native-keep-awake](https://www.npmjs.com/package/react-native-keep-awake)</br>
+
 <br/>
 
 ## 2. Configure CometChat inside your app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cometchat-pro-react-native-ui-kit",
-  "version": "2.3.0-1",
+  "version": "2.3.0-2",
   "description": "Chat UI Kit for React Native App",
   "main": "./src/index.js",
   "scripts": {
@@ -12,6 +12,7 @@
     "url": "git@git.geekyants.com:cometchat/react-native.git"
   },
   "peerDependencies": {
+    "react-native-keep-awake": "^4.0.0",
     "@react-native-community/async-storage": "^1.12.1",
     "react-native-sound": "^0.11.0",
     "react-native-vector-icons": "^7.1.0",

src/components/Calls/CometChatIncomingDirectCall/controller.js

@@ -10,7 +10,9 @@ export class messageAlertManager {
       this.msgListenerId,
       new CometChat.MessageListener({
         onCustomMessageReceived: (customMessage) => {
-          callback(enums.CUSTOM_MESSAGE_RECEIVED, customMessage);
+          if (customMessage.type == enums.CUSTOM_TYPE_MEETING) {
+            callback(enums.CUSTOM_MESSAGE_RECEIVED, customMessage);
+          }
         },
       }),
     );

src/components/Calls/CometChatOutgoingCall/index.js

@@ -4,7 +4,7 @@ import { Text, View, Modal, TouchableOpacity } from 'react-native';
 import { CometChat } from '@cometchat-pro/react-native-chat';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Sound from 'react-native-sound';
-
+import KeepAwake from 'react-native-keep-awake';
 import { outgoingCallAlert } from '../../../resources/audio';
 import { CometChatManager } from '../../../utils/controller';
 import { CallScreenManager } from './controller';
@@ -361,6 +361,7 @@ class CometChatOutgoingCall extends React.PureComponent {
       return (
         <Modal animated animationType="fade">
           <View style={{ height: '100%', width: '100%', position: 'relative' }}>
+            <KeepAwake />
             <CometChat.CallingComponent
               callsettings={this.state.callSettings}
             />

src/components/Calls/CometChatOutgoingDirectCall/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, View, Modal, TouchableOpacity } from 'react-native';
 import { CometChat } from '@cometchat-pro/react-native-chat';
 import * as actions from '../../../utils/actions';
-
+import KeepAwake from 'react-native-keep-awake';
 import * as enums from '../../../utils/enums';
 import { theme } from '../../../resources/theme';
 
@@ -117,6 +117,7 @@ class CometChatOutgoingDirectCall extends React.Component {
     return (
       <Modal animated animationType="fade">
         <View style={{ height: '100%', width: '100%', position: 'relative' }}>
+          <KeepAwake />
           {this.state.callSettings ? (
             <CometChat.CallingComponent
               callsettings={this.state.callSettings}

src/components/Chats/CometChatConversationList/index.js

@@ -858,6 +858,7 @@ class CometChatConversationList extends React.Component {
           <View style={styles.headerContainer}></View>
           {this.listHeaderComponent()}
           <FlatList
+            contentContainerStyle={styles.flexGrow1}
             data={this.state.conversationList}
             renderItem={({ item }) => {
               return (
@@ -872,7 +873,6 @@ class CometChatConversationList extends React.Component {
               );
             }}
             ListEmptyComponent={this.listEmptyContainer}
-            ItemSeparatorComponent={this.itemSeparatorComponent}
             onScroll={this.handleScroll}
             onEndReached={this.endReached}
             onEndReachedThreshold={0.3}

src/components/Chats/CometChatConversationList/styles.js

@@ -12,7 +12,7 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   conversationHeaderStyle: {
-    paddingBottom: 12 * heightRatio,
+    paddingBottom: 32,
     position: 'relative',
     paddingHorizontal: 22 * widthRatio,
   },
@@ -34,7 +34,7 @@ export default StyleSheet.create({
   },
   contactMsgStyle: {
     overflow: 'hidden',
-    width: '100%',
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -52,8 +52,9 @@ export default StyleSheet.create({
   },
   headerContainer: {
     alignItems: 'center',
-    height: 32 * heightRatio,
+    height: 48,
     width: '100%',
     justifyContent: 'center',
   },
+  flexGrow1: { flexGrow: 1 },
 });

src/components/Chats/CometChatConversationListItem/index.js

@@ -157,7 +157,7 @@ class CometChatConversationListItem extends React.Component {
           let time = timestamp.split(':'); // convert to array
 
           var hours = Number(time[0]);
-          var minutes = Number(time[1]);
+          var minutes = Number(time[1]?.split(' ')[0]);
           var timeValue;
 
           if (hours > 0 && hours <= 12) {
@@ -175,8 +175,10 @@ class CometChatConversationListItem extends React.Component {
       } else if (diffTimestamp < 48 * 60 * 60 * 1000) {
         timestamp = 'Yesterday';
       } else if (diffTimestamp < 7 * 24 * 60 * 60 * 1000) {
-        timestamp = messageTimestamp.toLocaleString('en-US', {
-          weekday: 'long',
+        timestamp = messageTimestamp.toLocaleDateString('en-US', {
+          year: '2-digit',
+          month: '2-digit',
+          day: '2-digit',
         });
       } else {
         timestamp = messageTimestamp.toLocaleDateString('en-US', {
@@ -311,19 +313,21 @@ class CometChatConversationListItem extends React.Component {
     }
 
     let presence;
+
     if (this.props.conversation.conversationType === 'user') {
       const { status } = this.props.conversation.conversationWith;
       presence = (
         <CometChatUserPresence
           status={status}
+          style={{ top: 30 }}
           cornerRadius={18}
-          borderColor={this.props.theme.color.darkSecondary}
-          borderWidth={1}
+          borderColor={this.props.theme.color.white}
+          borderWidth={2}
         />
       );
     }
     return (
-      <View>
+      <View key={this.props?.conversation?.conversationId}>
         <TouchableOpacity
           underlayColor={this.props.theme.backgroundColor.listUnderlayColor}
           style={styles.listItem}
@@ -348,18 +352,30 @@ class CometChatConversationListItem extends React.Component {
               styles.itemDetailsContainer,
               { borderBottomColor: this.props.theme.borderColor.primary },
             ]}>
-            <View style={styles.itemMsgStyle}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                width: '100%',
+                alignItems: 'center',
+              }}>
               <Text numberOfLines={1} style={styles.itemNameStyle}>
                 {this.props.conversation.conversationWith.name}
               </Text>
-              <Text numberOfLines={1} style={styles.itemLastMsgTimeStyle}>
-                {this.state.lastMessage}
-              </Text>
-            </View>
-            <View style={styles.itemRowStyle}>
               <View style={styles.itemLastMsgStyle}>
                 {lastMessageTimeStamp}
               </View>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                width: '100%',
+                alignItems: 'center',
+              }}>
+              <Text numberOfLines={1} style={styles.itemLastMsgTimeStyle}>
+                {this.state.lastMessage}
+              </Text>
               <CometChatBadgeCount
                 theme={this.props.theme}
                 count={this.props.conversation.unreadMessageCount}

src/components/Chats/CometChatConversationListItem/styles.js

@@ -1,13 +1,16 @@
 import { StyleSheet } from 'react-native';
 import { widthRatio } from '../../../utils/consts';
+import theme from '../../../resources/theme';
 
 export default StyleSheet.create({
   listItem: {
     flexDirection: 'row',
     alignItems: 'center',
     width: '100%',
-    maxHeight: 62,
-    paddingHorizontal: 20,
+    maxHeight: 64,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+    marginBottom: 8,
   },
   avatarStyle: {
     flexWrap: 'wrap',
@@ -16,29 +19,34 @@ export default StyleSheet.create({
     height: 44,
     marginRight: 15 * widthRatio,
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: 0.5,
   },
   itemDetailsContainer: {
-    height: '100%',
-    borderBottomWidth: 0.5,
+    borderBottomWidth: 1,
     flex: 1,
-    paddingBottom: 15,
-    paddingTop: 15,
-    paddingHorizontal: 10,
-    justifyContent: 'space-between',
+    height: '100%',
+    marginLeft: 10,
+    justifyContent: 'center',
     alignItems: 'center',
-    flexDirection: 'row',
+    alignSelf: 'flex-end',
+    paddingBottom: 10,
+    color: theme.color.primary,
+    // flexDirection: 'row',
   },
   itemLastMsgTimeStyle: {
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: '200',
     maxWidth: '100%',
     marginLeft: 2,
+    color: theme.color.helpText,
   },
   itemNameStyle: {
-    fontSize: 18,
-    fontWeight: '600',
-    width: '100%',
+    fontSize: 16,
+    fontWeight: '500',
+    width: '60%',
+    color: theme.color.primary,
+    marginBottom: 2,
+    marginTop: 8,
   },
   itemMsgStyle: {
     width: '80%',
@@ -48,13 +56,14 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   itemLastMsgStyle: {
-    marginBottom: 2,
+    width: '40%',
+    alignItems: 'flex-end',
   },
   itemThumbnailStyle: {
     flexWrap: 'wrap',
     flexDirection: 'row',
-    width: 44,
-    height: 44,
+    width: 40,
+    height: 40,
     backgroundColor: 'rgba(51,153,255,0.25)',
     borderRadius: 25,
   },

src/components/Chats/CometChatConversationListWithMessages/index.js

@@ -175,9 +175,6 @@ class CometChatConversationListWithMessages extends React.Component {
       case actions.MESSAGE_DELETED:
         this.updateLastMessage(item[0]);
         break;
-      case actions.MESSAGE_COMPOSED:
-        this.callInitiated(item);
-        break;
       case actions.JOIN_DIRECT_CALL:
         this.setState({ joinDirectCall: true }, () => {
           this.videoCall(true);
@@ -230,20 +227,10 @@ class CometChatConversationListWithMessages extends React.Component {
       const usersList = [this.state.item.uid];
       CometChatManager.blockUsers(usersList)
         .then((response) => {
-          if (response) {
-            this.setState({ item: { ...this.state.item, blockedByMe: true } });
-            this.dropDownAlertRef?.showMessage('success', 'Blocked user');
-          } else {
-            this.dropDownAlertRef?.showMessage(
-              'error',
-              'Failed to blocked user',
-            );
-          }
+          this.setState({ item: { ...this.state.item, blockedByMe: true } });
         })
         .catch((error) => {
           logger('Blocking user fails with error', error);
-          const errorCode = error?.message || 'ERROR';
-          this.dropDownAlertRef?.showMessage('error', errorCode);
         });
     } catch (error) {
       logger(error);

src/components/CometChatUI/index.js

@@ -23,14 +23,14 @@ export default () => {
 
           if (route.name === 'Chats') {
             return (
-              <MCIIcons name="chat" size={24 * heightRatio} color={color} />
+              <MCIIcons name="chat" size={25 * heightRatio} color={color} />
             );
           }
           if (route.name === 'More') {
             return (
               <MaterialIcons
                 name="more-horiz"
-                size={24 * heightRatio}
+                size={25 * heightRatio}
                 color={color}
               />
             );
@@ -52,7 +52,7 @@ export default () => {
         inactiveTintColor: 'rgba(0,0,0,0.5)',
         activeBackgroundColor: theme.color.white,
         inactiveBackgroundColor: theme.color.white,
-        labelStyle: { fontSize: 8 * heightRatio },
+        labelStyle: { fontSize: 12 },
       }}>
       <Tab.Screen
         name="Chats"