diff --git a/packages/app/src/components/global-footer.tsx b/packages/app/src/components/global-footer.tsx index 0f3e2ea4f..3d1368ee1 100644 --- a/packages/app/src/components/global-footer.tsx +++ b/packages/app/src/components/global-footer.tsx @@ -15,6 +15,7 @@ import Animated, { withTiming, useSharedValue, } from "react-native-reanimated"; +import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller"; export function GlobalFooter() { const { theme } = useUnistyles(); @@ -31,6 +32,8 @@ export function GlobalFooter() { const showAgentControls = isAgentScreen && hasRegisteredControls; const transition = useSharedValue(isRealtimeMode ? 1 : 0); + const { height: keyboardHeight } = useReanimatedKeyboardAnimation(); + const bottomInset = insets.bottom; useEffect(() => { if (showAgentControls) { @@ -38,6 +41,18 @@ export function GlobalFooter() { } }, [isRealtimeMode, showAgentControls]); + const keyboardAnimatedStyle = useAnimatedStyle( + () => { + "worklet"; + const absoluteHeight = Math.abs(keyboardHeight.value); + const shift = Math.max(0, absoluteHeight - bottomInset); + return { + transform: [{ translateY: -shift }], + }; + }, + [bottomInset], + ); + const realtimeAnimatedStyle = useAnimatedStyle(() => { return { opacity: transition.value, @@ -54,13 +69,14 @@ export function GlobalFooter() { if (showAgentControls) { return ( - @@ -75,7 +91,7 @@ export function GlobalFooter() { - + ); } @@ -93,6 +109,7 @@ export function GlobalFooter() { paddingBottom: insets.bottom, height: FOOTER_HEIGHT + insets.bottom, }, + keyboardAnimatedStyle, ]} entering={FadeIn.duration(400)} exiting={FadeOut.duration(250)} @@ -113,6 +130,7 @@ export function GlobalFooter() { paddingBottom: insets.bottom, height: FOOTER_HEIGHT + insets.bottom, }, + keyboardAnimatedStyle, ]} >