about summary refs log tree commit diff
path: root/src/screens/Messages/Conversation/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens/Messages/Conversation/index.tsx')
-rw-r--r--src/screens/Messages/Conversation/index.tsx65
1 files changed, 38 insertions, 27 deletions
diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx
index 686a0f5d4..fc4df0a24 100644
--- a/src/screens/Messages/Conversation/index.tsx
+++ b/src/screens/Messages/Conversation/index.tsx
@@ -1,6 +1,8 @@
 import React, {useCallback} from 'react'
 import {TouchableOpacity, View} from 'react-native'
 import {KeyboardProvider} from 'react-native-keyboard-controller'
+import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AppBskyActorDefs} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
@@ -12,7 +14,7 @@ import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {BACK_HITSLOP} from 'lib/constants'
-import {isWeb} from 'platform/detection'
+import {isIOS, isWeb} from 'platform/detection'
 import {ConvoProvider, useConvo} from 'state/messages/convo'
 import {ConvoStatus} from 'state/messages/convo/types'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
@@ -25,7 +27,6 @@ import {ListMaybePlaceholder} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ClipClopGate} from '../gate'
-
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'MessagesConversation'
@@ -60,6 +61,10 @@ function Inner() {
 
   const [hasInitiallyRendered, setHasInitiallyRendered] = React.useState(false)
 
+  const {bottom: bottomInset, top: topInset} = useSafeAreaInsets()
+  const {gtMobile} = useBreakpoints()
+  const bottomBarHeight = gtMobile ? 0 : isIOS ? 40 : 60
+
   // HACK: Because we need to scroll to the bottom of the list once initial items are added to the list, we also have
   // to take into account that scrolling to the end of the list on native will happen asynchronously. This will cause
   // a little flicker when the items are first renedered at the top and immediately scrolled to the bottom. to prevent
@@ -95,32 +100,38 @@ function Inner() {
 
   return (
     <KeyboardProvider>
-      <CenteredView style={a.flex_1} sideBorders>
-        <Header profile={convo.recipients?.[0]} />
-        <View style={[a.flex_1]}>
-          {convo.status !== ConvoStatus.Ready ? (
-            <ListMaybePlaceholder isLoading />
-          ) : (
-            <MessagesList />
-          )}
-          {!hasInitiallyRendered && (
-            <View
-              style={[
-                a.absolute,
-                a.z_10,
-                a.w_full,
-                a.h_full,
-                a.justify_center,
-                a.align_center,
-                t.atoms.bg,
-              ]}>
-              <View style={[{marginBottom: 75}]}>
-                <Loader size="xl" />
+      <KeyboardAvoidingView
+        style={[a.flex_1, {marginBottom: bottomInset + bottomBarHeight}]}
+        keyboardVerticalOffset={isIOS ? topInset : 0}
+        behavior="padding"
+        contentContainerStyle={a.flex_1}>
+        <CenteredView style={a.flex_1} sideBorders>
+          <Header profile={convo.recipients?.[0]} />
+          <View style={[a.flex_1]}>
+            {convo.status !== ConvoStatus.Ready ? (
+              <ListMaybePlaceholder isLoading />
+            ) : (
+              <MessagesList />
+            )}
+            {!hasInitiallyRendered && (
+              <View
+                style={[
+                  a.absolute,
+                  a.z_10,
+                  a.w_full,
+                  a.h_full,
+                  a.justify_center,
+                  a.align_center,
+                  t.atoms.bg,
+                ]}>
+                <View style={[{marginBottom: 75}]}>
+                  <Loader size="xl" />
+                </View>
               </View>
-            </View>
-          )}
-        </View>
-      </CenteredView>
+            )}
+          </View>
+        </CenteredView>
+      </KeyboardAvoidingView>
     </KeyboardProvider>
   )
 }