fixed image picker position

2 files changed, 18 insertions, 73 deletions

diff --git a/src/App.tsx b/src/App.tsx
index b8d64461..217f0627 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import {NavigationContainer} from '@react-navigation/native';
 import React, {useState} from 'react';
 import {Provider} from 'react-redux';
 import {StreamChat} from 'stream-chat';
-import {OverlayProvider} from 'stream-chat-react-native';
 import {STREAM_CHAT_API} from './constants';
 import {navigationRef} from './RootNavigation';
 import Routes from './routes';
@@ -39,9 +38,7 @@ const App = () => {
     <Provider store={store}>
       <NavigationContainer ref={navigationRef}>
         <ChatContext.Provider value={{channel, setChannel, chatClient}}>
-          <OverlayProvider>
-            <Routes />
-          </OverlayProvider>
+          <Routes />
         </ChatContext.Provider>
       </NavigationContainer>
     </Provider>
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 682906ee..957b1189 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,24 +1,21 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext} from 'react';
-import {Image, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {useStore} from 'react-redux';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
   Channel,
   Chat,
   MessageInput,
   MessageList,
   OverlayProvider,
-  useMessageContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import ChatHeader from '../../components/messages/ChatHeader';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
-import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
+import {HeaderHeight, isIPhoneX, SCREEN_WIDTH} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -29,9 +26,8 @@ interface ChatScreenProps {
  */
 const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
-  const state: RootState = useStore().getState();
-  const loggedInUserId = state.user.user.userId;
   const tabbarHeight = useBottomTabBarHeight();
+  const insets = useSafeAreaInsets();
 
   const chatTheme = {
     messageList: {
@@ -41,78 +37,30 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     },
   };
 
-  const isOwnMessage = (message) => {
-    if (message.user.id === loggedInUserId) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  const OwnMessageBubble = ({message}) => (
-    <View style={[styles.mainBubbleContainer, styles.mainOwnBubbleContainer]}>
-      <View style={styles.ownBubbleContainer}>
-        <View style={styles.ownBubble}>
-          <Text style={styles.messageText}>{message.text}</Text>
-        </View>
-      </View>
-      {/* TODO: Timestamp */}
-    </View>
-  );
-
-  const UserXMessageBubble = ({message}) => (
-    <View style={[styles.mainBubbleContainer, styles.mainUserXBubbleContainer]}>
-      <Image
-        style={styles.avatar}
-        source={
-          message.user.thumbnail_url
-            ? {uri: message.user.thumbnail_url}
-            : require('../../assets/images/avatar-placeholder.png')
-        }
-      />
-      <View style={styles.userXBubble}>
-        <Text style={styles.messageText}>{message.text}</Text>
-      </View>
-      {/* TODO: Timestamp */}
-    </View>
-  );
-
-  const CustomMessageUIComponent = () => {
-    const {message} = useMessageContext();
-    if (isOwnMessage(message)) {
-      return <OwnMessageBubble message={message} />;
-    } else {
-      return <UserXMessageBubble message={message} />;
-    }
-  };
-
   return (
-    <SafeAreaView
-      style={[
-        styles.container,
-        // 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}>
-        <OverlayProvider topInset={0} bottomInset={0}>
+    <OverlayProvider bottomInset={80} topInset={insets.top + HeaderHeight}>
+      <SafeAreaView
+        style={[
+          styles.container,
+          // 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}>
           <Channel
             channel={channel}
             keyboardVerticalOffset={0}
             OverlayReactionList={() => null}
-            // MessageSimple={CustomMessageUIComponent}
             messageActions={({copyMessage, deleteMessage}) => [
               copyMessage,
               deleteMessage,
-            ]}
-            // AttachButton={() => null}
-          >
+            ]}>
             <MessageList onThreadSelect={() => {}} />
             <MessageInput />
           </Channel>
-        </OverlayProvider>
-      </Chat>
-    </SafeAreaView>
+        </Chat>
+      </SafeAreaView>
+    </OverlayProvider>
   );
 };