3 files changed, 28 insertions, 17 deletions

diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index d2cfcb5d..1df5c2da 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -9,6 +9,7 @@ import {TabsGradient} from '../../components';
 import {ChannelPreview, MessagesHeader} from '../../components/messages';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
+import EmptyContentView from '../../components/common/EmptyContentView';
 import {
   LocalAttachmentType,
   LocalChannelType,
@@ -99,6 +100,9 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
               sort={{last_message_at: -1}}
               maxUnreadCount={99}
               Preview={ChannelPreview}
+              EmptyStateIndicator={() => {
+                return <EmptyContentView viewType={'ChatList'} />;
+              }}
             />
           </View>
         </Chat>
diff --git a/src/screens/chat/ChatResultsCell.tsx b/src/screens/chat/ChatResultsCell.tsx
index e1eb97dd..14062810 100644
--- a/src/screens/chat/ChatResultsCell.tsx
+++ b/src/screens/chat/ChatResultsCell.tsx
@@ -1,13 +1,13 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useContext, useEffect, useState} from 'react';
-import {Alert, Image, StyleSheet, Text, View} from 'react-native';
+import {Alert, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {ChatContext} from '../../App';
+import {Avatar} from '../../components';
 import {ERROR_FAILED_TO_CREATE_CHANNEL} from '../../constants/strings';
 import {loadImageFromURL} from '../../services';
 import {ProfilePreviewType, UserType} from '../../types';
 import {createChannel, normalize, SCREEN_WIDTH} from '../../utils';
-import {defaultUserProfile} from '../../utils/users';
 
 interface ChatResults {
   profileData: ProfilePreviewType;
@@ -58,11 +58,7 @@ const ChatResultsCell: React.FC<ChatResults> = ({
       <TouchableOpacity
         onPress={createChannelIfNotPresentAndNavigate}
         style={styles.cellContainer}>
-        <Image
-          defaultSource={defaultUserProfile()}
-          source={{uri: avatar}}
-          style={styles.imageContainer}
-        />
+        <Avatar style={styles.imageContainer} uri={avatar} />
         <View style={[styles.initialTextContainer, styles.multiText]}>
           <Text style={styles.initialTextStyle}>{`@${username}`}</Text>
           <Text style={styles.secondaryTextStyle}>
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 5874b8b6..a8e975eb 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,6 +1,6 @@
-import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
+import {useFocusEffect} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext, useEffect} from 'react';
+import React, {useCallback, useContext, useEffect} from 'react';
 import {StyleSheet} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
@@ -9,8 +9,8 @@ import {
   DeepPartial,
   MessageInput,
   MessageList,
-  useAttachmentPickerContext,
   Theme,
+  useAttachmentPickerContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import {
@@ -19,12 +19,11 @@ import {
   DateHeader,
   MessageAvatar,
   MessageFooter,
-  TabsGradient,
   TypingIndicator,
 } from '../../components';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
-import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils';
+import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -33,9 +32,8 @@ interface ChatScreenProps {
 /*
  * Screen that displays all of the user's active conversations.
  */
-const ChatScreen: React.FC<ChatScreenProps> = () => {
+const ChatScreen: React.FC<ChatScreenProps> = ({navigation}) => {
   const {channel, chatClient} = useContext(ChatContext);
-  const tabbarHeight = useBottomTabBarHeight();
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
   const chatTheme: DeepPartial<Theme> = {
@@ -129,12 +127,25 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     setTopInset(insets.top + HeaderHeight);
   });
 
+  //Function to get the parent TabBar navigator and setting the option for this screen.
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
+
   return (
     <SafeAreaView
       style={[
         styles.container,
-        // unable to figure out the padding issue, a hacky solution
-        {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
+        styles.textBoxStyles, // Update : removed hacky soln for a common height. Original : unable to figure out the padding issue, a hacky solution {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
       ]}>
       <ChatHeader screenType={ScreenType.Chat} />
       <Chat client={chatClient} style={chatTheme}>
@@ -157,7 +168,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           <MessageInput Input={ChatInput} />
         </Channel>
       </Chat>
-      <TabsGradient />
     </SafeAreaView>
   );
 };
@@ -167,6 +177,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
   },
+  textBoxStyles: {paddingBottom: 60},
 });
 
 export default ChatScreen;