mirror of
https://github.com/status-im/react-native.git
synced 2025-01-16 12:34:17 +00:00
d56530d7d5
Summary: Right now, the ScrollView's keyboard hiding behavior is either all or nothing: Hide the keyboard on any tap, or do nothing ever. This PR introduces a third mode to keyboardShouldPersistTaps which is much closer to what I consider should be the default. In the new behavior, the tap responding is done in the bubbling phase (instead of the capture phase like =true). As a result, a child can handle the tap. If no child does, then the ScrollView will receive the tap and will hide the keyboard. As a result, changing TextInput focus works as a user expects, with a single tap and without keyboard hiding. But taping on Text or on the empty part of the ScrollView hides the keyboard and removes the focus. You can view the behavior in a monkey patched ScrollView demo on rnplay: https://rnplay.org/apps/E90UYw https://rnplay.org/apps/UGzhKA In order to have a uniform props set, i added 3 values to the keyboardShouldPersistTaps: 'never' and 'always' are the same as false and true. 'handled' is the new behavior. I don't Closes https://github.com/facebook/react-native/pull/10628 Differential Revision: D4294945 Pulled By: ericvicenti fbshipit-source-id: 1a753014156cac1a23fabfa8e1faa9a768868ef2
94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* The examples provided by Facebook are for non-commercial testing and
|
|
* evaluation purposes only.
|
|
*
|
|
* Facebook reserves all rights not expressly granted.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
|
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
|
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
|
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*
|
|
* @providesModule UIExplorerPage
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('react');
|
|
var ReactNative = require('react-native');
|
|
var {
|
|
ScrollView,
|
|
StyleSheet,
|
|
View,
|
|
} = ReactNative;
|
|
|
|
var UIExplorerTitle = require('./UIExplorerTitle');
|
|
|
|
class UIExplorerPage extends React.Component {
|
|
props: {
|
|
noScroll?: boolean,
|
|
noSpacer?: boolean,
|
|
};
|
|
|
|
static propTypes = {
|
|
noScroll: React.PropTypes.bool,
|
|
noSpacer: React.PropTypes.bool,
|
|
};
|
|
|
|
render() {
|
|
var ContentWrapper;
|
|
var wrapperProps = {};
|
|
if (this.props.noScroll) {
|
|
ContentWrapper = (View: ReactClass<any>);
|
|
} else {
|
|
ContentWrapper = (ScrollView: ReactClass<any>);
|
|
// $FlowFixMe found when converting React.createClass to ES6
|
|
wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
|
|
wrapperProps.keyboardShouldPersistTaps = 'handled';
|
|
wrapperProps.keyboardDismissMode = 'interactive';
|
|
}
|
|
var title = this.props.title ?
|
|
<UIExplorerTitle title={this.props.title} /> :
|
|
null;
|
|
var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
|
|
return (
|
|
<View style={styles.container}>
|
|
{title}
|
|
<ContentWrapper
|
|
style={styles.wrapper}
|
|
{...wrapperProps}>
|
|
{
|
|
// $FlowFixMe found when converting React.createClass to ES6
|
|
this.props.children}
|
|
{spacer}
|
|
</ContentWrapper>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: '#e9eaed',
|
|
flex: 1,
|
|
},
|
|
spacer: {
|
|
height: 270,
|
|
},
|
|
wrapper: {
|
|
flex: 1,
|
|
paddingTop: 10,
|
|
},
|
|
});
|
|
|
|
module.exports = UIExplorerPage;
|