Merge pull request #20 from cometchat-pro/v2.3.0-2

optimistic UI

Author: TirathBhuva

CometChatWorkspace/cometchat-app/android/app/build.gradle

@@ -92,7 +92,7 @@ apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  * Upload all the APKs to the Play Store and people will download
  * the correct one based on the CPU architecture of their device.
  */
-def enableSeparateBuildPerCPUArchitecture = false
+def enableSeparateBuildPerCPUArchitecture = true
 
 /**
  * Run Proguard to shrink the Java bytecode in release builds.

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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": "[email protected]: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",

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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);
+          }
         },
       }),
     );

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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}
             />

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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}

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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}

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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 },
 });

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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}

CometChatWorkspace/cometchat-app/cometchat-pro-react-native-ui-kit/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,
   },