From 7d30941c8aba7670f93ebe256967577a6a03f45b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 12 Apr 2021 15:21:10 -0700 Subject: typing indicator + bubble in one tagg color --- src/screens/chat/ChatScreen.tsx | 79 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 77 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 161bd07d..18d40f96 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,7 +1,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect} from 'react'; -import {StyleSheet} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import { Channel, @@ -41,12 +41,74 @@ const ChatScreen: React.FC = () => { height: 70, }, }, + avatar: { + container: { + borderRadius: 20, + width: 40, + height: 40, + }, + }, + messageSimple: { + avatarWrapper: { + container: { + height: '100%', + top: -8, + right: -25, + zIndex: 1, + }, + }, + container: { + paddingTop: 8, + }, + card: { + container: { + backgroundColor: 'lightgreen', + borderWidth: 2, + borderColor: 'black', + }, + }, + content: { + container: {}, + containerInner: { + backgroundColor: '#DEE6F4', + borderColor: 'transparent', + borderBottomLeftRadius: 10, + borderTopLeftRadius: 10, + borderBottomRightRadius: 10, + borderTopRightRadius: 10, + }, + }, + }, + }; + + const loggedInUsersMessageTheme = { + messageSimple: { + content: { + containerInner: { + backgroundColor: '#DEE6F4', + }, + container: { + left: 0, + }, + }, + }, }; useEffect(() => { setTopInset(insets.top + HeaderHeight); }); + const CustomTypingIndicator = () => { + return ( + + + + ); + }; + return ( = () => { messageActions={({copyMessage, deleteMessage}) => [ copyMessage, deleteMessage, - ]}> + ]} + TypingIndicator={CustomTypingIndicator} + myMessageTheme={loggedInUsersMessageTheme}> {}} /> {/* */} @@ -79,6 +143,17 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flex: 1, }, + typingIndicatorContainer: { + backgroundColor: '#E4F0F2', + width: 88, + height: 32, + borderRadius: 10, + marginBottom: 10, + marginLeft: 10, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From ec42d07cee2f5e99acf5034ab2d060a1ec0dfb43 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 13 Apr 2021 15:22:09 -0700 Subject: changed own message theme --- src/screens/chat/ChatScreen.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 18d40f96..ae95cd62 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -6,9 +6,11 @@ import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import { Channel, Chat, + DeepPartial, MessageInput, MessageList, useAttachmentPickerContext, + Theme, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import {ChatHeader, ChatInput, TabsGradient} from '../../components'; @@ -29,7 +31,7 @@ const ChatScreen: React.FC = () => { const {setTopInset} = useAttachmentPickerContext(); const insets = useSafeAreaInsets(); - const chatTheme = { + const chatTheme: DeepPartial = { messageList: { container: { backgroundColor: 'white', @@ -70,7 +72,7 @@ const ChatScreen: React.FC = () => { content: { container: {}, containerInner: { - backgroundColor: '#DEE6F4', + backgroundColor: '#E4F0F2', borderColor: 'transparent', borderBottomLeftRadius: 10, borderTopLeftRadius: 10, @@ -154,6 +156,17 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, + typingIndicatorContainer: { + backgroundColor: '#E4F0F2', + width: 88, + height: 32, + borderRadius: 10, + marginBottom: 10, + marginLeft: 10, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From 29f26479f63ee0c02677635b99453eba4d21fea8 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 13 Apr 2021 15:56:17 -0700 Subject: tagg indicator and main container alignment --- src/screens/chat/ChatScreen.tsx | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index ae95cd62..c88e8690 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -16,7 +16,7 @@ import {ChatContext} from '../../App'; import {ChatHeader, ChatInput, TabsGradient} from '../../components'; import {MainStackParams} from '../../routes'; import {ScreenType} from '../../types'; -import {HeaderHeight, isIPhoneX} from '../../utils'; +import {HeaderHeight, isIPhoneX, SCREEN_WIDTH} from '../../utils'; type ChatScreenNavigationProp = StackNavigationProp; interface ChatScreenProps { @@ -35,6 +35,8 @@ const ChatScreen: React.FC = () => { messageList: { container: { backgroundColor: 'white', + width: SCREEN_WIDTH * 0.9, + alignSelf: 'center', }, }, messageInput: { @@ -55,22 +57,17 @@ const ChatScreen: React.FC = () => { container: { height: '100%', top: -8, - right: -25, zIndex: 1, }, }, container: { paddingTop: 8, + flexDirection: 'row', }, - card: { + content: { container: { - backgroundColor: 'lightgreen', - borderWidth: 2, - borderColor: 'black', + left: -25, }, - }, - content: { - container: {}, containerInner: { backgroundColor: '#E4F0F2', borderColor: 'transparent', @@ -156,17 +153,6 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, - typingIndicatorContainer: { - backgroundColor: '#E4F0F2', - width: 88, - height: 32, - borderRadius: 10, - marginBottom: 10, - marginLeft: 10, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From 4626c9af0596c9d59452aeb730aa51b98324a39a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 14 Apr 2021 13:43:15 -0700 Subject: styling --- src/screens/chat/ChatScreen.tsx | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index c88e8690..c281f67a 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -16,7 +16,7 @@ import {ChatContext} from '../../App'; import {ChatHeader, ChatInput, TabsGradient} from '../../components'; import {MainStackParams} from '../../routes'; import {ScreenType} from '../../types'; -import {HeaderHeight, isIPhoneX, SCREEN_WIDTH} from '../../utils'; +import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils'; type ChatScreenNavigationProp = StackNavigationProp; interface ChatScreenProps { @@ -35,7 +35,7 @@ const ChatScreen: React.FC = () => { messageList: { container: { backgroundColor: 'white', - width: SCREEN_WIDTH * 0.9, + width: SCREEN_WIDTH * 0.95, alignSelf: 'center', }, }, @@ -47,17 +47,17 @@ const ChatScreen: React.FC = () => { }, avatar: { container: { - borderRadius: 20, - width: 40, - height: 40, + borderRadius: 10, + width: normalize(18), + height: normalize(18), }, }, messageSimple: { avatarWrapper: { container: { - height: '100%', - top: -8, + width: normalize(20), zIndex: 1, + bottom: 20, }, }, container: { @@ -65,9 +65,7 @@ const ChatScreen: React.FC = () => { flexDirection: 'row', }, content: { - container: { - left: -25, - }, + container: {}, containerInner: { backgroundColor: '#E4F0F2', borderColor: 'transparent', @@ -148,7 +146,7 @@ const styles = StyleSheet.create({ height: 32, borderRadius: 10, marginBottom: 10, - marginLeft: 10, + marginLeft: SCREEN_WIDTH * 0.09, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', -- cgit v1.2.3-70-g09d2 From 6e3f218e4c86900545d6cc7881f93d566d977b15 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 14 Apr 2021 15:43:12 -0700 Subject: message avatar --- src/screens/chat/ChatScreen.tsx | 50 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index c281f67a..418638b7 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -3,6 +3,7 @@ import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect} from 'react'; import {Image, StyleSheet, View} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; +import {useStore} from 'react-redux'; import { Channel, Chat, @@ -11,12 +12,19 @@ import { MessageList, useAttachmentPickerContext, Theme, + useMessageContext, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import {ChatHeader, ChatInput, TabsGradient} from '../../components'; import {MainStackParams} from '../../routes'; import {ScreenType} from '../../types'; -import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils'; +import { + getMember, + HeaderHeight, + isIPhoneX, + normalize, + SCREEN_WIDTH, +} from '../../utils'; type ChatScreenNavigationProp = StackNavigationProp; interface ChatScreenProps { @@ -30,6 +38,8 @@ const ChatScreen: React.FC = () => { const tabbarHeight = useBottomTabBarHeight(); const {setTopInset} = useAttachmentPickerContext(); const insets = useSafeAreaInsets(); + const state = useStore().getState(); + const member = getMember(channel, state); const chatTheme: DeepPartial = { messageList: { @@ -65,6 +75,9 @@ const ChatScreen: React.FC = () => { flexDirection: 'row', }, content: { + metaContainer: { + marginLeft: 5, + }, container: {}, containerInner: { backgroundColor: '#E4F0F2', @@ -75,6 +88,9 @@ const ChatScreen: React.FC = () => { borderTopRightRadius: 10, }, }, + status: { + statusContainer: {}, + }, }, }; @@ -106,6 +122,24 @@ const ChatScreen: React.FC = () => { ); }; + const CustomMessageAvatar = () => { + const message = useMessageContext(); + return ( + + {message.lastGroupMessage === true && ( + + )} + + ); + }; + return ( = () => { deleteMessage, ]} TypingIndicator={CustomTypingIndicator} - myMessageTheme={loggedInUsersMessageTheme}> + myMessageTheme={loggedInUsersMessageTheme} + MessageAvatar={CustomMessageAvatar}> {}} /> {/* */} @@ -151,6 +186,17 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, + messageAvatarContainer: { + width: normalize(20), + zIndex: 1, + bottom: 20, + marginRight: '2%', + }, + messageAvatar: { + borderRadius: 50, + width: normalize(18), + height: normalize(18), + }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From 0dc9a8cc06ec8e0208989ceb007faad201d89f28 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 14 Apr 2021 16:46:33 -0700 Subject: refactored --- src/components/messages/MessageAvatar.tsx | 44 ++++++++++++++++ src/components/messages/TypingIndicator.tsx | 30 +++++++++++ src/components/messages/index.ts | 2 + src/screens/chat/ChatScreen.tsx | 78 ++++------------------------- 4 files changed, 87 insertions(+), 67 deletions(-) create mode 100644 src/components/messages/MessageAvatar.tsx create mode 100644 src/components/messages/TypingIndicator.tsx (limited to 'src') diff --git a/src/components/messages/MessageAvatar.tsx b/src/components/messages/MessageAvatar.tsx new file mode 100644 index 00000000..d275eae5 --- /dev/null +++ b/src/components/messages/MessageAvatar.tsx @@ -0,0 +1,44 @@ +import React, {useContext} from 'react'; +import {Image, StyleSheet, View} from 'react-native'; +import {getMember, normalize} from '../../utils'; +import {useMessageContext} from 'stream-chat-react-native-core'; +import {useStore} from 'react-redux'; +import {ChatContext} from '../../App'; + +const MessageAvatar: React.FC = () => { + const {channel} = useContext(ChatContext); + const state = useStore().getState(); + const member = getMember(channel, state); + const message = useMessageContext(); + + return ( + + {message.lastGroupMessage === true && ( + + )} + + ); +}; + +const styles = StyleSheet.create({ + messageAvatarContainer: { + width: normalize(20), + zIndex: 1, + bottom: 20, + marginRight: '2%', + }, + messageAvatar: { + borderRadius: 50, + width: normalize(18), + height: normalize(18), + }, +}); + +export default MessageAvatar; diff --git a/src/components/messages/TypingIndicator.tsx b/src/components/messages/TypingIndicator.tsx new file mode 100644 index 00000000..be7141a2 --- /dev/null +++ b/src/components/messages/TypingIndicator.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import {View, Image, StyleSheet} from 'react-native'; +import {SCREEN_WIDTH} from '../../utils'; + +const TypingIndicator: React.FC = () => { + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + typingIndicatorContainer: { + backgroundColor: '#E4F0F2', + width: 88, + height: 32, + borderRadius: 10, + marginBottom: 10, + marginLeft: SCREEN_WIDTH * 0.09, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default TypingIndicator; diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index c809d3d1..d08e9454 100644 --- a/src/components/messages/index.ts +++ b/src/components/messages/index.ts @@ -3,3 +3,5 @@ export {default as ChannelPreview} from './ChannelPreview'; export {default as ChatInput} from './ChatInput'; export {default as ChatHeader} from './ChatHeader'; export {default as ChatInputSubmit} from './ChatInputSubmit'; +export {default as MessageAvatar} from './MessageAvatar'; +export {default as TypingIndicator} from './TypingIndicator'; diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 418638b7..656c1c47 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,9 +1,8 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect} from 'react'; -import {Image, StyleSheet, View} from 'react-native'; +import {StyleSheet} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; -import {useStore} from 'react-redux'; import { Channel, Chat, @@ -12,19 +11,18 @@ import { MessageList, useAttachmentPickerContext, Theme, - useMessageContext, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; -import {ChatHeader, ChatInput, TabsGradient} from '../../components'; +import { + ChatHeader, + ChatInput, + MessageAvatar, + TabsGradient, + TypingIndicator, +} from '../../components'; import {MainStackParams} from '../../routes'; import {ScreenType} from '../../types'; -import { - getMember, - HeaderHeight, - isIPhoneX, - normalize, - SCREEN_WIDTH, -} from '../../utils'; +import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils'; type ChatScreenNavigationProp = StackNavigationProp; interface ChatScreenProps { @@ -38,9 +36,6 @@ const ChatScreen: React.FC = () => { const tabbarHeight = useBottomTabBarHeight(); const {setTopInset} = useAttachmentPickerContext(); const insets = useSafeAreaInsets(); - const state = useStore().getState(); - const member = getMember(channel, state); - const chatTheme: DeepPartial = { messageList: { container: { @@ -111,35 +106,6 @@ const ChatScreen: React.FC = () => { setTopInset(insets.top + HeaderHeight); }); - const CustomTypingIndicator = () => { - return ( - - - - ); - }; - - const CustomMessageAvatar = () => { - const message = useMessageContext(); - return ( - - {message.lastGroupMessage === true && ( - - )} - - ); - }; - return ( = () => { copyMessage, deleteMessage, ]} - TypingIndicator={CustomTypingIndicator} + TypingIndicator={TypingIndicator} myMessageTheme={loggedInUsersMessageTheme} - MessageAvatar={CustomMessageAvatar}> + MessageAvatar={MessageAvatar}> {}} /> {/* */} @@ -175,28 +141,6 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flex: 1, }, - typingIndicatorContainer: { - backgroundColor: '#E4F0F2', - width: 88, - height: 32, - borderRadius: 10, - marginBottom: 10, - marginLeft: SCREEN_WIDTH * 0.09, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - }, - messageAvatarContainer: { - width: normalize(20), - zIndex: 1, - bottom: 20, - marginRight: '2%', - }, - messageAvatar: { - borderRadius: 50, - width: normalize(18), - height: normalize(18), - }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2