ChatScreen: Fix blank strip between compose box and keyboard on iOS

Fixes: #3370

src/chat/ChatScreen.js

@@ -2,6 +2,7 @@
 import React, { useCallback, useContext } from 'react';
 import type { Node } from 'react';
 import { useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelector, useDispatch } from '../react-redux';
 import type { RouteProp } from '../react-navigation';
@@ -196,7 +197,24 @@ export default function ChatScreen(props: Props): Node {
   );
 
   return (
-    <KeyboardAvoider style={[componentStyles.screen, { backgroundColor }]} behavior="padding">
+    <KeyboardAvoider
+      style={[componentStyles.screen, { backgroundColor }]}
+      behavior="padding"
+      keyboardVerticalOffset={
+        // This is a slight misuse of this prop: this value is not (to quote
+        // from the jsdoc) "How much the top of `KeyboardAvoider`'s layout
+        // *parent* is displaced downward from the top of the screen." That
+        // value would be zero.
+        //
+        // This addresses an issue where the strip that covers the bottom
+        // inset would scoot up above the keyboard with the rest of the
+        // compose box when the keyboard opens, leaving a blank strip of
+        // wasted space ( #3370). We haven't yet found a better way to avoid
+        // this, while still letting `ComposeBox` control how it occupies
+        // the inset (like how our header components occupy the top inset).
+        -useSafeAreaInsets().bottom
+      }
+    >
       <ChatNavBar narrow={narrow} editMessage={editMessage} />
       <UnreadNotice narrow={narrow} />
       {(() => {