feat: restore keyboard animation for footer controls
Added useReanimatedKeyboardAnimation to GlobalFooter to animate the entire footer (status bar + controls) up when keyboard opens. Uses translateY transform to shift footer above keyboard with smooth native timing. Applied to all footer variants: - Agent screen with registered controls - Realtime mode on non-agent screens - Button mode on non-agent screens Maintains all recent fixes (portal architecture, tight spacing, smooth transitions) while restoring the keyboard avoidance behavior. Implementation by Codex. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -15,6 +15,7 @@ import Animated, {
|
|||||||
withTiming,
|
withTiming,
|
||||||
useSharedValue,
|
useSharedValue,
|
||||||
} from "react-native-reanimated";
|
} from "react-native-reanimated";
|
||||||
|
import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
|
||||||
|
|
||||||
export function GlobalFooter() {
|
export function GlobalFooter() {
|
||||||
const { theme } = useUnistyles();
|
const { theme } = useUnistyles();
|
||||||
@@ -31,6 +32,8 @@ export function GlobalFooter() {
|
|||||||
const showAgentControls = isAgentScreen && hasRegisteredControls;
|
const showAgentControls = isAgentScreen && hasRegisteredControls;
|
||||||
|
|
||||||
const transition = useSharedValue(isRealtimeMode ? 1 : 0);
|
const transition = useSharedValue(isRealtimeMode ? 1 : 0);
|
||||||
|
const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
|
||||||
|
const bottomInset = insets.bottom;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (showAgentControls) {
|
if (showAgentControls) {
|
||||||
@@ -38,6 +41,18 @@ export function GlobalFooter() {
|
|||||||
}
|
}
|
||||||
}, [isRealtimeMode, showAgentControls]);
|
}, [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(() => {
|
const realtimeAnimatedStyle = useAnimatedStyle(() => {
|
||||||
return {
|
return {
|
||||||
opacity: transition.value,
|
opacity: transition.value,
|
||||||
@@ -54,13 +69,14 @@ export function GlobalFooter() {
|
|||||||
|
|
||||||
if (showAgentControls) {
|
if (showAgentControls) {
|
||||||
return (
|
return (
|
||||||
<View
|
<Animated.View
|
||||||
style={[
|
style={[
|
||||||
styles.container,
|
styles.container,
|
||||||
{
|
{
|
||||||
paddingBottom: insets.bottom,
|
paddingBottom: insets.bottom,
|
||||||
height: FOOTER_HEIGHT + insets.bottom,
|
height: FOOTER_HEIGHT + insets.bottom,
|
||||||
},
|
},
|
||||||
|
keyboardAnimatedStyle,
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<View style={styles.content}>
|
<View style={styles.content}>
|
||||||
@@ -75,7 +91,7 @@ export function GlobalFooter() {
|
|||||||
<RealtimeControls />
|
<RealtimeControls />
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</Animated.View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,6 +109,7 @@ export function GlobalFooter() {
|
|||||||
paddingBottom: insets.bottom,
|
paddingBottom: insets.bottom,
|
||||||
height: FOOTER_HEIGHT + insets.bottom,
|
height: FOOTER_HEIGHT + insets.bottom,
|
||||||
},
|
},
|
||||||
|
keyboardAnimatedStyle,
|
||||||
]}
|
]}
|
||||||
entering={FadeIn.duration(400)}
|
entering={FadeIn.duration(400)}
|
||||||
exiting={FadeOut.duration(250)}
|
exiting={FadeOut.duration(250)}
|
||||||
@@ -113,6 +130,7 @@ export function GlobalFooter() {
|
|||||||
paddingBottom: insets.bottom,
|
paddingBottom: insets.bottom,
|
||||||
height: FOOTER_HEIGHT + insets.bottom,
|
height: FOOTER_HEIGHT + insets.bottom,
|
||||||
},
|
},
|
||||||
|
keyboardAnimatedStyle,
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<View style={styles.centeredButtonContainer}>
|
<View style={styles.centeredButtonContainer}>
|
||||||
|
|||||||
Reference in New Issue
Block a user