From bf16cccd49e95dc46725444a40d88948e5d0088a Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <31964049+isekovanic@users.noreply.github.com>
Date: Thu, 27 Aug 2026 18:05:09 +0200
Subject: [PATCH] fix: disable LayoutAnimation in KeyboardCompatibleView
 (#3789)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 🎯 Goal

It would appear that in `react-native-reanimated` version `4.6.0` and
onwards, the swallowing of `LayoutAnimation.configureNext` in Reanimated
has been fixed. However, this now causes our keyboard animations to
struggle with the Reanimated animation due to the fact that they are
both trying to animate the layout.

I somehow missed this in the RN 0.87 upgrade, but it should be fixed
here.

To address it, we disable the `LayoutAnimation` in our
`KeyboardCompatibleView` because:

1. It never worked pre `4.6.0` of `reanimated`
2. Where it does work, it's interfering with the actual layout animation

So this change basically makes sure we have the old behaviour again.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android
---
 .../KeyboardCompatibleView.tsx                    | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx b/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx
index 21559788de..78576ac1f6 100644
--- a/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx
+++ b/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx
@@ -9,7 +9,6 @@ import {
   KeyboardAvoidingViewProps,
   KeyboardEvent,
   KeyboardMetrics,
-  LayoutAnimation,
   LayoutChangeEvent,
   LayoutRectangle,
   NativeEventSubscription,
@@ -205,7 +204,7 @@ export class KeyboardCompatibleView extends React.Component<
       return;
     }
 
-    const { duration, easing, endCoordinates } = this._keyboardEvent;
+    const { endCoordinates } = this._keyboardEvent;
     const height = await this._relativeKeyboardHeight(endCoordinates);
 
     if (this._bottom === height) {
@@ -213,18 +212,6 @@ export class KeyboardCompatibleView extends React.Component<
     }
 
     this._setBottom(height);
-
-    const enabled = this.props.enabled ?? true;
-    if (enabled && duration && easing) {
-      LayoutAnimation.configureNext({
-        // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
-        duration: duration > 10 ? duration : 10,
-        update: {
-          duration: duration > 10 ? duration : 10,
-          type: LayoutAnimation.Types[easing] || 'keyboard',
-        },
-      });
-    }
   };
 
   _handleAppStateChange = (nextAppState: AppStateStatus) => {