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')

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