Unexpected keyboard dismiss in ScrollView when soft keyboard appears.

[jiaminglu]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Scanning folders for symlinks in /Users/jiaminglu/test/node_modules (20ms)

Environment:
OS: macOS Sierra 10.12.6
Node: 8.2.1
Yarn: 0.27.5
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4408382

Packages:
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.5 => 0.49.5

Steps to Reproduce

1. Use a TextInput inside a ScrollView, with keyboardDismissMode set to 'on-drag'
2. Layout the TextInput at the bottom of the screen.
3. Click the text input

Expected Behavior

The keyboard should appear.

Actual Behavior

The keyboard appears and then disappears immediately.

Reproducible Demo

1. react-native init test
2. replace App.js with:

import React, { Component } from 'react';
import { View, TextInput, ScrollView, Dimensions } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView style={{flex: 1}} keyboardDismissMode='on-drag'>
        <View  style={{flex: 1}}>
          <TextInput defaultValue="Hello world" style={{
            marginTop: Dimensions.get('window').height - 50,
            height: 40,
            borderColor: 'black',
            borderWidth: 1,
          }}/>
        </View>
      </ScrollView>
    );
  }
}

Cause

When the TextInput clicked and soft keyboard appeared, the Android system pushes up the underlying EditText, and then the ScrollView detects a scroll event, dismissed the keyboard according to keyboardDismissMode="on-drag", which I think should be handled on onScrollBeginDrag instead.

[RonnieRen]

#16889

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[darylalexjohnson]

I'm curious about the fix for this issue. ScrollViews on Android with the keyboardDismissMode set to on-drag, no longer dismiss the keyboard. For example

import { View, Text, FlatList, StyleSheet, TextInput } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Click Here' };
  }

  keyExtractor = (item, index) => `${item.id}_${index}`;

  _renderItem = ({ item, index }) => (
    <View style={{
      paddingVertical: 30,
      paddingHorizontal: 10,
      backgroundColor: 'red',
      marginBottom: 2
    }}>
      <Text style={{
        fontSize: 16,
        color: 'white'
      }}
      >
        {item.key}
      </Text>
    </View>
  );

  render() {
    return (
      <View style={[styles.container, { marginTop: 50 }]}>
        <View style={styles.container} contentContainerStyle={styles.contentContainer}>
          <TextInput
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({text})}
            value={this.state.text}
          />
          <FlatList
            data={
              Array.from({length: 40}, () => {
                return {key: Math.floor(Math.random() * 40)}
              })}
            keyboardDismissMode="on-drag"
            extraData={this.state}
            keyExtractor={this.keyExtractor}
            renderItem={this._renderItem}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },contentContainer: {
    paddingTop: 30,
  }
});

I would expect that the keyboard would dismiss on drag for Android as it does in iOS. The this.state.isTouching always returns false.