Merge pull request #400 from ankit-thanekar007/tma-816-tabbar-issue

[TMA-816] :  Tab bar hidden from chat screen.

1 files changed, 21 insertions, 10 deletions

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;