FlatList wrapping KeyboardAvoidingView prevents scrolling of nested ScrollView on iOS

Description

If you have a KeyboardAvoidingView wrapping a vertical ScrollView you can still scroll the ScrollView while the keyboard is present. This is as expected.

However, if the above setup is rendered as an item inside a FlatList (for example, one being used as a horizontal pager) then you can no longer scroll the vertical ScrollView when the keyboard is present.

This only applies to iOS, you can still scroll the vertical ScrollView on Android (and I've confirmed it's not to do with the differing behaviour being set on KeyboardAvoidingView across platforms).

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 122.88 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 10.24.0 - ~/.nvm/versions/node/v10.24.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v10.24.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/liam.jones/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.3
      System Images: android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1.2 4.1.2
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
    Python: 3.9.2 - /usr/local/opt/python/libexec/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Using the snack/repo below:

Tap the TextInput to open the keyboard
Attempt to scroll back up the view containing the TextInput while the keyboard is open

Expected Results

View scrolls vertically. This works on Android but not iOS.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@liam/github.com-living-with-keyboard-avoiding-view-inside-flatlist-on-ios-bug
https://github.com/living-with/keyboard-avoiding-view-inside-flatlist-on-ios-bug

You can change the insideFlatList constant at the top of the App.tsx to see how the behaviour changes once the KeyboardAvoidingView is placed inside a FlatList.

This issue is stale because it has been open 365 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Upgraded minimal repro to latest expo SDK, still happens (Expo SDK 44, RN 0.64.3): https://github.com/living-with/keyboard-avoiding-view-inside-flatlist-on-ios-bug

@liamjones

Any solution on this @liamjones

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@umerchaudhary34

Just rechecked this by updating the Snack to Expo 50 - still occurs.

@umerchaudhary34 Sorry, I missed your comment. No, I don't believe we have a workaround for this locally in our codebase atm.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Just rechecked this by updating the Snack to Expo 51 - still occurs.

still occurs on expo 52

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Remove stale tag - don't have time to recheck on the latest version right now

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

This issue was closed because it has been stalled for 7 days with no activity.

Navigation Menu

Repository navigation

FlatList wrapping KeyboardAvoidingView prevents scrolling of nested ScrollView on iOS #31101

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

FlatList wrapping KeyboardAvoidingView prevents scrolling of nested ScrollView on iOS #31101

Description

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

Activity

github-actions commented on Mar 5, 2022

liamjones commented on Mar 5, 2022

umerchaudhary34 commented on Sep 26, 2023

github-actions commented on Mar 25, 2024

liamjones commented on Mar 25, 2024

react-native-bot commented on Sep 22, 2024

liamjones commented on Sep 23, 2024

Risolu1 commented on Feb 11, 2025

react-native-bot commented on Aug 11, 2025

react-native-bot commented on Feb 7, 2026

liamjones commented on Feb 9, 2026

react-native-bot commented on Aug 9, 2026

react-native-bot commented on Aug 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions