iOS/iPadOS keyboard is glitchy

[R44VC0RP]

Example:

ScreenRecording_12-20-2025.10-22-01_1.MP4

When you open/close the keyboard it is a bit glitchy.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Ticket Summary

Fix glitchy keyboard animations on iOS/iPadOS by replacing state-based layout calculations with fully animated values, ensuring smooth transitions when the keyboard opens and closes.

Observations

Codebase Summary

The app is a React Native chat interface built with Expo Router. The ChatScreen (src/screens/ChatScreen.tsx) uses manual keyboard event handling with Animated.timing() to track keyboard position, featuring an inverted FlatList for messages and a floating glass-morphism input bar. The current implementation mixes state-based boolean flags (keyboardVisible) with animated values (keyboardHeightAnim), causing layout components to update at different times and creating visual glitches. The scroll-to-bottom button correctly uses fully animated positioning and serves as the pattern to extend.

Assumptions

Assumption 1: How should keyboard height be tracked for layout calculations?

Options Considered:

• Store actual keyboard height in state from keyboard events and use it in state-based calculations
• Convert all keyboard-dependent layout calculations to use Animated.Value and animated composition

Chosen Option: Convert all keyboard-dependent layout calculations to use Animated.Value and animated composition

Rationale: This aligns with the existing pattern used by the scroll-to-bottom button (which works correctly) and eliminates the state/animation timing mismatch that causes glitches. Developers will have a single, consistent approach for all keyboard-related layout calculations.

Assumption 2: Should we keep the `keyboardVisible` boolean state?

Options Considered:

• Remove it entirely and derive visibility from keyboard height
• Keep it for conditional logic but remove from layout calculations
• Keep current usage

Chosen Option: Keep it for conditional logic but remove from layout calculations

Rationale: This maintains simple boolean checks where appropriate while ensuring layouts animate smoothly using Animated.Value. The keyboard height can be checked against zero for visibility without needing a separate boolean in layout code.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Capture Actual Keyboard Height and Create Animated Layout Values

This phase establishes the foundation for smooth animations by capturing real keyboard dimensions and converting layout calculations to use animated composition.

Task 1: Store Actual Keyboard Height from Events

Track the real keyboard height from keyboard events instead of using hardcoded approximations.

• Add state variable keyboardHeight (number) to store actual keyboard height from KeyboardEvent.endCoordinates.height
• Update keyboard event listeners (keyboardWillShow, keyboardDidShow) to set this state value when keyboard appears
• Update keyboard hide listeners to reset keyboardHeight to 0
• Keep keyboardVisible boolean for non-layout conditional logic but prepare to remove it from layout calculations

Task 2: Convert Input Area Height to Animated Value

Replace the state-based inputAreaHeight calculation with animated composition.

• Create inputAreaHeightAnim using Animated.add() to combine baseInputHeight with either keyboardHeightAnim or bottom inset
• Use Animated.cond() or interpolation to switch between keyboard height and bottom inset based on keyboardHeightAnim > 0
• Remove the existing state-based inputAreaHeight calculation that uses the hardcoded 300px approximation

Task 3: Create Animated Interpolation for Input Padding

Replace the boolean-based padding calculation with smooth animated interpolation.

• Convert input container paddingBottom to use interpolation on keyboardHeightAnim
• When keyboardHeightAnim is 0 (keyboard hidden), output insets.bottom + spacing.sm
• When keyboardHeightAnim > 0 (keyboard visible), output spacing.sm
• Remove the ternary condition keyboardVisible ? spacing.sm : insets.bottom + spacing.sm

🤖 Prompt for AI agents

Establish smooth keyboard animation foundation by capturing real keyboard
dimensions and converting layout calculations to animated values.

Add `keyboardHeight` state to store actual height from
`KeyboardEvent.endCoordinates.height`. Update keyboard show/hide listeners to
set this value (0 when hidden).

Create `inputAreaHeightAnim` using `Animated.add()` combining `baseInputHeight`
with conditional keyboard height or bottom inset. Remove hardcoded 300px
approximation.

Convert input container `paddingBottom` to animated interpolation on
`keyboardHeightAnim`: output `insets.bottom + spacing.sm` when 0, `spacing.sm`
when > 0. Remove boolean-based ternary condition.

Phase 2: Update Component Layouts to Use Animated Styles

This phase applies the animated values to component layouts, ensuring all keyboard-dependent UI elements transition smoothly together.

Task 1: Convert FlatList to Use Animated Padding

Enable animated padding for the message list to move smoothly with keyboard transitions.

• Replace FlatList with Animated.FlatList (both support the same props)
• Update contentContainerStyle to use paddingBottom: inputAreaHeightAnim instead of the state-based inputAreaHeight
• Keep paddingTop: headerHeight unchanged (not keyboard-dependent)
• Ensure keyboardShouldPersistTaps="handled" and keyboardDismissMode="interactive" remain configured

Task 2: Apply Animated Style to Input Container Padding

Connect the animated padding interpolation to the input container view.

• Update the input container Animated.View style to use the new animated paddingBottom interpolation
• Remove the conditional style object that switches based on keyboardVisible
• Ensure the bottom: inputBottomOffset animated style remains intact (already working correctly)

Task 3: Verify Consistent Animation Timing

Ensure all animated values use the same duration and easing for synchronized movement.

• Confirm all animations use the duration from KeyboardEvent.duration || 250
• Verify all animations use the same easing function (currently Easing.out(Easing.ease))
• Test that FlatList padding, input container position, and scroll button all move in sync

🤖 Prompt for AI agents

Apply animated values to component layouts for synchronized keyboard
transitions.

Replace `FlatList` with `Animated.FlatList`. Update `contentContainerStyle` to
use `paddingBottom: inputAreaHeightAnim` instead of state-based value. Keep
`paddingTop: headerHeight` and keyboard props unchanged.

Update input container `Animated.View` to use animated `paddingBottom`
interpolation. Remove conditional style based on `keyboardVisible`. Preserve
`bottom: inputBottomOffset` animation.

Verify all animations use consistent timing: duration from
`KeyboardEvent.duration || 250` and `Easing.out(Easing.ease)`. Test synchronized
movement of FlatList padding, input container, and scroll button.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Establish smooth keyboard animation foundation by capturing real keyboard
dimensions and converting layout calculations to animated values.

Add `keyboardHeight` state to store actual height from
`KeyboardEvent.endCoordinates.height`. Update keyboard show/hide listeners to
set this value (0 when hidden).

Create `inputAreaHeightAnim` using `Animated.add()` combining `baseInputHeight`
with conditional keyboard height or bottom inset. Remove hardcoded 300px
approximation.

Convert input container `paddingBottom` to animated interpolation on
`keyboardHeightAnim`: output `insets.bottom + spacing.sm` when 0, `spacing.sm`
when > 0. Remove boolean-based ternary condition.
===============================================================================

Task: 2

Apply animated values to component layouts for synchronized keyboard
transitions.

Replace `FlatList` with `Animated.FlatList`. Update `contentContainerStyle` to
use `paddingBottom: inputAreaHeightAnim` instead of state-based value. Keep
`paddingTop: headerHeight` and keyboard props unchanged.

Update input container `Animated.View` to use animated `paddingBottom`
interpolation. Remove conditional style based on `keyboardVisible`. Preserve
`bottom: inputBottomOffset` animation.

Verify all animations use consistent timing: duration from
`KeyboardEvent.duration || 250` and `Easing.out(Easing.ease)`. Test synchronized
movement of FlatList padding, input container, and scroll button.

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!

[ShpetimA]

@R44VC0RP If you're interested try looking into this https://kirillzyusko.github.io/react-native-keyboard-controller/ library to fix the issues you have with keyboard avoiding views.

It should be able to handle all your needs.