Merge branch 'main' into chore/229-migrate-swmansion-bottom-sheet

Bring in the scroll-down-button overlap fix (#251). Resolve the ChatScreen
import conflict: keep AppBottomSheetRef (swmansion bottom-sheet migration) and
adopt scroll-down's useReanimatedKeyboardAnimation, dropping the now-unused
KeyboardStickyView and @gorhom BottomSheetModal.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kfaracik

__mocks__/react-native-reanimated.ts

@@ -32,6 +32,19 @@ const Animated = {
   createAnimatedComponent,
 };
 
+type AnimationBuilder = Record<
+  string,
+  (...args: unknown[]) => AnimationBuilder
+>;
+
+const makeAnimationBuilder = (): AnimationBuilder => {
+  const builder = new Proxy(
+    {},
+    { get: () => () => builder }
+  ) as AnimationBuilder;
+  return builder;
+};
+
 module.exports = {
   __esModule: true,
   default: Animated,
@@ -73,4 +86,9 @@ module.exports = {
   interpolateColor: (val: any, _r: any, outputRange: any) => outputRange[0],
   runOnJS: (fn: any) => fn,
   runOnUI: (fn: any) => fn,
+  configureReanimatedLogger: () => {},
+  LinearTransition: makeAnimationBuilder(),
+  FadeIn: makeAnimationBuilder(),
+  FadeInDown: makeAnimationBuilder(),
+  FadeOut: makeAnimationBuilder(),
 };

components/chat-screen/ChatBar.tsx

@@ -15,7 +15,12 @@ import {
   Keyboard,
   Platform,
 } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  LinearTransition,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { type PasteEventPayload, TextInputWrapper } from 'expo-paste-input';
 import AttachmentSheet from '../bottomSheets/AttachmentSheet';
 import { useAttachment, Attachment } from '../../hooks/useAttachment';
@@ -33,6 +38,11 @@ import AttachmentThumbnail from './AttachmentThumbnail';
 import { AudioManager } from 'react-native-audio-api';
 import Toast from 'react-native-toast-message';
 
+const BAR_GROW_DURATION = 200;
+const BAR_GROW_EASING = Easing.out(Easing.ease);
+const BAR_GROW_LAYOUT =
+  LinearTransition.duration(BAR_GROW_DURATION).easing(BAR_GROW_EASING);
+
 interface Props {
   chatId: number | null;
   onSend: (
@@ -94,6 +104,7 @@ const ChatBar = ({
   } = useAttachment();
 
   const defaultBarHeight = useRef(0);
+  const prevBarHeight = useRef(0);
   const textInputRef = useRef<RNTextInput>(null);
   // iOS-only: bump the TextInput key to force a remount when a prompt
   // suggestion is set programmatically. iOS doesn't re-fire onLayout
@@ -136,9 +147,16 @@ const ChatBar = ({
       }
       const baseline = defaultBarHeight.current || height;
       const delta = height - baseline;
-      extraContentPadding.set(Math.max(0, delta));
+      extraContentPadding.set(
+        withTiming(Math.max(0, delta), {
+          duration: BAR_GROW_DURATION,
+          easing: BAR_GROW_EASING,
+        })
+      );
       onHeightChange?.(height);
-      if (delta > 0) {
+      const grew = height > prevBarHeight.current;
+      prevBarHeight.current = height;
+      if (delta > 0 && grew) {
         onBarGrow?.();
       }
     },
@@ -266,7 +284,11 @@ const ChatBar = ({
   }
 
   return (
-    <View style={containerStyle} onLayout={handleBarLayoutForPadding}>
+    <Animated.View
+      style={containerStyle}
+      onLayout={handleBarLayoutForPadding}
+      layout={BAR_GROW_LAYOUT}
+    >
       {model?.isDownloaded && (
         <>
           {!hasMessages && (
@@ -330,7 +352,7 @@ const ChatBar = ({
           />
         </>
       )}
-    </View>
+    </Animated.View>
   );
 };
 
@@ -382,7 +404,9 @@ const createStyles = (theme: Theme) =>
       fontSize: fontSizes.md,
       // lineHeight on Android causes typed text to be taller than the
       // placeholder, making the ChatBar jump on first keystroke.
-      ...(Platform.OS === 'ios' && { lineHeight: lineHeights.md }),
+      ...(Platform.OS === 'ios'
+        ? { lineHeight: lineHeights.md }
+        : { includeFontPadding: false }),
       fontFamily: fontFamily.regular,
       textAlignVertical: 'center',
       color: theme.text.onChatBar,

components/chat-screen/ChatScreen.tsx

@@ -8,7 +8,7 @@ import React, {
 import { Keyboard, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import type { AppBottomSheetRef } from '../bottomSheets/AppBottomSheet';
-import { KeyboardStickyView } from 'react-native-keyboard-controller';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -109,12 +109,20 @@ export default function ChatScreen({
   const { theme } = useTheme();
   const styles = useMemo(() => createStyles(theme), [theme]);
 
-  const stickyOffset = useMemo(
-    () => ({ closed: 0, opened: theme.insets.bottom }),
-    [theme.insets.bottom]
-  );
   const scrollBottomOffset = theme.insets.bottom;
 
+  const { height: keyboardHeight, progress: keyboardProgress } =
+    useReanimatedKeyboardAnimation();
+  const insetsBottom = theme.insets.bottom;
+  const chatBarStickyStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateY:
+          keyboardHeight.value + keyboardProgress.value * insetsBottom,
+      },
+    ],
+  }));
+
   const { settings: chatSettings, setSetting } = useChatSettings(chatId);
 
   const enabledSources =
@@ -349,7 +357,7 @@ export default function ChatScreen({
           chatBarSpacerHeight > 0 && { height: chatBarSpacerHeight },
         ]}
       >
-        <KeyboardStickyView offset={stickyOffset} style={styles.chatBarSticky}>
+        <Animated.View style={[styles.chatBarSticky, chatBarStickyStyle]}>
           <ChatBar
             chatId={chatId}
             onSend={handleSendMessage}
@@ -371,11 +379,11 @@ export default function ChatScreen({
             }}
             onBarGrow={() => {
               setTimeout(() => {
-                messagesRef.current?.scrollToEnd();
+                messagesRef.current?.scrollToEndIfAtBottom();
               }, 100);
             }}
           />
-        </KeyboardStickyView>
+        </Animated.View>
       </View>
 
       <ModelSelectSheet

components/chat-screen/Messages.tsx

@@ -17,7 +17,10 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { KeyboardChatScrollView } from 'react-native-keyboard-controller';
+import {
+  KeyboardChatScrollView,
+  useReanimatedKeyboardAnimation,
+} from 'react-native-keyboard-controller';
 import Reanimated, {
   useSharedValue,
   useAnimatedStyle,
@@ -33,6 +36,7 @@ import ChevronDown from '../../assets/icons/chevron-down.svg';
 export interface MessagesHandle {
   onMessageSent: () => void;
   scrollToEnd: () => void;
+  scrollToEndIfAtBottom: () => void;
 }
 
 interface Props {
@@ -83,6 +87,20 @@ const Messages = ({
     opacity: opacity.get(),
   }));
 
+  const { height: keyboardHeight, progress: keyboardProgress } =
+    useReanimatedKeyboardAnimation();
+  const insetsBottom = theme.insets.bottom;
+  const scrollButtonAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateY:
+          -extraContentPadding.value +
+          keyboardHeight.value +
+          keyboardProgress.value * insetsBottom,
+      },
+    ],
+  }));
+
   // Re-arm the initial scroll when the chat history is cleared (e.g.
   // navigating away via useFocusEffect in the chat route sets
   // messageHistory to [] while reloading). This ensures that returning
@@ -166,6 +184,11 @@ const Messages = ({
       scrollToEnd: () => {
         scrollRef.current?.scrollToEnd({ animated: true });
       },
+      scrollToEndIfAtBottom: () => {
+        if (isAtBottomRef.current) {
+          scrollRef.current?.scrollToEnd({ animated: true });
+        }
+      },
       onMessageSent: () => {
         // Ensure the view is visible (covers new-chat case where the
         // initial-scroll effect hasn't fired because there were no
@@ -378,17 +401,24 @@ const Messages = ({
       </KeyboardChatScrollView>
 
       {showScrollButton && (
-        <TouchableOpacity
-          style={styles.scrollToBottomButton}
-          onPress={scrollToBottom}
-          activeOpacity={0.8}
+        <Reanimated.View
+          style={[
+            styles.scrollToBottomButtonContainer,
+            scrollButtonAnimatedStyle,
+          ]}
         >
-          <ChevronDown
-            width={20}
-            height={20}
-            style={{ color: theme.text.primary }}
-          />
-        </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.scrollToBottomButton}
+            onPress={scrollToBottom}
+            activeOpacity={0.8}
+          >
+            <ChevronDown
+              width={20}
+              height={20}
+              style={{ color: theme.text.primary }}
+            />
+          </TouchableOpacity>
+        </Reanimated.View>
       )}
     </Reanimated.View>
   );
@@ -407,10 +437,12 @@ const createStyles = (theme: Theme) =>
       paddingTop: 16,
       paddingBottom: 8,
     },
-    scrollToBottomButton: {
+    scrollToBottomButtonContainer: {
       position: 'absolute',
       bottom: 16,
       right: 16,
+    },
+    scrollToBottomButton: {
       width: 36,
       height: 36,
       borderRadius: 18,