[🐴] Move `KeyboardAvoidingView` up to the main screen (#3953)

src/screens/Messages/Conversation/MessagesList.tsx

@@ -1,16 +1,12 @@
 import React, {useCallback, useRef} from 'react'
 import {FlatList, View} from 'react-native'
-import {
+import {useKeyboardHandler} from 'react-native-keyboard-controller'
-  KeyboardAvoidingView,
-  useKeyboardHandler,
-} from 'react-native-keyboard-controller'
 import {runOnJS, useSharedValue} from 'react-native-reanimated'
 import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/reanimated2/hook/commonTypes'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AppBskyRichtextFacet, RichText} from '@atproto/api'
 
 import {shortenLinks} from '#/lib/strings/rich-text-manip'
-import {isIOS, isNative} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
 import {useConvo} from '#/state/messages/convo'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
 import {useAgent} from '#/state/session'
@@ -19,7 +15,6 @@ import {isWeb} from 'platform/detection'
 import {List} from 'view/com/util/List'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
-import {atoms as a, useBreakpoints} from '#/alf'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -199,10 +194,6 @@ export function MessagesList() {
     })
   }, [isMomentumScrolling])
 
-  const {bottom: bottomInset, top: topInset} = useSafeAreaInsets()
-  const {gtMobile} = useBreakpoints()
-  const bottomBarHeight = gtMobile ? 0 : isIOS ? 40 : 60
-
   // This is only used inside the useKeyboardHandler because the worklet won't work with a ref directly.
   const scrollToEndNow = React.useCallback(() => {
     flatListRef.current?.scrollToEnd({animated: false})
@@ -216,11 +207,7 @@ export function MessagesList() {
   })
 
   return (
-    <KeyboardAvoidingView
+    <>
-      style={[a.flex_1, {marginBottom: bottomInset + bottomBarHeight}]}
-      keyboardVerticalOffset={isIOS ? topInset : 0}
-      behavior="padding"
-      contentContainerStyle={a.flex_1}>
       {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
       <ScrollProvider onScroll={onScroll} onMomentumEnd={onMomentumEnd}>
         <List
@@ -252,6 +239,6 @@ export function MessagesList() {
         />
       </ScrollProvider>
       <MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />
-    </KeyboardAvoidingView>
+    </>
   )
 }

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,6 +100,11 @@ function Inner() {
 
   return (
     <KeyboardProvider>
+      <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]}>
@@ -121,6 +131,7 @@ function Inner() {
             )}
           </View>
         </CenteredView>
+      </KeyboardAvoidingView>
     </KeyboardProvider>
   )
 }