Unable to scroll AND swipe to dismiss keyboard using scrollview

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® Core™ 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>

[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.

[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.