[iOS][KeyboardAvoidingView] Using KeyboardAvoidingView inside a ScrollView causes the app the crash when focusing an input

[slauzinho]

Description

When KeyboardAvoidingView inside a ScrollView and focus a TextInput the app crashes (goes extremely slow).

This seems to only happen if the KeyboardAvoidingView needs to trigger the animation, if the ScrollView is small it works fine.

Testing with react native 0.72.9 the issue doesn't seem to happen

Steps to reproduce

1. install the app yarn ios
2. Using the simulator make sure the keyboard shows when entering a text input
3. Focus a text input and start typing on the keyboard
4. Dismiss the keyboard / click outside of the input
5. You will notice the app has now hung

React Native Version

0.73.4

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 127.84 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nvm/versions/node/v18.18.2/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.1 AI-211.7628.21.2111.8309675
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

### Stacktrace or Logs

```text
Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"235":{"module":"UIManager","method":"configureNextLayoutAnimation"},"238":{"module":"UIManager","method":"configureNextLayoutAnimation"},"241":{"module":"UIManager","method":"configureNextLayoutAnimation"},"244":{"module":"UIManager","method":"configureNextLayoutAnimation"},"247":{"module":"UIManager","method":"configureNextLayoutAnimation"},"250":{"module":"UIManager","method":"configureNextLayoutAnimation"},"253":{"module":"UIManager","method":"configureNextLayoutAnimation"},"256":{"module":"UIManager","method":"configureNextLayoutAnimation"},"259":{"module":"UIManager","method":"configureNextLayoutAnimation"},"262":{"module":"UIManager","method":"configureNextLayoutAnimation"},"265":{"module":"UIManager","method":"configureNextLayoutAnimation"},"268":{"module":"UIManager","method":"configureNextLayoutAnimation"},"271":{"module":"UIManager","method":"configureNextLayoutAnimation"},"274":{"module":"UIManager","method":"configureNextLayoutAnimation"},"277":{"module":"UIManager","method":"configureNextLayoutAnimation"},"280":{"module":"UIManager","method":"configureNextLayoutAnimation"},"283":{"module":"UIManager","method":"configureNextLayoutAnimation"},"286":{"module":"UIManager","method":"configureNextLayoutAnimation"},"289":{"module":"UIManager","method":"configureNextLayoutAnimation"},"292":{"module":"UIManager","method":"configureNextLayoutAnimation"},"295":{"module":"UIManager","method":"configureNextLayoutAnimation"},"298":{"module":"UIManager","method":"configureNextLayoutAnimation"},"301":{"module":"UIManager","method":"configureNextLayoutAnimation"},"304":{"module":"UIManager","method":"configureNextLayoutAnimation"},"307":{"module":"UIManager","method":"configureNextLayoutAnimation"},"310":{"module":"UIManager","method":"configureNextLayoutAnimation"},"313":{"module":"UIManager","method":"configureNextLayoutAnimation"},"316":{"module":"UIManager","method":"configureNextLayoutAnimation"},"319":{"module":"UIManager","method":"configureNextLayoutAnimation"},"322":{"module":"UIManager","method":"configureNextLayoutAnimation"},"325":{"module":"UIManager","method":"configureNextLayoutAnimation"},"328":{"module":"UIManager","method":"configureNextLayoutAnimation"},"331":{"module":"UIManager","method":"configureNextLayoutAnimation"},"334":{"module":"UIManager","method":"configureNextLayoutAnimation"},"337":{"module":"UIManager","method":"configureNextLayoutAnimation"},"340":{"module":"UIManager","method":"configureNextLayoutAnimation"},"343":{"module":"UIManager","method":"configureNextLayoutAnimation"},"346":{"module":"UIManager","method":"configureNextLayoutAnimation"},"349":{"module":"UIManager","method":"configureNextLayoutAnimation"},"352":{"module":"UIManager","method":"configureNextLayoutAnimation"},"355":{"module":"UIManager","method":"configureNextLayoutAnimation"},"358":{"module":"UIManager","method":"configureNextLayoutAnimation"},"361":{"module":"UIManager","method":"configureNextLayoutAnimation"},"364":{"module":"UIManager","method":"configureNextLayoutAnimation"},"367":{"module":"UIManager","method":"configureNextLayoutAnimation"},"370":{"module":"UIManager","method":"configureNextLayoutAnimation"},"373":{"module":"UIManager","method":"configureNextLayoutAnimation"},"376":{"module":"UIManager","method":"configureNextLayoutAnimation"},"379":{"module":"UIManager","method":"configureNextLayoutAnimation"},"382":{"module":"UIManager","method":"configureNextLayoutAnimation"},"...(truncated keys)...":451}

### Reproducer

https://github.com/slauzinho/KeyboardAvoidingViewExample

### Screenshots and Videos



https://github.com/facebook/react-native/assets/445345/72aa333e-f55a-446f-aea5-6b7615b8a4ca

[alfonsocj]

@lunaleaps I can reproduce this issue using the reproducer mentioned in the description https://github.com/slauzinho/KeyboardAvoidingViewExample.

[kokosky93]

@cortinico same issue.

Moving KeyboardAvoidingView over a ScrollView fixed my problem with crashing application when clicking on an input (IOS)

The crash was happening when publishing the app and on real device.

Guideline 2.1 - Performance - App Completeness

We discovered one or more bugs in your app. Specifically, login screen was unresponsive. Please review the details below and complete the next steps.

Review device details:

• Device type: iPad Air (5th generation)
• OS version: iOS 17.3.1

[Hasanraza786]

Kindly check this key in scrollview
overScrollMode='never'
@kokosky93

[slauzinho]

Kindly check this key in scrollview overScrollMode='never' @kokosky93

overScrollMode is an Android prop shouldn't really matter in this case

[kokosky93]

That's true. Setting overScrollMode didn't help.

[zaferatli]

i dont think its crash, its loop cause mis-use of element. in this case keyboardawarescroll in scrollview; when keyboard is open its trigger to keyboardawarescroll to extend bottom height and put keyboard down and thats circle trigger to scrollview because layout change and also scrollview extends layout and keyboardawarescroll again try to put keyboard to bottom so extend layout and again triggered scrollview.

Even i prevent this loop keyboardawarescroll its not working properly, can't arrange keyboard position and content because scrollview.

Related part KeyboardAvoidingView.js:

   // update bottom height for the first time or when the height is changed
    if (!oldFrame || oldFrame.height !== this._frame.height) {
      await this._updateBottomIfNecessary();
    }

[tomerh2001]

Any updates? Also experiencing this - v0.73.4

[Navaie]

Experiencing the same issue here! RN v0.73.4 as well. The issue indeed seems to be related to being inside a ScrollView, and on top having the behaviour set to padding, like so:
<KeyboardAvoidingView behavior="padding">

When setting the behaviour to position, there is no problem.
<KeyboardAvoidingView behavior="position">

Edit: added more details