React-native: keyboardDismissMode = "on-drag" on ScrollView not working with Android

[hakkikonu]

🐛 Bug Report

When scrolling in ScrollView when device keyboard active, on Android emulator keyboardDismissMode = "on-drag" does not close the keyboard

To Reproduce

<ScrollView keyboardDismissMode = "on-drag"> {content} </ScrollView>

Expected Behavior

Keyboard should close when scrolling on Android device.

Code Example

Minimal Expo example
https://snack.expo.io/@hakkikonu/scrollview-bug

Environment

react-native info output:
React Native Environment Info:
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 369.48 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 15, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 25.0.0, 26.0.2, 27.0.0, 28.0.3
System Images: android-15 | Intel x86 Atom, android-19 | ARM EABI v7a, android-19 | Intel x86 Atom, android-21 | Android TV ARM EABI v7a, android-21 | Android TV Intel x86 Atom, android-21 | Android Wear ARM EABI v7a, android-21 | Android Wear Intel x86 Atom, android-21 | ARM EABI v7a, android-21 | Intel x86 Atom, android-21 | Intel x86 Atom_64, android-21 | Google APIs ARM EABI v7a, android-21 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | ARM EABI v7a, android-22 | Intel x86 Atom, android-22 | Intel x86 Atom_64, android-22 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs Intel x86 Atom_64, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.4 => 0.58.4
npmGlobalPackages:
react-native-cli: 2.0.1

[kelset]

👋 there

is this issue still present on RN 59? You posted a repro (thanks for that!) but it's on Snack, which is currently based on latest Expo which is using 0.57.

[Collin3]

I'm seeing the same issue RN v0.59.5 on iOS and Android

[hakkikonu]

@kelset Yes, still I'm seeing

[ChiwanAhn]

RN 0.59.8 still has the same issue here on Android.

[kelset]

Ok thanks everyone - we just released the first 0.60 RC, could anyone try the repro with that version?

[immortalx]

@kelset Still happening on 0.60 RC, keyboard will dismiss only on tap but not on scroll.
I don't know if its related but i'm unable to show the keyboard with input.focus() as well.
On iOS everything works fine.

[MUllman]

my workaround for now is to call Keyboard.dismiss() in my onScroll function. Its definitely annoying

[williamliangwl]

Any plan for fixing this bug ?

[yasir-netlinks]

Hi, Im experiencing the issue too , im using 0.59.10 , any work arounds?

[andidev]

@yasir-netlinks
this is the current workaround

onScrollBeginDrag={Keyboard.dismiss}

[fungilation]

Repro on RN 0.60.5. FlatList with keyboardDismissMode: 'on-drag' which does dismiss keyboard on drag on iOS, but does not on Android (emulator API 26)

[kelset]

What about 61?

[fungilation]

Yes, 0.61.1 too. Still need to monkey patch it. (with patch-package)

[SinLucifer]

@kelset hello , I found why this issues happened, because of the fix in Fix for scrollview android #18785 @mistenkt added the code
this.state.isTouching, but it always return false...

[sivashik98]

@kelset Hello, I have this problem too, it would like that this problem was solved, thanks.

[benjaminhay]

Hi, same problem here. It still presents on React Native 0.61.5

[romanakash]

Same problem with 0.61.5, but can confirm the current workaround works. Will be nice if it's fixed

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[fungilation]

Not fixed, stupid bot

[lordAnari]

Not fixed. Need this to work. Any updates?

[kelset]

hello folks - it seems that this bug has been around for quite some time but no one attempted a PR to fix it. If you have time I'd recommend you create a PR with a proper fix and link it here.

[hakkikonu]

still not fixed for 0.62

[fabriziobertoglio1987]

TLDR

This functionality was never implemented for android and this is a feature request

LONG VERIONS

I think this functionality was never implemented on android

https://github.com/facebook/react-native/blob/9263eb5d3864a42925b699343db2c09cc8934ed0/ReactAndroid/src/main/java/com/facebook/react/views/drawer/ReactDrawerLayoutManager.java#L155

but somehow was included in the documents which should be updated..

The best way to have functionalities like this is using this workaround from @shyaniv7

const keyboardDismissProp = Platform.OS === "ios" ? { keyboardDismissMode: "on-drag" } : { onScrollEndDrag: Keyboard.dismiss };

as the workaround is easy to implement, while getting a pull request reviewed it is very hard... I would not consider writing a pr for this

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[fungilation]

No bot.

And no, there's already PR which fixes it: https://github.com/facebook/react-native/pull/26422

I'm using by monkey patching with patch-package, and it works. So merging that would be nice.

[raza2022]

@fungilation it's working fine for both Android and IOS ? and if you can share the patch as sample it would be nice, as I am using the patch-package too

[fungilation]

my react-native+0.63.2.patch based on #26422

---

diff --git a/node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js b/node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js
index c344ac4..0f34d3c 100644
--- a/node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js
+++ b/node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js
@@ -969,6 +969,16 @@ class ScrollView extends React.Component<Props, State> {
     }
   }

+  _handleBeginScroll = (e: ScrollEvent) => {
+    if (
+      this.props.keyboardDismissMode === 'on-drag' &&
+      Platform.OS === 'android'
+    ) {
+      dismissKeyboard();
+    }
+    this._scrollResponder.scrollResponderHandleScrollBeginDrag(e);
+  };
+
   _handleScroll = (e: ScrollEvent) => {
     if (__DEV__) {
       if (
@@ -985,14 +995,6 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
-    if (Platform.OS === 'android') {
-      if (
-        this.props.keyboardDismissMode === 'on-drag' &&
-        this.state.isTouching
-      ) {
-        dismissKeyboard();
-      }
-    }
     this._scrollResponder.scrollResponderHandleScroll(e);
   };

@@ -1175,8 +1177,7 @@ class ScrollView extends React.Component<Props, State> {
         .scrollResponderHandleResponderRelease,
       onResponderTerminationRequest: this._scrollResponder
         .scrollResponderHandleTerminationRequest,
-      onScrollBeginDrag: this._scrollResponder
-        .scrollResponderHandleScrollBeginDrag,
+      onScrollBeginDrag: this._handleBeginScroll,
       onScrollEndDrag: this._scrollResponder.scrollResponderHandleScrollEndDrag,
       onScrollShouldSetResponder: this._scrollResponder
         .scrollResponderHandleScrollShouldSetResponder,