Closed
Description
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
- Use a TextInput inside a ScrollView, with keyboardDismissMode set to 'on-drag'
- Layout the TextInput at the bottom of the screen.
- Click the text input
Expected Behavior
The keyboard should appear.
Actual Behavior
The keyboard appears and then disappears immediately.
Reproducible Demo
- react-native init test
- 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.