diff --git a/README.md b/README.md index 21f253d..adb743a 100644 --- a/README.md +++ b/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)
[react-native-screens](https://www.npmjs.com/package/react-native-screens)
[emoji-mart-native](https://www.npmjs.com/package/emoji-mart-native)
+[react-native-keep-awake](https://www.npmjs.com/package/react-native-keep-awake)
+
## 2. Configure CometChat inside your app diff --git a/package.json b/package.json index 433a409..b10e1c9 100644 --- a/package.json +++ b/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", diff --git a/src/components/Calls/CometChatIncomingDirectCall/controller.js b/src/components/Calls/CometChatIncomingDirectCall/controller.js index f0ed5f6..2aa492d 100644 --- a/src/components/Calls/CometChatIncomingDirectCall/controller.js +++ b/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); + } }, }), ); diff --git a/src/components/Calls/CometChatOutgoingCall/index.js b/src/components/Calls/CometChatOutgoingCall/index.js index 7566933..d6f7e6d 100644 --- a/src/components/Calls/CometChatOutgoingCall/index.js +++ b/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 ( + diff --git a/src/components/Calls/CometChatOutgoingDirectCall/index.js b/src/components/Calls/CometChatOutgoingDirectCall/index.js index e6700cf..62b1d8a 100644 --- a/src/components/Calls/CometChatOutgoingDirectCall/index.js +++ b/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 ( + {this.state.callSettings ? ( {this.listHeaderComponent()} { 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} diff --git a/src/components/Chats/CometChatConversationList/styles.js b/src/components/Chats/CometChatConversationList/styles.js index 11fcb5d..96125c1 100644 --- a/src/components/Chats/CometChatConversationList/styles.js +++ b/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 }, }); diff --git a/src/components/Chats/CometChatConversationListItem/index.js b/src/components/Chats/CometChatConversationListItem/index.js index ee72c24..2fd13cf 100644 --- a/src/components/Chats/CometChatConversationListItem/index.js +++ b/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 = ( ); } return ( - + - + {this.props.conversation.conversationWith.name} - - {this.state.lastMessage} - - - {lastMessageTimeStamp} + + + + {this.state.lastMessage} + { 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); diff --git a/src/components/CometChatUI/index.js b/src/components/CometChatUI/index.js index 2e234f7..f701e53 100644 --- a/src/components/CometChatUI/index.js +++ b/src/components/CometChatUI/index.js @@ -23,14 +23,14 @@ export default () => { if (route.name === 'Chats') { return ( - + ); } if (route.name === 'More') { return ( ); @@ -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 }, }}> { - if (leadingItem.header) { - return null; - } return ( - - { - return ( - - - - - Add Members - - - { - this.sheetRef.current.snapTo(1); - this.props.close(); - }} - style={{}}> - - Close - - + { + return ( + + + + + Add Members + - this.textInputRef.current.focus()}> - - - { - this.setState({ textInputFocused: true }); - }} - onBlur={() => { - this.setState({ textInputFocused: false }); - }} - clearButtonMode="always" - numberOfLines={1} - style={[ - style.contactSearchInputStyle, - { - color: `${this.theme.color.primary}`, - }, - ]} - /> - - - { - const chr = item.name[0].toUpperCase(); - let firstLetter = null; - if (chr !== currentLetter) { - currentLetter = chr; - firstLetter = currentLetter; - } - - return ( - - - - ); - }} - ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} - onScroll={this.handleScroll} - onEndReached={this.endReached} - onEndReachedThreshold={0.3} - showsVerticalScrollIndicator={false} - /> { + this.sheetRef.current.snapTo(1); + this.props.close(); + }} + style={{}}> + + Close + + + + this.textInputRef.current.focus()}> + - + + { + this.setState({ textInputFocused: true }); + }} + onBlur={() => { + this.setState({ textInputFocused: false }); + }} + clearButtonMode="always" + numberOfLines={1} style={[ - style.addBtnTxtStyle, + style.contactSearchInputStyle, { - color: `${this.theme.color.white}`, + color: `${this.theme.color.primary}`, }, - ]}> - Add - - - - ); - }} - onCloseEnd={() => { - this.props.close(); - }} - /> - + ]} + /> + + + { + const chr = item.name[0].toUpperCase(); + let firstLetter = null; + if (chr !== currentLetter) { + currentLetter = chr; + firstLetter = currentLetter; + } + + return ( + + + + ); + }} + ListEmptyComponent={this.listEmptyContainer} + ItemSeparatorComponent={this.itemSeparatorComponent} + onScroll={this.handleScroll} + onEndReached={this.endReached} + onEndReachedThreshold={0.3} + showsVerticalScrollIndicator={false} + /> + + + Add + + + + ); + }} + onCloseEnd={() => { + this.props.close(); + }} + /> (this.dropDownAlertRef = ref)} /> diff --git a/src/components/Groups/CometChatAddGroupMemberList/styles.js b/src/components/Groups/CometChatAddGroupMemberList/styles.js index 5bfdf24..d56e941 100644 --- a/src/components/Groups/CometChatAddGroupMemberList/styles.js +++ b/src/components/Groups/CometChatAddGroupMemberList/styles.js @@ -50,8 +50,8 @@ export default StyleSheet.create({ contactSearchInputStyle: { flex: 1, paddingVertical: 4, - marginHorizontal: 8, - fontSize: 15, + marginHorizontal: 10, + fontSize: 14, }, contactMsgStyle: { overflow: 'hidden', @@ -99,10 +99,12 @@ export default StyleSheet.create({ borderRadius: 10, padding: 10, paddingHorizontal: 15, + width: '40%', + alignItems: 'center', alignSelf: 'center', }, addBtnTxtStyle: { - fontSize: 14, + fontSize: 16, fontWeight: '500', }, }); diff --git a/src/components/Groups/CometChatAddGroupMemberListItem/index.js b/src/components/Groups/CometChatAddGroupMemberListItem/index.js index 8df3dad..e30b865 100644 --- a/src/components/Groups/CometChatAddGroupMemberListItem/index.js +++ b/src/components/Groups/CometChatAddGroupMemberListItem/index.js @@ -10,7 +10,9 @@ const CometChatAddGroupMemberListItem = (props) => { const viewTheme = { ...theme, ...props.theme }; const [checked, setChecked] = useState(() => { - const found = props.members.find((member) => member.uid === props.user.uid); + const found = props.membersToAdd.find( + (member) => member.uid === props.user.uid, + ); const value = !!found; return value; @@ -43,7 +45,7 @@ const CometChatAddGroupMemberListItem = (props) => { status={props.user.status} cornerRadius={18} borderColor={viewTheme.color.darkSecondary} - borderWidth={1} + borderWidth={2} /> diff --git a/src/components/Groups/CometChatAddGroupMemberListItem/styles.js b/src/components/Groups/CometChatAddGroupMemberListItem/styles.js index 738b845..871bd5d 100644 --- a/src/components/Groups/CometChatAddGroupMemberListItem/styles.js +++ b/src/components/Groups/CometChatAddGroupMemberListItem/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ nameStyle: { flexDirection: 'row', @@ -8,7 +8,7 @@ export default StyleSheet.create({ width: '50%', marginRight: 15, }, - userName: { fontSize: 14 }, + userName: { fontSize: 16, color: theme.color.primary }, rowStyle: { flexDirection: 'row', alignItems: 'center', @@ -17,13 +17,14 @@ export default StyleSheet.create({ paddingRight: 20 * widthRatio, justifyContent: 'space-between', width: '100%', + height: 64, fontSize: 14, }, avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, borderRadius: 22, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 15 * widthRatio, diff --git a/src/components/Groups/CometChatBanGroupMemberListItem/index.js b/src/components/Groups/CometChatBanGroupMemberListItem/index.js index 5012b6b..5b2db6f 100644 --- a/src/components/Groups/CometChatBanGroupMemberListItem/index.js +++ b/src/components/Groups/CometChatBanGroupMemberListItem/index.js @@ -50,11 +50,13 @@ export default (props) => { - + {name} diff --git a/src/components/Groups/CometChatBanGroupMemberListItem/styles.js b/src/components/Groups/CometChatBanGroupMemberListItem/styles.js index 02d322d..73febf4 100644 --- a/src/components/Groups/CometChatBanGroupMemberListItem/styles.js +++ b/src/components/Groups/CometChatBanGroupMemberListItem/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ nameStyle: { flexDirection: 'row', @@ -10,10 +10,15 @@ export default StyleSheet.create({ }, roleStyle: { width: '30%', - fontSize: 13, + fontSize: 16, + color: theme.color.helpText, }, - imageContainer: { alignItems: 'center', justifyContent: 'center' }, - unbanText: { fontSize: 10, textAlign: 'center' }, + imageContainer: { + alignItems: 'center', + justifyContent: 'center', + opacity: 0.6, + }, + unbanText: { fontSize: 12, textAlign: 'center', color: theme.color.primary }, rowStyle: { flexDirection: 'row', paddingVertical: 7 * heightRatio, @@ -27,8 +32,8 @@ export default StyleSheet.create({ avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, borderRadius: 22, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 6 * widthRatio, diff --git a/src/components/Groups/CometChatGroupDetails/index.js b/src/components/Groups/CometChatGroupDetails/index.js index 9c91704..ab3257c 100644 --- a/src/components/Groups/CometChatGroupDetails/index.js +++ b/src/components/Groups/CometChatGroupDetails/index.js @@ -631,21 +631,23 @@ export default class CometChatGroupDetails extends React.Component { ); } - - let leaveGroupBtn = ( - { - this.leaveGroup(); - }}> - - Leave group - - - ); + let leaveGroupBtn = null; + if (this.props.item.scope !== CometChat.GROUP_MEMBER_SCOPE.ADMIN) { + leaveGroupBtn = ( + { + this.leaveGroup(); + }}> + + Leave group + + + ); + } let sharedMediaView = ( - - Members - + Members {viewMembersBtn} {addMembersBtn} @@ -680,10 +676,7 @@ export default class CometChatGroupDetails extends React.Component { let options = ( + style={[style.sectionHeaderStyle, { color: theme.color.helpText }]}> Options diff --git a/src/components/Groups/CometChatGroupDetails/styles.js b/src/components/Groups/CometChatGroupDetails/styles.js index cfaee67..bb2e188 100644 --- a/src/components/Groups/CometChatGroupDetails/styles.js +++ b/src/components/Groups/CometChatGroupDetails/styles.js @@ -1,12 +1,14 @@ import { Dimensions, StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ container: { flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }, itemLinkStyle: { - fontSize: 15, + fontSize: 16, lineHeight: 20, fontWeight: '600', + marginVertical: 4, + color: theme.color.primary, }, fullWidth: { width: '100%' }, listItemContainer: { width: '100%', marginVertical: 6 }, @@ -17,6 +19,7 @@ export default StyleSheet.create({ fontWeight: '500', lineHeight: 20, textTransform: 'uppercase', + color: theme.color.helpText, }, headerStyle: { flexDirection: 'row', diff --git a/src/components/Groups/CometChatGroupList/index.js b/src/components/Groups/CometChatGroupList/index.js index e2415d9..f9d391d 100644 --- a/src/components/Groups/CometChatGroupList/index.js +++ b/src/components/Groups/CometChatGroupList/index.js @@ -357,12 +357,15 @@ class CometChatGroupList extends React.Component { CometChat.joinGroup(this.state.guid, this.state.groupType, passcode) .then((response) => { if (typeof response === 'object') { - this.dropDownAlertRef?.showMessage( + this.dropDownAlertModelRef?.showMessage( 'success', 'Group joined Successfully', ); } else { - this.dropDownAlertRef?.showMessage('error', 'Failed to join group'); + this.dropDownAlertModelRef?.showMessage( + 'error', + 'Failed to join group', + ); return; } const groups = [...this.state.grouplist]; @@ -382,9 +385,7 @@ class CometChatGroupList extends React.Component { }) .catch((error) => { const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); - - if (error.code === 'ERR_WRONG_GROUP_PASS') Alert.alert(error.message); + this.dropDownAlertModelRef?.showMessage('error', errorCode); }); } }; @@ -673,11 +674,7 @@ class CometChatGroupList extends React.Component { backgroundColor: `${this.theme.backgroundColor.grey}`, }, ]}> - + + (this.dropDownAlertModelRef = ref)} /> ); } @@ -835,6 +833,7 @@ class CometChatGroupList extends React.Component { {this.ListHeaderComponent()} { return ( @@ -847,7 +846,6 @@ class CometChatGroupList extends React.Component { ); }} ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} onScroll={this.handleScroll} onEndReached={this.endReached} onEndReachedThreshold={0.3} diff --git a/src/components/Groups/CometChatGroupList/styles.js b/src/components/Groups/CometChatGroupList/styles.js index 4c25ba0..73d4f5e 100644 --- a/src/components/Groups/CometChatGroupList/styles.js +++ b/src/components/Groups/CometChatGroupList/styles.js @@ -12,9 +12,9 @@ export default StyleSheet.create({ alignItems: 'center', }, groupHeaderStyle: { - paddingBottom: 12 * heightRatio, + paddingBottom: 16, position: 'relative', - paddingHorizontal: 22 * widthRatio, + paddingHorizontal: 16, }, contactHeaderCloseStyle: { height: 24, @@ -27,14 +27,14 @@ export default StyleSheet.create({ fontSize: 28, }, groupSearchStyle: { - padding: 4 * heightRatio, - marginTop: 10 * heightRatio, + padding: 8, + marginTop: 16, flexDirection: 'row', position: 'relative', alignItems: 'center', width: '100%', borderWidth: 0, - borderRadius: 8, + borderRadius: 10, shadowColor: '#000', shadowOffset: { width: 0, @@ -45,13 +45,13 @@ export default StyleSheet.create({ }, contactSearchInputStyle: { flex: 1, - paddingVertical: 4 * heightRatio, - marginHorizontal: 8 * widthRatio, - fontSize: 15, + paddingVertical: 4, + marginHorizontal: 2, + fontSize: 17, }, contactMsgStyle: { overflow: 'hidden', - width: '100%', + flex: 1, justifyContent: 'center', alignItems: 'center', }, @@ -69,7 +69,7 @@ export default StyleSheet.create({ }, headerContainer: { alignItems: 'center', - height: 32 * heightRatio, + height: 48, width: '100%', justifyContent: 'center', }, diff --git a/src/components/Groups/CometChatGroupListItem/styles.js b/src/components/Groups/CometChatGroupListItem/styles.js index e336cc5..4bed56f 100644 --- a/src/components/Groups/CometChatGroupListItem/styles.js +++ b/src/components/Groups/CometChatGroupListItem/styles.js @@ -1,34 +1,44 @@ import { StyleSheet } from 'react-native'; import { widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ fullFlex: { flex: 1 }, listItem: { flexDirection: 'row', - alignItems: 'center', width: '100%', - maxHeight: 62, - paddingHorizontal: 20, + maxHeight: 64, + paddingHorizontal: 16, + marginBottom: 16, }, avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, - marginRight: 15 * widthRatio, + width: 40, + height: 40, + marginRight: 10, justifyContent: 'center', backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, }, groupDetailsContainer: { - borderBottomWidth: 0.5, + borderBottomWidth: 1, flex: 1, paddingBottom: 10, - paddingTop: 10, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', }, - memberCountStyle: { fontSize: 14, fontWeight: '200', maxWidth: '80%' }, - groupNameStyle: { fontSize: 18, fontWeight: '600', maxWidth: '80%' }, + memberCountStyle: { + fontSize: 12, + fontWeight: '200', + maxWidth: '80%', + color: theme.color.helpText, + }, + + groupNameStyle: { + fontSize: 16, + fontWeight: '600', + maxWidth: '80%', + color: theme.color.primary, + }, }); diff --git a/src/components/Groups/CometChatViewGroupMemberList/index.js b/src/components/Groups/CometChatViewGroupMemberList/index.js index 977b0ef..859d354 100644 --- a/src/components/Groups/CometChatViewGroupMemberList/index.js +++ b/src/components/Groups/CometChatViewGroupMemberList/index.js @@ -273,30 +273,31 @@ export default class CometChatViewGroupMemberList extends React.Component { - { - return ( - - ); - }} - ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} - onScroll={this.handleScroll} - onEndReached={this.endReached} - onEndReachedThreshold={0.3} - contentContainerStyle={style.contentContainerStyle} - style={style.listStyle} - showsVerticalScrollIndicator={false} - /> + + { + return ( + + ); + }} + ListEmptyComponent={this.listEmptyContainer} + // ItemSeparatorComponent={this.itemSeparatorComponent} + onScroll={this.handleScroll} + onEndReached={this.endReached} + contentContainerStyle={{ flexGrow: 1 }} + onEndReachedThreshold={0.3} + showsVerticalScrollIndicator={false} + /> + ); }} diff --git a/src/components/Groups/CometChatViewGroupMemberList/styles.js b/src/components/Groups/CometChatViewGroupMemberList/styles.js index 2e4fc10..d1603bf 100644 --- a/src/components/Groups/CometChatViewGroupMemberList/styles.js +++ b/src/components/Groups/CometChatViewGroupMemberList/styles.js @@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native'; import { calc, deviceHeight } from '../../../utils/consts'; export default StyleSheet.create({ - container: { flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }, + container: { + flex: 1, + backgroundColor: 'rgba(0,0,0,0.7)', + }, reactionDetailsContainer: { backgroundColor: 'white', paddingVertical: 20, borderRadius: 20, - minHeight: deviceHeight, }, headerContainerStyle: { justifyContent: 'center', @@ -69,7 +71,7 @@ export default StyleSheet.create({ fontWeight: '600', }, contactListStyle: { - height: calc(), + height: 400, margin: 0, padding: 0, }, @@ -107,4 +109,7 @@ export default StyleSheet.create({ fontSize: 14, fontWeight: '500', }, + listContainer: { + height: deviceHeight * 0.8, + }, }); diff --git a/src/components/Groups/CometChatViewGroupMemberListItem/index.js b/src/components/Groups/CometChatViewGroupMemberListItem/index.js index cd070f2..0a7e69f 100644 --- a/src/components/Groups/CometChatViewGroupMemberListItem/index.js +++ b/src/components/Groups/CometChatViewGroupMemberListItem/index.js @@ -185,8 +185,8 @@ export default (props) => { ); diff --git a/src/components/Groups/CometChatViewGroupMemberListItem/style.js b/src/components/Groups/CometChatViewGroupMemberListItem/style.js index 933f42c..6462920 100644 --- a/src/components/Groups/CometChatViewGroupMemberListItem/style.js +++ b/src/components/Groups/CometChatViewGroupMemberListItem/style.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { deviceWidth, heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ container: { flexDirection: 'row', @@ -27,8 +27,8 @@ export default StyleSheet.create({ avatarContainer: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, borderRadius: 22, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 6 * widthRatio, @@ -41,7 +41,12 @@ export default StyleSheet.create({ marginRight: 12 * widthRatio, }, fullFlex: { flex: 1 }, - pickerItemStyle: { fontSize: 14 }, + pickerItemStyle: { + fontSize: 16, + color: theme.color.helpText, + + borderRadius: 24, + }, pickerItemDetail: { height: 20 * heightRatio }, doneContainer: { width: 30, alignItems: 'center', justifyContent: 'center' }, editText: { fontSize: 10, textAlign: 'center' }, @@ -52,9 +57,17 @@ export default StyleSheet.create({ alignItems: 'center', justifyContent: 'space-between', }, - actionText: { fontSize: 10, textAlign: 'center' }, - changeContainer: { flex: 1, flexDirection: 'row' }, + actionText: { + fontSize: 12, + textAlign: 'center', + color: theme.color.primary, + + marginHorizontal: 5, + }, + changeContainer: { flex: 1, flexDirection: 'row', opacity: 0.6 }, nameText: { width: 0.2 * deviceWidth, + fontSize: 16, + color: theme.color.primary, }, }); diff --git a/src/components/Messages/CometChatImageViewer/styles.js b/src/components/Messages/CometChatImageViewer/styles.js index 0f04070..6684ed0 100644 --- a/src/components/Messages/CometChatImageViewer/styles.js +++ b/src/components/Messages/CometChatImageViewer/styles.js @@ -22,8 +22,7 @@ export default StyleSheet.create({ }, bottomSheetContainer: { backgroundColor: 'white', - height: deviceHeight + 200 * heightRatio, - paddingBottom: 40 * heightRatio, + height: deviceHeight * 0.9, }, crossImgContainer: { alignSelf: 'flex-end', @@ -38,11 +37,10 @@ export default StyleSheet.create({ backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', - height: 450 * heightRatio, + flex: 1, }, imageStyles: { + width: '90%', height: '100%', - width: deviceWidth, - maxHeight: deviceHeight * 0.4, }, }); diff --git a/src/components/Messages/CometChatLiveReactions/index.js b/src/components/Messages/CometChatLiveReactions/index.js index 4f00cd6..f74f415 100644 --- a/src/components/Messages/CometChatLiveReactions/index.js +++ b/src/components/Messages/CometChatLiveReactions/index.js @@ -23,11 +23,11 @@ function getRandomNumber(min, max) { } class AnimatedHeart extends Component { - state = { - position: new Animated.Value(0), - }; - - componentWillMount() { + constructor(props) { + super(props); + this.state = { + position: new Animated.Value(0), + }; this._yAnimation = this.state.position.interpolate({ inputRange: [NEGATIVE_END_Y, 0], outputRange: [ANIMATION_END_Y, 0], diff --git a/src/components/Messages/CometChatMessageComposer/index.js b/src/components/Messages/CometChatMessageComposer/index.js index 0a4d67f..114cc7f 100644 --- a/src/components/Messages/CometChatMessageComposer/index.js +++ b/src/components/Messages/CometChatMessageComposer/index.js @@ -60,6 +60,12 @@ export default class CometChatMessageComposer extends React.PureComponent { }; this.audio = new Sound(outgoingMessageAlert); + CometChat.getLoggedinUser() + .then((user) => (this.loggedInUser = user)) + .catch((error) => { + const errorCode = error?.message || 'ERROR'; + this.props?.showMessage('error', errorCode); + }); } componentDidMount() { @@ -171,6 +177,7 @@ export default class CometChatMessageComposer extends React.PureComponent { this.messageSending = true; const { receiverId, receiverType } = this.getReceiverDetails(); + const conversationId = this.props.getConversationId(); const mediaMessage = new CometChat.MediaMessage( receiverId, @@ -183,17 +190,36 @@ export default class CometChatMessageComposer extends React.PureComponent { } this.endTyping(); + // mediaMessage.setSender(this.loggedInUser); + mediaMessage.setReceiver(receiverType); + mediaMessage.setConversationId(conversationId); + mediaMessage.setType(messageType); + mediaMessage._composedAt = Math.round(+new Date() / 1000); + mediaMessage._id = '_' + Math.random().toString(36).substr(2, 9); + mediaMessage.setData({ + type: messageType, + category: CometChat.CATEGORY_MESSAGE, + name: messageInput['name'], + file: messageInput, + url: messageInput['uri'], + sender: this.loggedInUser, + }); + this.props.actionGenerated(actions.MESSAGE_COMPOSED, [mediaMessage]); CometChat.sendMessage(mediaMessage) .then((response) => { this.messageSending = false; this.playAudio(); - this.props.actionGenerated(actions.MESSAGE_COMPOSED, [response]); + const newMessageObj = { ...response, _id: mediaMessage._id }; + this.props.actionGenerated('messageSent', newMessageObj); }) .catch((error) => { + const newMessageObj = { ...mediaMessage, error: error }; const errorCode = error?.message || 'ERROR'; + this.props.actionGenerated('errorSentInMessage', newMessageObj); + this.props?.showMessage('error', errorCode); this.messageSending = false; - logger('Message sending failed with error:', error); + logger('Message sending failed with error: ', error); }); } catch (error) { logger(error); @@ -225,9 +251,11 @@ export default class CometChatMessageComposer extends React.PureComponent { this.editMessage(); return false; } + this.endTyping(); const { receiverId, receiverType } = this.getReceiverDetails(); const messageInput = this.state.messageInput.trim(); + const conversationId = this.props.getConversationId(); const textMessage = new CometChat.TextMessage( receiverId, messageInput, @@ -237,17 +265,29 @@ export default class CometChatMessageComposer extends React.PureComponent { textMessage.setParentMessageId(this.props.parentMessageId); } - this.endTyping(); - + textMessage.setSender(this.loggedInUser); + textMessage.setReceiver(receiverType); + textMessage.setText(messageInput); + textMessage.setConversationId(conversationId); + textMessage._composedAt = Math.round(+new Date() / 1000); + textMessage._id = '_' + Math.random().toString(36).substr(2, 9); + this.props.actionGenerated(actions.MESSAGE_COMPOSED, [textMessage]); + this.setState({ messageInput: '', replyPreview: false }); + + this.messageInputRef.current.textContent = ''; + this.playAudio(); CometChat.sendMessage(textMessage) .then((message) => { + const newMessageObj = { ...message, _id: textMessage._id }; this.setState({ messageInput: '' }); this.messageSending = false; this.messageInputRef.current.textContent = ''; - this.playAudio(); - this.props.actionGenerated(actions.MESSAGE_COMPOSED, [message]); + // this.playAudio(); + this.props.actionGenerated('messageSent', newMessageObj); }) .catch((error) => { + const newMessageObj = { ...textMessage, error: error }; + this.props.actionGenerated('errorSentInMessage', newMessageObj); logger('Message sending failed with error:', error); const errorCode = error?.message || 'ERROR'; this.props?.showMessage('error', errorCode); @@ -403,11 +443,10 @@ export default class CometChatMessageComposer extends React.PureComponent { switch (action) { case actions.POLL_CREATED: this.toggleCreatePoll(); - - // temporary check; custom data listener working for sender too - if (this.props.type === CometChat.RECEIVER_TYPE.USER) { + if (this.props.type === enums.TYPE_USER) { this.props.actionGenerated(actions.POLL_CREATED, [message]); } + // temporary check; custom data listener working for sender too\ break; case actions.SEND_STICKER: @@ -435,7 +474,7 @@ export default class CometChatMessageComposer extends React.PureComponent { sticker_name: stickerMessage.stickerName, }; const customType = enums.CUSTOM_TYPE_STICKER; - + const conversationId = this.props.getConversationId(); const customMessage = new CometChat.CustomMessage( receiverId, receiverType, @@ -445,14 +484,26 @@ export default class CometChatMessageComposer extends React.PureComponent { if (this.props.parentMessageId) { customMessage.setParentMessageId(this.props.parentMessageId); } + customMessage.setConversationId(conversationId); + customMessage.setSender(this.loggedInUser); + customMessage.setReceiver(receiverType); + customMessage.setConversationId(conversationId); + customMessage._composedAt = Math.round(+new Date() / 1000); + customMessage._id = '_' + Math.random().toString(36).substr(2, 9); + this.props.actionGenerated(actions.MESSAGE_COMPOSED, [customMessage]); CometChat.sendCustomMessage(customMessage) .then((message) => { this.messageSending = false; this.playAudio(); - this.props.actionGenerated(actions.MESSAGE_COMPOSED, [message]); + const newMessageObj = { ...message, _id: customMessage._id }; + + this.props.actionGenerated('messageSent', newMessageObj); }) .catch((error) => { + const newMessageObj = { ...customMessage, error: error }; + this.props.actionGenerated('errorSentInMessage', newMessageObj); const errorCode = error?.message || 'ERROR'; + this.props?.showMessage('error', errorCode); this.messageSending = false; logger('custom message sending failed with error', error); @@ -702,8 +753,12 @@ export default class CometChatMessageComposer extends React.PureComponent { {blockedPreview} {editPreview} diff --git a/src/components/Messages/CometChatMessageComposer/styles.js b/src/components/Messages/CometChatMessageComposer/styles.js index f221372..c95bfbf 100644 --- a/src/components/Messages/CometChatMessageComposer/styles.js +++ b/src/components/Messages/CometChatMessageComposer/styles.js @@ -36,11 +36,12 @@ export default StyleSheet.create({ }, messageInputStyle: { color: 'black', - fontSize: 16, + fontSize: 15, padding: 10, - backgroundColor: 'rgba(0,0,0,0.1)', + backgroundColor: 'rgba(0,0,0,0.05)', borderRadius: 20, flex: 1, + height: 36, }, inputStickyStyle: { padding: 7, diff --git a/src/components/Messages/CometChatMessageHeader/index.js b/src/components/Messages/CometChatMessageHeader/index.js index d7183d6..52014a4 100644 --- a/src/components/Messages/CometChatMessageHeader/index.js +++ b/src/components/Messages/CometChatMessageHeader/index.js @@ -223,9 +223,10 @@ class CometChatMessageHeader extends React.Component { presence = ( ); } else { @@ -270,6 +271,10 @@ class CometChatMessageHeader extends React.Component { ) { videoCallBtn = null; } + if (this.props.item.blockedByMe) { + status = null; + presence = null; + } return ( @@ -278,7 +283,7 @@ class CometChatMessageHeader extends React.Component { onPress={() => this.props.actionGenerated(actions.GO_BACK)}> diff --git a/src/components/Messages/CometChatMessageHeader/styles.js b/src/components/Messages/CometChatMessageHeader/styles.js index c079043..b2db85b 100644 --- a/src/components/Messages/CometChatMessageHeader/styles.js +++ b/src/components/Messages/CometChatMessageHeader/styles.js @@ -11,7 +11,7 @@ export default StyleSheet.create({ }, callMessageTxtStyle: { alignSelf: 'center', - fontSize: 13, + fontSize: 12, fontWeight: '500', margin: 0, }, @@ -19,6 +19,10 @@ export default StyleSheet.create({ flexDirection: 'row', height: 60, paddingRight: 12, + elevation: 5, + backgroundColor: '#fff', + zIndex: 5, + alignItems: 'center', }, backButtonContainer: { flexDirection: 'row', @@ -42,7 +46,7 @@ export default StyleSheet.create({ paddingRight: 5, }, callIcon: { - height: 24, + height: 20, resizeMode: 'contain', }, itemDetailContainer: { @@ -57,8 +61,8 @@ export default StyleSheet.create({ color: theme.color.blue, }, avatarContainer: { - height: 32 * heightRatio, - width: 38 * widthRatio, + height: 40, + width: 40, borderRadius: 25, marginRight: 12, }, diff --git a/src/components/Messages/CometChatMessageList/index.js b/src/components/Messages/CometChatMessageList/index.js index 3010eb8..290352f 100644 --- a/src/components/Messages/CometChatMessageList/index.js +++ b/src/components/Messages/CometChatMessageList/index.js @@ -300,7 +300,6 @@ class CometChatMessageList extends React.PureComponent { const messageList = [...this.props.messages]; const updateEditedMessage = (message) => { const messageKey = messageList.findIndex((m) => m.id === message.id); - if (messageKey > -1) { const messageObj = messageList[messageKey]; const newMessageObj = { ...messageObj, ...message }; @@ -482,6 +481,11 @@ class CometChatMessageList extends React.PureComponent { this.props.actionGenerated(actions.CUSTOM_MESSAGE_RECEIVED, [ newMessage, ]); + } else if (message.type === enums.CUSTOM_TYPE_MEETING) { + // custom data (poll extension) does not have metadata + this.props.actionGenerated(actions.CUSTOM_MESSAGE_RECEIVED, [ + message, + ]); } } else if ( this.props.type === CometChat.RECEIVER_TYPE.USER && @@ -511,6 +515,17 @@ class CometChatMessageList extends React.PureComponent { newMessage, ]); } + } else if ( + this.props.type === CometChat.RECEIVER_TYPE.USER && + message.getReceiverType() === CometChat.RECEIVER_TYPE.USER && + message.getSender().uid === this.loggedInUser.uid + ) { + if (message.type === enums.CUSTOM_TYPE_POLL) { + // custom data (poll extension) does not have metadata + this.props.actionGenerated(actions.CUSTOM_MESSAGE_RECEIVED, [ + message, + ]); + } } } catch (error) { logger(error); @@ -889,6 +904,7 @@ class CometChatMessageList extends React.PureComponent { showMessage={this.props?.showMessage} /> ); + break; case 'meeting': component = ( ); break; @@ -951,6 +968,7 @@ class CometChatMessageList extends React.PureComponent { actionGenerated={this.props.actionGenerated} /> ); + break; case 'meeting': component = ( + { + const messageList = [...this.state.messageList]; + let messageKey = messageList.findIndex((m) => m._id === message._id); + if (messageKey > -1) { + const newMessageObj = { ...message }; + + messageList.splice(messageKey, 1, newMessageObj); + this.updateMessages(messageList); + } + }; + // messages are fetched from backend prependMessages = (messages) => { const messageList = [...messages, ...this.state.messageList]; @@ -704,6 +719,7 @@ class CometChatMessageThread extends React.PureComponent { ref={(el) => { this.composerRef = el; }} + getConversationId={this.props.getConversationId} theme={this.props.theme} item={this.props.item} type={this.props.type} diff --git a/src/components/Messages/CometChatMessages/index.js b/src/components/Messages/CometChatMessages/index.js index 7d7baa6..750aa84 100644 --- a/src/components/Messages/CometChatMessages/index.js +++ b/src/components/Messages/CometChatMessages/index.js @@ -125,7 +125,8 @@ class CometChatMessages extends React.PureComponent { }, () => { this.props.route?.params?.actionGenerated('groupDeleted', group) || - this.props.actionGenerated('groupDeleted', group); + (this.props.actionGenerated && + this.props.actionGenerated('groupDeleted', group)); this.props.navigation?.goBack(); }, ); @@ -183,9 +184,11 @@ class CometChatMessages extends React.PureComponent { case 'messageRead': params.actionGenerated(action, messages); break; + case 'messageSent': + case 'errorSentInMessage': + this.messageSent(messages); case 'messageComposed': { this.appendMessage(messages); - params.actionGenerated('messageComposed', messages); break; } case 'viewMessageThread': @@ -314,6 +317,20 @@ class CometChatMessages extends React.PureComponent { } }; + messageSent = (message) => { + const messageList = [...this.state.messageList]; + + let messageKey = messageList.findIndex((m) => m._id === message._id); + if (messageKey > -1) { + const newMessageObj = { ...message }; + + messageList.splice(messageKey, 1, newMessageObj); + + messageList.sort((a, b) => a.id - b.id); + this.setState({ messageList: [...messageList] }); + } + }; + memberUnbanned = (members) => { const messageList = [...this.state.messageList]; let filteredMembers = _.uniqBy(members, 'id'); @@ -447,11 +464,14 @@ class CometChatMessages extends React.PureComponent { const usersList = [this.state.item.uid]; CometChatManager.blockUsers(usersList) - .then(() => { + .then((response) => { + this.dropDownAlertRef?.showMessage('success', 'Blocked user'); this.setState({ user: { ...this.state.item, blockedByMe: true } }); params.actionGenerated('blockUser'); }) .catch((error) => { + const errorCode = error?.message || 'ERROR'; + this.dropDownAlertRef?.showMessage('error', errorCode); console.log('Blocking user fails with error', error); }); }; @@ -635,6 +655,7 @@ class CometChatMessages extends React.PureComponent { // messages = messages.reverse(); messages = messages.concat(newMessages); messages = _.uniqBy(messages, 'id'); + this.setState({ messageList: messages, scrollToBottom: true }); }; @@ -737,6 +758,20 @@ class CometChatMessages extends React.PureComponent { this.setState({ messageToReact: message }); }; + getConversationId = () => { + const { route } = this.props; + const params = route?.params || this.props; + let conversationId = null; + if (params.type === CometChat.RECEIVER_TYPE.USER) { + const users = [this.loggedInUser.uid, params.item.uid]; + conversationId = users.sort().join('_user_'); + } else if (params.type === CometChat.RECEIVER_TYPE.GROUP) { + conversationId = `group_${params.item.guid}`; + } + + return conversationId; + }; + render() { const { route } = this.props; const params = route?.params || this.props; @@ -756,6 +791,7 @@ class CometChatMessages extends React.PureComponent { reaction={this.reactionName} messageToReact={this.state.messageToReact} actionGenerated={this.actionHandler} + getConversationId={this.getConversationId} showMessage={(type, message) => { this.DropDownAlertRef?.showMessage(type, message); }} @@ -804,6 +840,7 @@ class CometChatMessages extends React.PureComponent { parentMessage={this.state.threadMessageParent} loggedInUser={this.loggedInUser} actionGenerated={this.actionHandler} + getConversationId={this.getConversationId} /> ); diff --git a/src/components/Messages/CometChatReadReceipt/index.js b/src/components/Messages/CometChatReadReceipt/index.js index 17dbbae..ed7b0c5 100644 --- a/src/components/Messages/CometChatReadReceipt/index.js +++ b/src/components/Messages/CometChatReadReceipt/index.js @@ -5,44 +5,61 @@ import { get as _get } from 'lodash'; import blueDoubleTick from './resources/blue-double-tick-icon.png'; import greyDoubleTick from './resources/grey-double-tick-icon.png'; import greyTick from './resources/grey-tick-icon.png'; - +import sendingTick from './resources/sending.png'; +import errorTick from './resources/error.png'; import styles from './styles'; - +import { CometChat } from '@cometchat-pro/react-native-chat'; const CometChatReadReceipt = (props) => { let ticks = blueDoubleTick; - if ( - _get(props, 'message.sentAt', null) && - !_get(props, 'message.readAt', null) && - !_get(props, 'message.deliveredAt', null) - ) { - ticks = greyTick; - } else if ( - _get(props, 'message.sentAt', null) && - !_get(props, 'message.readAt', null) && - _get(props, 'message.deliveredAt', null) - ) { - ticks = greyDoubleTick; - } + if (props.message.messageFrom === 'sender') { + if (props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP) { + if (props.message.hasOwnProperty('error')) { + ticks = errorTick; + } else { + ticks = sendingTick; + + if (props.message.hasOwnProperty('sentAt')) { + ticks = greyTick; + } + } + } else { + if (props.message.hasOwnProperty('error')) { + ticks = errorTick; + } else { + ticks = sendingTick; + + if (props.message.hasOwnProperty('sentAt')) { + ticks = greyTick; + if (props.message.hasOwnProperty('deliveredAt')) { + ticks = greyDoubleTick; + if (props.message.hasOwnProperty('readAt')) { + ticks = blueDoubleTick; + } + } + } + } + } + } if (props.message.messageFrom !== 'sender') { ticks = null; } - let timestamp = new Date(props.message.sentAt * 1000).toLocaleTimeString( - 'en-US', - { - hour: 'numeric', - minute: 'numeric', - hour12: true, - }, - ); - + let timestamp = new Date( + props.message.sentAt + ? props.message.sentAt * 1000 + : props.message._composedAt, + ).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: 'numeric', + hour12: true, + }); if (Platform.OS === 'android') { let time = timestamp.split(':'); // convert to array // fetch var hours = Number(time[0]); - var minutes = Number(time[1]); + var minutes = Number(time[1]?.split(' ')[0]); // calculate var timeValue; @@ -63,6 +80,7 @@ const CometChatReadReceipt = (props) => { return ( {timestamp} + {ticks ? ( time ) : null} diff --git a/src/components/Messages/CometChatReadReceipt/resources/error.png b/src/components/Messages/CometChatReadReceipt/resources/error.png new file mode 100644 index 0000000..5b75c53 Binary files /dev/null and b/src/components/Messages/CometChatReadReceipt/resources/error.png differ diff --git a/src/components/Messages/CometChatReadReceipt/resources/sending.png b/src/components/Messages/CometChatReadReceipt/resources/sending.png new file mode 100644 index 0000000..44b7635 Binary files /dev/null and b/src/components/Messages/CometChatReadReceipt/resources/sending.png differ diff --git a/src/components/Messages/CometChatReadReceipt/styles.js b/src/components/Messages/CometChatReadReceipt/styles.js index 92548d7..6eb2d0f 100644 --- a/src/components/Messages/CometChatReadReceipt/styles.js +++ b/src/components/Messages/CometChatReadReceipt/styles.js @@ -1,16 +1,20 @@ import { StyleSheet } from 'react-native'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ containerStyle: { - alignItems: 'center', flexDirection: 'row', + marginTop: 5, }, msgTimestampStyle: { fontSize: 11, fontWeight: '500', + color: theme.color.helpText, + textTransform: 'uppercase', }, tickImageStyle: { marginLeft: 3, + width: 14, + height: 10, }, }); diff --git a/src/components/Messages/CometChatReceiverDirectCallBubble/index.js b/src/components/Messages/CometChatReceiverDirectCallBubble/index.js index 5299d56..9ea3674 100644 --- a/src/components/Messages/CometChatReceiverDirectCallBubble/index.js +++ b/src/components/Messages/CometChatReceiverDirectCallBubble/index.js @@ -84,7 +84,9 @@ class CometChatReceiverDirectCallBubble extends React.Component { {this.state?.message?.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {this.state?.message?.sender.name} + + {this.state?.message?.sender.name} + ) : null} @@ -104,19 +106,17 @@ class CometChatReceiverDirectCallBubble extends React.Component { style={Styles.buttonStyle}> Join - + + + + {messageReactions} - - - - - diff --git a/src/components/Messages/CometChatReceiverDirectCallBubble/style.js b/src/components/Messages/CometChatReceiverDirectCallBubble/style.js index 080992a..a6eb524 100644 --- a/src/components/Messages/CometChatReceiverDirectCallBubble/style.js +++ b/src/components/Messages/CometChatReceiverDirectCallBubble/style.js @@ -3,7 +3,8 @@ import { widthRatio } from '../../../utils/consts'; import theme from '../../../resources/theme'; export default StyleSheet.create({ - mainContainer: { flexDirection: 'row', alignItems: 'center' }, + marginBottom: 16, + mainContainer: { flexDirection: 'row' }, mainWrapper: { flexWrap: 'wrap', flexDirection: 'row', @@ -12,22 +13,23 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, nameContainer: { width: '100%' }, messageContainer: { width: '70%', flexShrink: 1, - backgroundColor: theme.color.secondary, + backgroundColor: '#F8F8F8', borderRadius: 8, - padding: 10, - marginBottom: 16, + padding: 15, alignSelf: 'flex-start', }, imageContainer: { flexDirection: 'row', alignItems: 'center' }, imageStyle: { marginRight: 10 }, textStyle: { - fontSize: 15, + fontSize: 16, width: '80%', + color: theme.color.primary, }, buttonStyle: { backgroundColor: '#fff', diff --git a/src/components/Messages/CometChatReceiverFileMessageBubble/index.js b/src/components/Messages/CometChatReceiverFileMessageBubble/index.js index 3a79781..e4e4503 100644 --- a/src/components/Messages/CometChatReceiverFileMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverFileMessageBubble/index.js @@ -72,7 +72,9 @@ const CometChatReceiverFileMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -104,13 +106,13 @@ const CometChatReceiverFileMessageBubble = (props) => { message={message} /> + - diff --git a/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js b/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js index ee96330..f851dd0 100644 --- a/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js @@ -1,22 +1,20 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ messageWrapperStyle: { flexDirection: 'row', alignItems: 'center', - backgroundColor: '#f8f8f8', - marginBottom: 8, + backgroundColor: '#F8F8F8', alignSelf: 'flex-start', justifyContent: 'space-between', - paddingHorizontal: 12 * widthRatio, - paddingVertical: 8 * heightRatio, - borderRadius: 12, + paddingHorizontal: 12, + paddingVertical: 8, + borderRadius: 10, paddingRight: 30, }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', }, messagePreviewContainerStyle: { @@ -65,14 +63,15 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, containerStyle: { flexDirection: 'row', alignItems: 'center', }, - mainContainerStyle: { marginBottom: 16 }, + mainContainerStyle: { marginBottom: 16, marginLeft: 4 }, messageContainer: { flexDirection: 'row', alignItems: 'flex-start' }, messageContainerStyle: { minWidth: '65%' }, - attachmentNameStyle: { flex: 1, marginRight: 4 }, + attachmentNameStyle: { flex: 1, marginRight: 4, color: theme.color.primary }, senderNameContainer: { marginBottom: 5 }, }); diff --git a/src/components/Messages/CometChatReceiverImageMessageBubble/index.js b/src/components/Messages/CometChatReceiverImageMessageBubble/index.js index 54016aa..a6b10da 100644 --- a/src/components/Messages/CometChatReceiverImageMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverImageMessageBubble/index.js @@ -86,7 +86,9 @@ const CometChatReceiverImageMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -107,19 +109,19 @@ const CometChatReceiverImageMessageBubble = (props) => { /> - - - - + + - + + + + - ); }; diff --git a/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js b/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js index 52659a6..8a0d795 100644 --- a/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js @@ -4,14 +4,13 @@ import { widthRatio } from '../../../utils/consts'; export default StyleSheet.create({ messageWrapperStyle: { flexDirection: 'row', - backgroundColor: '#f2f3f4', - marginBottom: 8, + backgroundColor: '#F8F8F8', alignItems: 'flex-start', justifyContent: 'flex-start', maxWidth: '81%', - borderRadius: 12, + borderRadius: 10, }, - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginLeft: 4 }, mainContainer: { flexDirection: 'row', alignItems: 'flex-start' }, senderNameContainer: { marginBottom: 5 }, containerStyle: { @@ -28,9 +27,10 @@ export default StyleSheet.create({ flexDirection: 'row', width: 36, height: 36, - marginRight: 10 * widthRatio, + marginRight: 8, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, messageImgWrapperStyle: { width: '100%', @@ -44,7 +44,6 @@ export default StyleSheet.create({ }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', }, }); diff --git a/src/components/Messages/CometChatReceiverTextMessageBubble/index.js b/src/components/Messages/CometChatReceiverTextMessageBubble/index.js index f90a821..2cf160c 100644 --- a/src/components/Messages/CometChatReceiverTextMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverTextMessageBubble/index.js @@ -184,7 +184,9 @@ const CometChatReceiverTextMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -192,14 +194,16 @@ const CometChatReceiverTextMessageBubble = (props) => { onLongPress={() => { props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message); }}> - - {messageText} + + + {messageText} + @@ -211,14 +215,14 @@ const CometChatReceiverTextMessageBubble = (props) => { {...props} message={message} /> + - diff --git a/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js b/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js index 2d21788..2f9882f 100644 --- a/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js @@ -1,16 +1,21 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ messageLinkStyle: { textDecorationLine: 'underline', color: 'blue', fontSize: 15, }, - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginLeft: 4 }, innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, - senderNameStyle: { marginBottom: 5 }, - autolinkStyle: { color: 'black', fontSize: 15 }, + senderNameStyle: { + marginBottom: 2, + color: theme.color.helpText, + fontSize: 12, + paddingLeft: 8, + }, + autolinkStyle: { color: theme.color.primary, fontSize: 15 }, messageContainer: { maxWidth: '81%', minWidth: '81%' }, linkObjectDescription: { fontStyle: 'italic', @@ -22,19 +27,18 @@ export default StyleSheet.create({ messageWrapperStyle: { flexDirection: 'row', alignItems: 'center', - backgroundColor: '#f6f6f6', - marginBottom: 4, + marginBottom: 0, alignSelf: 'flex-start', justifyContent: 'space-between', - paddingHorizontal: 12 * widthRatio, - paddingVertical: 8 * heightRatio, + paddingHorizontal: 8, + paddingVertical: 8, maxWidth: '100%', borderRadius: 12, }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', + marginLeft: 8, }, messagePreviewContainerStyle: { borderRadius: 12, @@ -87,9 +91,10 @@ export default StyleSheet.create({ flexDirection: 'row', width: 36, height: 36, - marginRight: 10 * widthRatio, + marginRight: 8, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + alignSelf: 'center', }, containerStyle: { flexDirection: 'row', diff --git a/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js b/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js index b0d2c67..fb8e89c 100644 --- a/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js @@ -39,7 +39,9 @@ const CometChatReceiverVideoMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -72,14 +74,14 @@ const CometChatReceiverVideoMessageBubble = (props) => { {...props} message={message} /> + - diff --git a/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js b/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js index 0847271..796fec5 100644 --- a/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js @@ -2,24 +2,22 @@ import { StyleSheet } from 'react-native'; import { widthRatio } from '../../../utils/consts'; export default StyleSheet.create({ - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginLeft: 4 }, innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, senderNameContainer: { marginBottom: 5 }, messageWrapperStyle: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - backgroundColor: '#f2f3f4', - marginBottom: 8, + backgroundColor: '#F8F8F8', alignSelf: 'flex-start', - paddingHorizontal: 18 * widthRatio, - paddingVertical: 5, + paddingHorizontal: 12, + paddingVertical: 8, maxWidth: '87.5%', - borderRadius: 12, + borderRadius: 10, }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', }, avatarStyle: { @@ -30,6 +28,7 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, msgTimestampStyle: { fontSize: 11, @@ -50,6 +49,6 @@ export default StyleSheet.create({ messageVideo: { height: '100%', width: '100%', - borderRadius: 12, + borderRadius: 10, }, }); diff --git a/src/components/Messages/CometChatSenderDirectCallBubble/index.js b/src/components/Messages/CometChatSenderDirectCallBubble/index.js index ef0aafc..b3bbb30 100644 --- a/src/components/Messages/CometChatSenderDirectCallBubble/index.js +++ b/src/components/Messages/CometChatSenderDirectCallBubble/index.js @@ -69,25 +69,27 @@ class CometChatSenderDirectCallBubble extends React.Component { this.state?.message, ); }}> - - - - {`You have initiated a call`} - - - this.props.actionGenerated( - actions.JOIN_DIRECT_CALL, - this.state.message, - ) - } - style={Styles.buttonStyle}> - Join - - - {messageReactions} + + + + + {`You have initiated a call`} + + + this.props.actionGenerated( + actions.JOIN_DIRECT_CALL, + this.state.message, + ) + } + style={Styles.buttonStyle}> + Join + - + {messageReactions} + + { - + { - + { - + { }) .catch((err) => { console.log('err', err); - const errorCode = err?.message || 'ERROR'; + const errorCode = err?.details?.message || err?.message || 'ERROR'; dropDownAlertRef?.current?.showMessage('error', errorCode); setError(err); }); diff --git a/src/components/Messages/Extensions/CometChatMessageReactions/index.js b/src/components/Messages/Extensions/CometChatMessageReactions/index.js index 1e2a3a5..88f8d91 100644 --- a/src/components/Messages/Extensions/CometChatMessageReactions/index.js +++ b/src/components/Messages/Extensions/CometChatMessageReactions/index.js @@ -31,7 +31,9 @@ class CometChatMessageReactions extends Component { } componentDidUpdate(prevProps) { - if (prevProps.message !== this.props.message) { + if ( + JSON.stringify(prevProps.message) !== JSON.stringify(this.props.message) + ) { this.setState({ message: this.props.message }); } } @@ -48,7 +50,8 @@ class CometChatMessageReactions extends Component { // Reaction added successfully }) .catch((error) => { - const errorCode = error?.message || 'ERROR'; + const errorCode = + error?.details?.message || error?.message || 'ERROR'; this.props?.showMessage('error', errorCode); // Some error occured }); @@ -77,6 +80,7 @@ class CometChatMessageReactions extends Component { Object.keys(reactionData).forEach((user) => { if (reactionData[user].name) userList.push(reactionData[user].name); }); + return ( this.reactToMessages({ colons: data })} @@ -138,6 +142,9 @@ class CometChatMessageReactions extends Component { messageReactions.unshift(addReactionEmoji); } } + if (this.props.item.blockedByMe) { + return null; + } return ( // eslint-disable-next-line react/jsx-fragments <> @@ -147,6 +154,7 @@ class CometChatMessageReactions extends Component { { id: pollId, }) .then((response) => { - props.actionGenerated(actions.POLL_ANSWERED, response); + // props.actionGenerated(actions.POLL_ANSWERED, message); }) .catch((error) => { - const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); - logger(error); + const errorCode = error?.details?.message || error?.message || 'ERROR'; + props?.showMessage('error', errorCode); + logger('here', error); }); }; if (!Object.prototype.hasOwnProperty.call(props.message, 'metadata')) { @@ -154,7 +154,9 @@ const CometChatReceiverPollMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -172,19 +174,18 @@ const CometChatReceiverPollMessageBubble = (props) => { {totalText} - - - - + + - + + + + - - (this.dropDownAlertRef = ref)} /> ); }; diff --git a/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js index 3272dc3..fc1c111 100644 --- a/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js @@ -6,7 +6,6 @@ export default StyleSheet.create({ innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, messageWrapperStyle: { backgroundColor: '#f8f8f8', - marginBottom: 8, alignSelf: 'flex-start', paddingHorizontal: 12 * widthRatio, paddingVertical: 8 * heightRatio, diff --git a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js index b78d3f6..b8aca34 100644 --- a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js +++ b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js @@ -58,7 +58,9 @@ const CometChatReceiverStickerMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -72,12 +74,12 @@ const CometChatReceiverStickerMessageBubble = (props) => { {...props} message={message} /> + - diff --git a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js index 8b32924..e23b49a 100644 --- a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js @@ -6,7 +6,6 @@ export default StyleSheet.create({ innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, senderNameContainer: { marginBottom: 5 }, messageWrapperStyle: { - marginBottom: 4, alignSelf: 'flex-start', paddingHorizontal: 12 * widthRatio, paddingVertical: 8 * heightRatio, @@ -32,6 +31,7 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, containerStyle: { flexDirection: 'row', diff --git a/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js index fc40fd5..9796c78 100644 --- a/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js @@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../../utils/consts'; export default StyleSheet.create({ - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginRight: 8 }, pollQuestionText: { fontSize: 14, textAlign: 'left', color: 'white' }, totalText: { fontSize: 14, diff --git a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js index d474c3e..0764be1 100644 --- a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js +++ b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js @@ -12,10 +12,10 @@ import * as enums from '../../../../utils/enums'; import * as actions from '../../../../utils/actions'; const CometChatSenderStickerMessageBubble = (props) => { - const [message] = useState({ + const message = { ...props.message, - messageFrom: enums.MESSAGE_FROM_SENDER, - }); + messageFrom: enums.MESSAGE_FROM_RECEIVER, + }; let stickerData = null; let stickerImg = null; if ( @@ -45,11 +45,13 @@ const CometChatSenderStickerMessageBubble = (props) => { - + + + ); }; diff --git a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js index c382ad0..5780fcc 100644 --- a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js @@ -10,6 +10,8 @@ export default StyleSheet.create({ position: 'relative', flexDirection: 'column', flexShrink: 0, + marginRight: 8, + alignItems: 'flex-end', }, messageWrapperStyle: { width: '100%', diff --git a/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js b/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js index 2892d83..965ad56 100644 --- a/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js +++ b/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../../utils/consts'; - +import theme from '../../../../resources/theme'; export default StyleSheet.create({ previewWrapperStyle: { width: '100%', @@ -12,7 +12,7 @@ export default StyleSheet.create({ paddingVertical: 8 * heightRatio, borderRadius: 18, marginVertical: 8, - shadowColor: '#141414', + shadowColor: theme.color.primary, shadowOffset: { width: 0, height: 1, diff --git a/src/components/Shared/CometChatBadgeCount/index.js b/src/components/Shared/CometChatBadgeCount/index.js index ed63d4a..97c6595 100644 --- a/src/components/Shared/CometChatBadgeCount/index.js +++ b/src/components/Shared/CometChatBadgeCount/index.js @@ -1,8 +1,8 @@ import React, { useRef, useEffect } from 'react'; -import { Animated } from 'react-native'; +import { Animated, View } from 'react-native'; import theme from '../../../resources/theme'; import styles from './styles'; - +import PropTypes from 'prop-types'; const CometChatBadgeCount = (props) => { const badgeTheme = { ...theme, ...props.theme }; @@ -18,20 +18,38 @@ const CometChatBadgeCount = (props) => { if (props.count) { return ( - - {props.count} - + + + {props.count} + + ); } return null; }; export default CometChatBadgeCount; + +CometChatBadgeCount.defaultProps = { + containerStyle: {}, + theme: {}, + count: 0, +}; + +CometChatBadgeCount.propTypes = { + count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + containerStyle: PropTypes.object, + theme: PropTypes.object, +}; diff --git a/src/components/Shared/CometChatBadgeCount/styles.js b/src/components/Shared/CometChatBadgeCount/styles.js index 24a64e7..313709f 100644 --- a/src/components/Shared/CometChatBadgeCount/styles.js +++ b/src/components/Shared/CometChatBadgeCount/styles.js @@ -2,17 +2,19 @@ import { StyleSheet } from 'react-native'; export default StyleSheet.create({ badgeStyle: { - fontSize: 12, - height: 18, - borderRadius: 8, + aspectRatio: 1, + height: 24, + borderRadius: 900, + marginLeft: 4, + marginRight: 2, + opacity: 1, + justifyContent: 'center', + }, + textStyle: { + fontSize: 11, overflow: 'hidden', textAlign: 'center', fontWeight: '700', - lineHeight: 18, - marginLeft: 4, - paddingVertical: 0, - paddingHorizontal: 9, - marginRight: 2, opacity: 1, }, }); diff --git a/src/components/Shared/CometChatSharedMedia/index.js b/src/components/Shared/CometChatSharedMedia/index.js index 36ef8c9..8138b44 100644 --- a/src/components/Shared/CometChatSharedMedia/index.js +++ b/src/components/Shared/CometChatSharedMedia/index.js @@ -133,7 +133,7 @@ export default class CometChatSharedMedia extends React.Component { }) .catch((error) => { const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); + this.props?.showMessage('error', errorCode); logger( '[CometChatSharedMedia] getMessages fetchPrevious error', error, @@ -142,7 +142,7 @@ export default class CometChatSharedMedia extends React.Component { }) .catch((error) => { const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); + this.props?.showMessage('error', errorCode); logger( '[CometChatSharedMedia] getMessages getLoggedInUser error', error, @@ -300,7 +300,7 @@ export default class CometChatSharedMedia extends React.Component { style={[ styles.sectionHeaderStyle, { - color: `${currentTheme.color.secondary}`, + color: currentTheme.color.helpText, }, ]}> Shared Media diff --git a/src/components/Shared/CometChatSharedMedia/styles.js b/src/components/Shared/CometChatSharedMedia/styles.js index afc68ec..1775471 100644 --- a/src/components/Shared/CometChatSharedMedia/styles.js +++ b/src/components/Shared/CometChatSharedMedia/styles.js @@ -58,6 +58,7 @@ export default StyleSheet.create({ }, mediaItemStyle: { justifyContent: 'center', + flexGrow: 1, }, mediaItemColumnStyle: { justifyContent: 'space-between', diff --git a/src/components/Shared/CometChatUserPresence/index.js b/src/components/Shared/CometChatUserPresence/index.js index f452e5a..3f2aaf5 100644 --- a/src/components/Shared/CometChatUserPresence/index.js +++ b/src/components/Shared/CometChatUserPresence/index.js @@ -19,7 +19,7 @@ const CometChatUserPresence = (props) => { presenceStatus = { backgroundColor: 'rgb(0, 255, 0)', }; - borderWidth = 0; + // borderWidth = 0; } const borderStyle = { @@ -29,7 +29,15 @@ const CometChatUserPresence = (props) => { borderRadius: cornerRadius, }; return ( - + ); }; export default CometChatUserPresence; diff --git a/src/components/Shared/CometChatUserPresence/styles.js b/src/components/Shared/CometChatUserPresence/styles.js index d6d5dbe..8daa312 100644 --- a/src/components/Shared/CometChatUserPresence/styles.js +++ b/src/components/Shared/CometChatUserPresence/styles.js @@ -2,10 +2,12 @@ import { StyleSheet } from 'react-native'; export default StyleSheet.create({ statueIndicatorStyle: { - width: 8, - height: 8, - top: 25, - right: -2, + width: 12, + height: 12, + top: 30, + right: 0, + borderColor: '#fff', + borderWidth: 1, position: 'absolute', }, }); diff --git a/src/components/Shared/DropDownAlert/index.js b/src/components/Shared/DropDownAlert/index.js index 71c5d8d..dfbe8ac 100644 --- a/src/components/Shared/DropDownAlert/index.js +++ b/src/components/Shared/DropDownAlert/index.js @@ -8,6 +8,7 @@ import CloseIcon from './resources/close.png'; import styles from './styles'; import { StatusBar } from 'react-native'; import { TouchableOpacity } from 'react-native'; + export default class DropDownAlert extends Component { constructor(props) { super(props); @@ -27,6 +28,9 @@ export default class DropDownAlert extends Component { }; slideOut = () => { + if (this.props.onClose) { + this.props.onClose(); + } const self = this; Animated.timing(this.animatedY, { duration: 1000, @@ -38,6 +42,7 @@ export default class DropDownAlert extends Component { }; showMessage = (type = 'error', text = 'Something went wrong') => { + return; this.setState({ errorText: text, type }, () => { this.slideIn(); }); @@ -78,7 +83,7 @@ export default class DropDownAlert extends Component { {errorText} diff --git a/src/components/Shared/DropDownAlert/styles.js b/src/components/Shared/DropDownAlert/styles.js index 62cf34d..1f1f303 100644 --- a/src/components/Shared/DropDownAlert/styles.js +++ b/src/components/Shared/DropDownAlert/styles.js @@ -3,7 +3,7 @@ import theme from '../../../resources/theme'; export default StyleSheet.create({ mainContainer: { - bottom: Platform.OS == 'ios' ? '85%' : '90%', + bottom: Platform.OS == 'ios' ? '80%' : '85%', position: 'absolute', top: 0, left: 0, diff --git a/src/components/UserProfile/CometChatUserProfile/index.js b/src/components/UserProfile/CometChatUserProfile/index.js index f45f9bf..d868920 100644 --- a/src/components/UserProfile/CometChatUserProfile/index.js +++ b/src/components/UserProfile/CometChatUserProfile/index.js @@ -8,14 +8,20 @@ import theme from '../../../resources/theme'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { logger } from '../../../utils/common'; -const notificationIcon = ; -const privacyIcon = ; -const chatIcon = ; -const helpIcon = ; -const problemIcon = ; +const notificationIcon = ( + +); +const privacyIcon = ( + +); +const chatIcon = ; +const helpIcon = ; +const problemIcon = ( + +); const CometChatUserProfile = (props) => { - const [user, setUser] = useState({ name: '', avatar: null }); + const [user, setUser] = useState({}); const viewTheme = { ...theme, ...props.theme }; /** @@ -39,18 +45,20 @@ const CometChatUserProfile = (props) => { useEffect(() => { getProfile(); }, []); - - const avatar = ( - - - - ); + let avatar = null; + if (user) { + avatar = ( + + + + ); + } return ( @@ -59,12 +67,14 @@ const CometChatUserProfile = (props) => { {avatar} - - - {user.name} + {user?.name ? ( + + + {user?.name} + + Online - Online - + ) : null} diff --git a/src/components/UserProfile/CometChatUserProfile/styles.js b/src/components/UserProfile/CometChatUserProfile/styles.js index 7ad8368..f3f2f77 100644 --- a/src/components/UserProfile/CometChatUserProfile/styles.js +++ b/src/components/UserProfile/CometChatUserProfile/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { widthRatio, heightRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ userInfoScreenStyle: { flex: 1, @@ -38,7 +38,8 @@ export default StyleSheet.create({ }, userName: { fontSize: 16 * heightRatio, - fontWeight: '700', + color: theme.color.primary, + fontWeight: '500', }, status: { fontWeight: '500', @@ -46,8 +47,8 @@ export default StyleSheet.create({ color: '#349afe', }, avatarStyle: { - width: 36 * widthRatio, - height: 36 * heightRatio, + width: 40, + height: 40, borderColor: 'green', marginTop: 10, }, @@ -56,18 +57,18 @@ export default StyleSheet.create({ width: '100%', }, infoItemHeadingContainer: { - marginLeft: 16 * widthRatio, + marginLeft: 16, marginTop: 8 * heightRatio, }, infoItemHeadingText: { - color: '#cccccc', + color: theme.color.helpText, fontWeight: '500', - fontSize: 16 * heightRatio, + fontSize: 16, }, infoItemsContainer: { borderColor: 'orange', - marginLeft: 32 * widthRatio, + marginLeft: 16, marginTop: 16 * heightRatio, }, infoItem: { @@ -77,9 +78,8 @@ export default StyleSheet.create({ alignItems: 'center', }, infoItemText: { - fontSize: 14 * heightRatio, - fontWeight: '700', - + fontSize: 14, + color: theme.color.primary, marginLeft: 8, }, }); diff --git a/src/components/Users/CometChatUserList/index.js b/src/components/Users/CometChatUserList/index.js index 39d1d1e..bcf901f 100644 --- a/src/components/Users/CometChatUserList/index.js +++ b/src/components/Users/CometChatUserList/index.js @@ -309,11 +309,7 @@ class CometChatUserList extends React.PureComponent { backgroundColor: `${this.theme.backgroundColor.grey}`, }, ]}> - + { diff --git a/src/components/Users/CometChatUserListItem/styles.js b/src/components/Users/CometChatUserListItem/styles.js index 7548775..5e7436a 100644 --- a/src/components/Users/CometChatUserListItem/styles.js +++ b/src/components/Users/CometChatUserListItem/styles.js @@ -1,19 +1,19 @@ 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%', paddingVertical: 8, - paddingHorizontal: 15, + paddingHorizontal: 16, }, avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 15 * widthRatio, }, @@ -21,5 +21,10 @@ export default StyleSheet.create({ width: '100%', justifyContent: 'center', }, - userNameText: { fontSize: 16, fontWeight: '600', maxWidth: '80%' }, + userNameText: { + fontSize: 16, + fontWeight: '600', + maxWidth: '80%', + color: theme.color.primary, + }, }); diff --git a/src/resources/theme.js b/src/resources/theme.js index 3cac53f..6dad5e8 100644 --- a/src/resources/theme.js +++ b/src/resources/theme.js @@ -7,7 +7,7 @@ export default { darkSecondary: '#eaeaea', grey: 'rgba(20,20,20,0.04)', helpText: 'rgba(20, 20, 20, 0.6)', - blue: '#39f', + blue: '#3399ff', white: '#fff', red: '#ff3b30', listUnderlayColor: 'rgba(0,0,0,0.22)', @@ -21,7 +21,7 @@ export default { white: '#fff', primary: '#E6E6E6', secondary: '#f6f6f6', - blue: '#39f', + blue: '#3399ff', red: '#ff3b30', grey: 'rgba(20,20,20,0.04)', lightGrey: 'rgba(20, 20, 20, 0.08)',