improve docs for KeyboardAvoidingView

Summary:
The documentation for `KeyboardAvoidingView` was pretty thin. Tried to fill it out more and corrected a couple words.

n/a

[DOCS] [ENHANCEMENT] [KeyboardAvoidingView] - Improve the documentation for the props for KeyboardAvoidingView

* **Who does this affect**: Users that are manually calling the methods on KeyboardingAvoidingView.
* **How to migrate**: Add an underscore before the name of the method
* **Why make this breaking change**: These methods are not meant to be public. For example, the exposed `onLayout` function is not a prop that accepts a function like is typical of the rest of React Native but is the internal method that is called when the component's onLayout is triggered.
* **Severity (number of people affected x effort)**: Low
Closes https://github.com/facebook/react-native/pull/16479

Differential Revision: D6261005

Pulled By: hramos

fbshipit-source-id: 7e0bcfb0e7cb6bb419964bd0b02cf52c9347c608
This commit is contained in:
Garrett McCullough 2017-11-07 11:34:20 -08:00 committed by Facebook Github Bot
parent 1b71e03932
commit cb6ec7c321

View File

@ -43,8 +43,8 @@ type KeyboardChangeEvent = {
const viewRef = 'VIEW'; const viewRef = 'VIEW';
/** /**
* It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. * This is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
* It can automatically adjust either its position or bottom padding based on the position of the keyboard. * It can automatically adjust either its height, position or bottom padding based on the position of the keyboard.
*/ */
const KeyboardAvoidingView = createReactClass({ const KeyboardAvoidingView = createReactClass({
displayName: 'KeyboardAvoidingView', displayName: 'KeyboardAvoidingView',
@ -52,6 +52,10 @@ const KeyboardAvoidingView = createReactClass({
propTypes: { propTypes: {
...ViewPropTypes, ...ViewPropTypes,
/**
* Specify how the `KeyboardAvoidingView` will react to the presence of
* the keyboard. It can adjust the height, position or bottom padding of the view
*/
behavior: PropTypes.oneOf(['height', 'position', 'padding']), behavior: PropTypes.oneOf(['height', 'position', 'padding']),
/** /**
@ -61,7 +65,7 @@ const KeyboardAvoidingView = createReactClass({
/** /**
* This is the distance between the top of the user screen and the react native view, * This is the distance between the top of the user screen and the react native view,
* may be non-zero in some use cases. * may be non-zero in some use cases. The default value is 0.
*/ */
keyboardVerticalOffset: PropTypes.number.isRequired, keyboardVerticalOffset: PropTypes.number.isRequired,
}, },
@ -81,7 +85,7 @@ const KeyboardAvoidingView = createReactClass({
subscriptions: ([]: Array<EmitterSubscription>), subscriptions: ([]: Array<EmitterSubscription>),
frame: (null: ?ViewLayout), frame: (null: ?ViewLayout),
relativeKeyboardHeight(keyboardFrame: ScreenRect): number { _relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
const frame = this.frame; const frame = this.frame;
if (!frame || !keyboardFrame) { if (!frame || !keyboardFrame) {
return 0; return 0;
@ -94,14 +98,14 @@ const KeyboardAvoidingView = createReactClass({
return Math.max(frame.y + frame.height - keyboardY, 0); return Math.max(frame.y + frame.height - keyboardY, 0);
}, },
onKeyboardChange(event: ?KeyboardChangeEvent) { _onKeyboardChange(event: ?KeyboardChangeEvent) {
if (!event) { if (!event) {
this.setState({bottom: 0}); this.setState({bottom: 0});
return; return;
} }
const {duration, easing, endCoordinates} = event; const {duration, easing, endCoordinates} = event;
const height = this.relativeKeyboardHeight(endCoordinates); const height = this._relativeKeyboardHeight(endCoordinates);
if (duration && easing) { if (duration && easing) {
LayoutAnimation.configureNext({ LayoutAnimation.configureNext({
@ -115,7 +119,7 @@ const KeyboardAvoidingView = createReactClass({
this.setState({bottom: height}); this.setState({bottom: height});
}, },
onLayout(event: ViewLayoutEvent) { _onLayout(event: ViewLayoutEvent) {
this.frame = event.nativeEvent.layout; this.frame = event.nativeEvent.layout;
}, },
@ -132,12 +136,12 @@ const KeyboardAvoidingView = createReactClass({
componentWillMount() { componentWillMount() {
if (Platform.OS === 'ios') { if (Platform.OS === 'ios') {
this.subscriptions = [ this.subscriptions = [
Keyboard.addListener('keyboardWillChangeFrame', this.onKeyboardChange), Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
]; ];
} else { } else {
this.subscriptions = [ this.subscriptions = [
Keyboard.addListener('keyboardDidHide', this.onKeyboardChange), Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
Keyboard.addListener('keyboardDidShow', this.onKeyboardChange), Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
]; ];
} }
}, },
@ -161,7 +165,7 @@ const KeyboardAvoidingView = createReactClass({
heightStyle = {height: this.frame.height - this.state.bottom, flex: 0}; heightStyle = {height: this.frame.height - this.state.bottom, flex: 0};
} }
return ( return (
<View ref={viewRef} style={[style, heightStyle]} onLayout={this.onLayout} {...props}> <View ref={viewRef} style={[style, heightStyle]} onLayout={this._onLayout} {...props}>
{children} {children}
</View> </View>
); );
@ -171,7 +175,7 @@ const KeyboardAvoidingView = createReactClass({
const { contentContainerStyle } = this.props; const { contentContainerStyle } = this.props;
return ( return (
<View ref={viewRef} style={style} onLayout={this.onLayout} {...props}> <View ref={viewRef} style={style} onLayout={this._onLayout} {...props}>
<View style={[contentContainerStyle, positionStyle]}> <View style={[contentContainerStyle, positionStyle]}>
{children} {children}
</View> </View>
@ -181,14 +185,14 @@ const KeyboardAvoidingView = createReactClass({
case 'padding': case 'padding':
const paddingStyle = {paddingBottom: this.state.bottom}; const paddingStyle = {paddingBottom: this.state.bottom};
return ( return (
<View ref={viewRef} style={[style, paddingStyle]} onLayout={this.onLayout} {...props}> <View ref={viewRef} style={[style, paddingStyle]} onLayout={this._onLayout} {...props}>
{children} {children}
</View> </View>
); );
default: default:
return ( return (
<View ref={viewRef} onLayout={this.onLayout} style={style} {...props}> <View ref={viewRef} onLayout={this._onLayout} style={style} {...props}>
{children} {children}
</View> </View>
); );