Unable to scroll AND swipe to dismiss keyboard using scrollview

[clfristoe]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I am creating a chat application and trying to follow iOS iMessage as closely as possible. I'm struggling with the keyboardDismissMode and keyboardShouldPersistTaps props.

What I'd like to be able to do is have the user scroll through a list of messages while the keyboard is visible but then swipe to dismiss the keyboard as well. Currently, I can either allow scrolling when the keyboard is up OR swipe to dismiss keyboard but not both.

React Native version:

System:
OS: macOS 10.15.2
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 53.13 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.5.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 25, 26, 27, 28, 29
Build Tools: 23.0.1, 25.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.0, 29.0.2, 29.0.3
System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-Q | Android TV Intel x86 Atom
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.6 => 0.60.6
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Example of scrolling but no keyboard dismiss:

Example of keyboard dismiss, but no scrolling:

Expected Results

I'd like to be able to scroll within the scrollview while the keyboard is open and swipe downwards to dismiss the keyboard.

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

For case where keyboard dismisses on swipe, but scrolling is not possible:
<KeyboardAvoidingView // Don't specify behavior for android due to a react native offset bug behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={50} enabled style={styles.keyboardViewStyle}> <View style={styles.listContainer}> <ScrollView scrollEnabled = {true} ref={scrollToRef} horizontal= {true} alwaysBounceHorizontal = {true} onScrollEndDrag = {onScrollEnd} showsHorizontalScrollIndicator={false} keyboardDismissMode={'interactive'} keyboardShouldPersistTaps={'handled'} > <List data={messageList} renderItem={messageListRenderItem} inverted={true} onEndReached={handleEndReached} onEndReachedThreshold={1} ListHeaderComponent={header} ListFooterComponent={pageLoadingComponent} showsVerticalScrollIndicator={false} /> </ScrollView> <ReplyView message={message} buttonDisabled={disable} onUpdateMessage={handleUpdateMessage} onPress={handlePress}/> </View> </KeyboardAvoidingView>
For case where scrolling is possible, no keyboard dismiss on swipe:
<KeyboardAvoidingView // Don't specify behavior for android due to a react native offset bug behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={50} enabled style={styles.keyboardViewStyle}> <View style={styles.listContainer}> <ScrollView scrollEnabled = {true} ref={scrollToRef} horizontal= {true} alwaysBounceHorizontal = {true} onScrollEndDrag = {onScrollEnd} showsHorizontalScrollIndicator={false} keyboardDismissMode={'interactive'} keyboardShouldPersistTaps={'always'} > <List data={messageList} renderItem={messageListRenderItem} inverted={true} onEndReached={handleEndReached} onEndReachedThreshold={1} ListHeaderComponent={header} ListFooterComponent={pageLoadingComponent} showsVerticalScrollIndicator={false} /> </ScrollView> <ReplyView message={message} buttonDisabled={disable} onUpdateMessage={handleUpdateMessage} onPress={handlePress}/> </View> </KeyboardAvoidingView>

[github-actions]

⚠️	Using Old Version
ℹ️	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the current release.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[chrisglein]

Can you tidy up that repro please? That snippet doesn't drop in well, even after trying to fix the formatting, as it has all sorts of dependencies. Can you produce a Snack or link to a repo?

[clfristoe]

@chrisglein Here is a snack with the general idea: https://snack.expo.io/N5qTzRNuN
This one shows the case where I can scroll to dismiss the keyboard, but I am unable to scroll through the list when the keyboard is open. I've added a comment with a quick code change to show the other experience.

[safaiyeh]

@clfristoe Thanks for the snack, yeah I see the issue you are mentioning.

[stale]

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.

[github-actions]

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