FlatList wrapping KeyboardAvoidingView prevents scrolling of nested ScrollView on iOS

[liamjones]

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:

1. Tap the TextInput to open the keyboard
2. 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.

[github-actions[bot]]

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.

[liamjones]

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

[umerchaudhary34]

Any solution on this @liamjones

[github-actions[bot]]

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.

[liamjones]

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.

[react-native-bot]

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.

[liamjones]

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