From 7d30941c8aba7670f93ebe256967577a6a03f45b Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
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/screens/chat/ChatScreen.tsx')

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<ChatScreenProps> = () => {
         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 (
+      <View style={styles.typingIndicatorContainer}>
+        <Image
+          source={require('../../assets/gifs/loading-animation.gif')}
+          style={{width: 88, height: 49}}
+        />
+      </View>
+    );
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -63,7 +125,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           messageActions={({copyMessage, deleteMessage}) => [
             copyMessage,
             deleteMessage,
-          ]}>
+          ]}
+          TypingIndicator={CustomTypingIndicator}
+          myMessageTheme={loggedInUsersMessageTheme}>
           <MessageList onThreadSelect={() => {}} />
           {/* <MessageInput /> */}
           <MessageInput Input={ChatInput} />
@@ -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 <shravs1208@gmail.com>
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/screens/chat/ChatScreen.tsx')

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<ChatScreenProps> = () => {
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
 
-  const chatTheme = {
+  const chatTheme: DeepPartial<Theme> = {
     messageList: {
       container: {
         backgroundColor: 'white',
@@ -70,7 +72,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
       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 <shravs1208@gmail.com>
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/screens/chat/ChatScreen.tsx')

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<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -35,6 +35,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     messageList: {
       container: {
         backgroundColor: 'white',
+        width: SCREEN_WIDTH * 0.9,
+        alignSelf: 'center',
       },
     },
     messageInput: {
@@ -55,22 +57,17 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         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 <shravs1208@gmail.com>
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/screens/chat/ChatScreen.tsx')

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<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -35,7 +35,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     messageList: {
       container: {
         backgroundColor: 'white',
-        width: SCREEN_WIDTH * 0.9,
+        width: SCREEN_WIDTH * 0.95,
         alignSelf: 'center',
       },
     },
@@ -47,17 +47,17 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     },
     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<ChatScreenProps> = () => {
         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 <shravs1208@gmail.com>
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/screens/chat/ChatScreen.tsx')

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<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -30,6 +38,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const tabbarHeight = useBottomTabBarHeight();
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
+  const state = useStore().getState();
+  const member = getMember(channel, state);
 
   const chatTheme: DeepPartial<Theme> = {
     messageList: {
@@ -65,6 +75,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         flexDirection: 'row',
       },
       content: {
+        metaContainer: {
+          marginLeft: 5,
+        },
         container: {},
         containerInner: {
           backgroundColor: '#E4F0F2',
@@ -75,6 +88,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           borderTopRightRadius: 10,
         },
       },
+      status: {
+        statusContainer: {},
+      },
     },
   };
 
@@ -106,6 +122,24 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     );
   };
 
+  const CustomMessageAvatar = () => {
+    const message = useMessageContext();
+    return (
+      <View style={styles.messageAvatarContainer}>
+        {message.lastGroupMessage === true && (
+          <Image
+            style={styles.messageAvatar}
+            source={
+              member
+                ? {uri: member.user?.thumbnail_url}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+        )}
+      </View>
+    );
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -124,7 +158,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             deleteMessage,
           ]}
           TypingIndicator={CustomTypingIndicator}
-          myMessageTheme={loggedInUsersMessageTheme}>
+          myMessageTheme={loggedInUsersMessageTheme}
+          MessageAvatar={CustomMessageAvatar}>
           <MessageList onThreadSelect={() => {}} />
           {/* <MessageInput /> */}
           <MessageInput Input={ChatInput} />
@@ -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 <shravs1208@gmail.com>
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/screens/chat/ChatScreen.tsx')

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 (
+    <View style={styles.messageAvatarContainer}>
+      {message.lastGroupMessage === true && (
+        <Image
+          style={styles.messageAvatar}
+          source={
+            member
+              ? {uri: member.user?.thumbnail_url}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+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 (
+    <View style={styles.typingIndicatorContainer}>
+      <Image
+        source={require('../../assets/gifs/loading-animation.gif')}
+        style={{width: 88, height: 49}}
+      />
+    </View>
+  );
+};
+
+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<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -38,9 +36,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const tabbarHeight = useBottomTabBarHeight();
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
-  const state = useStore().getState();
-  const member = getMember(channel, state);
-
   const chatTheme: DeepPartial<Theme> = {
     messageList: {
       container: {
@@ -111,35 +106,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     setTopInset(insets.top + HeaderHeight);
   });
 
-  const CustomTypingIndicator = () => {
-    return (
-      <View style={styles.typingIndicatorContainer}>
-        <Image
-          source={require('../../assets/gifs/loading-animation.gif')}
-          style={{width: 88, height: 49}}
-        />
-      </View>
-    );
-  };
-
-  const CustomMessageAvatar = () => {
-    const message = useMessageContext();
-    return (
-      <View style={styles.messageAvatarContainer}>
-        {message.lastGroupMessage === true && (
-          <Image
-            style={styles.messageAvatar}
-            source={
-              member
-                ? {uri: member.user?.thumbnail_url}
-                : require('../../assets/images/avatar-placeholder.png')
-            }
-          />
-        )}
-      </View>
-    );
-  };
-
   return (
     <SafeAreaView
       style={[
@@ -157,9 +123,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             copyMessage,
             deleteMessage,
           ]}
-          TypingIndicator={CustomTypingIndicator}
+          TypingIndicator={TypingIndicator}
           myMessageTheme={loggedInUsersMessageTheme}
-          MessageAvatar={CustomMessageAvatar}>
+          MessageAvatar={MessageAvatar}>
           <MessageList onThreadSelect={() => {}} />
           {/* <MessageInput /> */}
           <MessageInput Input={ChatInput} />
@@ -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

