native: reduce space within/between chat messages, fix keyboard offset in thread view

packages/ui/src/components/Channel/index.tsx

@@ -8,7 +8,6 @@ import { UploadInfo } from '@tloncorp/shared/dist/api';
 import * as db from '@tloncorp/shared/dist/db';
 import { JSONContent, Story } from '@tloncorp/shared/dist/urbit';
 import { useCallback, useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AnimatePresence } from 'tamagui';
 
@@ -31,6 +30,7 @@ import { FloatingActionButton } from '../FloatingActionButton';
 import { GalleryPost } from '../GalleryPost';
 import { GroupPreviewSheet } from '../GroupPreviewSheet';
 import { Icon } from '../Icon';
+import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import { MessageInput } from '../MessageInput';
 import { NotebookPost } from '../NotebookPost';
 import { ChannelFooter } from './ChannelFooter';
@@ -199,13 +199,7 @@ export function Channel({
                         showSpinner={isLoadingPosts}
                         showMenuButton={!isChatChannel}
                       />
-                      <KeyboardAvoidingView
-                        behavior={
-                          Platform.OS === 'ios' ? 'padding' : 'position'
-                        }
-                        style={{ flex: 1 }}
-                        contentContainerStyle={{ flex: 1 }}
-                      >
+                      <KeyboardAvoidingView>
                         <YStack alignItems="center" flex={1}>
                           <AnimatePresence>
                             {showBigInput ? (

packages/ui/src/components/ChatMessage/ChatMessage.tsx

@@ -100,12 +100,12 @@ const ChatMessage = ({
     <YStack
       onLongPress={handleLongPress}
       key={post.id}
-      gap="$l"
-      paddingVertical="$m"
+      gap="$s"
+      paddingVertical="$xs"
       paddingRight="$l"
     >
       {showAuthor ? (
-        <View paddingLeft="$l">
+        <View paddingLeft="$l" paddingTop="$s">
           <AuthorRow
             author={post.author}
             authorId={post.authorId}

packages/ui/src/components/KeyboardAvoidingView.tsx

@@ -0,0 +1,22 @@
+import { Platform } from 'expo-modules-core';
+import { ReactNode } from 'react';
+import {
+  KeyboardAvoidingViewProps,
+  KeyboardAvoidingView as RNKeyboardAvoidingView,
+} from 'react-native';
+
+export default function KeyboardAvoidingView({
+  children,
+  ...props
+}: { children: ReactNode } & KeyboardAvoidingViewProps) {
+  return (
+    <RNKeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'position'}
+      style={{ flex: 1 }}
+      contentContainerStyle={{ flex: 1 }}
+      {...props}
+    >
+      {children}
+    </RNKeyboardAvoidingView>
+  );
+}

packages/ui/src/components/PostScreenView.tsx

@@ -4,7 +4,6 @@ import type * as db from '@tloncorp/shared/dist/db';
 import * as urbit from '@tloncorp/shared/dist/urbit';
 import { Story } from '@tloncorp/shared/dist/urbit';
 import { useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { CalmProvider, CalmState, ContactsProvider } from '../contexts';
@@ -18,6 +17,7 @@ import UploadedImagePreview from './Channel/UploadedImagePreview';
 import { ChatMessage } from './ChatMessage';
 import { NotebookDetailView } from './DetailView';
 import GalleryDetailView from './DetailView/GalleryDetailView';
+import KeyboardAvoidingView from './KeyboardAvoidingView';
 import { MessageInput } from './MessageInput';
 
 export function PostScreenView({
@@ -79,7 +79,11 @@ export function PostScreenView({
     <CalmProvider calmSettings={calmSettings}>
       <ContactsProvider contacts={contacts}>
         <ReferencesProvider>
-          <View backgroundColor="$background" flex={1}>
+          <View
+            paddingBottom={isChatChannel ? bottom : 'unset'}
+            backgroundColor="$background"
+            flex={1}
+          >
             <YStack flex={1} backgroundColor={'$background'}>
               <ChannelHeader
                 channel={channel}
@@ -93,12 +97,7 @@ export function PostScreenView({
                 currentUserId={currentUserId}
                 mode={headerMode}
               />
-              <KeyboardAvoidingView
-                //TODO: Standardize this component, account for tab bar in a better way
-                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                // keyboardVerticalOffset={70}
-                style={{ flex: 1 }}
-              >
+              <KeyboardAvoidingView>
                 {parentPost && channel.type === 'gallery' && (
                   <GalleryDetailView
                     post={parentPost}
@@ -144,7 +143,7 @@ export function PostScreenView({
                   posts &&
                   channel &&
                   isChatChannel && (
-                    <View paddingBottom={bottom} flex={1}>
+                    <View flex={1}>
                       <Scroller
                         inverted
                         renderItem={ChatMessage}
@@ -161,28 +160,23 @@ export function PostScreenView({
                     </View>
                   )
                 )}
-                {negotiationMatch && !editingPost && channel && canWrite && (
-                  <View
-                    position={isChatChannel ? undefined : 'absolute'}
-                    backgroundColor="$background"
-                    bottom={bottom}
-                    width="100%"
-                  >
-                    {isChatChannel ? (
-                      <MessageInput
-                        shouldBlur={inputShouldBlur}
-                        setShouldBlur={setInputShouldBlur}
-                        send={sendReply}
-                        channelId={channel.id}
-                        uploadInfo={uploadInfo}
-                        groupMembers={groupMembers}
-                        storeDraft={storeDraft}
-                        clearDraft={clearDraft}
-                        getDraft={getDraft}
-                      />
-                    ) : null}
-                  </View>
-                )}
+                {negotiationMatch &&
+                  !editingPost &&
+                  channel &&
+                  canWrite &&
+                  isChatChannel && (
+                    <MessageInput
+                      shouldBlur={inputShouldBlur}
+                      setShouldBlur={setInputShouldBlur}
+                      send={sendReply}
+                      channelId={channel.id}
+                      uploadInfo={uploadInfo}
+                      groupMembers={groupMembers}
+                      storeDraft={storeDraft}
+                      clearDraft={clearDraft}
+                      getDraft={getDraft}
+                    />
+                  )}
                 {!negotiationMatch && channel && canWrite && (
                   <View
                     position={isChatChannel ? undefined : 'absolute'}