react / react/react-native

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

Open
#42,939 63 comments 31 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

API: Keyboard Component: KeyboardAvoidingView Component: ScrollView Issue: Author Provided Repro Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked KeyboardAvoidingViewExample reproducer and reproduce the hang on iOS with React Native 0.73.4, using a KeyboardAvoidingView inside a ScrollView. Inspect the KeyboardAvoidingView and ScrollView interaction around the repeated UIManager.configureNextLayoutAnimation callbacks, and compare the behavior with React Native 0.72.9. Done means dismissing the keyboard no longer hangs the app or accumulates pending callbacks.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.