Skip to content

Commit cb6ec7c

Browse files
gwmccullfacebook-github-bot
authored andcommittedNov 7, 2017
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 #16479 Differential Revision: D6261005 Pulled By: hramos fbshipit-source-id: 7e0bcfb0e7cb6bb419964bd0b02cf52c9347c608
1 parent 1b71e03 commit cb6ec7c

File tree

1 file changed

+18
-14
lines changed

1 file changed

+18
-14
lines changed
 

‎Libraries/Components/Keyboard/KeyboardAvoidingView.js

+18-14
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,19 @@ type KeyboardChangeEvent = {
4343
const viewRef = 'VIEW';
4444

4545
/**
46-
* It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
47-
* It can automatically adjust either its position or bottom padding based on the position of the keyboard.
46+
* This is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
47+
* It can automatically adjust either its height, position or bottom padding based on the position of the keyboard.
4848
*/
4949
const KeyboardAvoidingView = createReactClass({
5050
displayName: 'KeyboardAvoidingView',
5151
mixins: [TimerMixin],
5252

5353
propTypes: {
5454
...ViewPropTypes,
55+
/**
56+
* Specify how the `KeyboardAvoidingView` will react to the presence of
57+
* the keyboard. It can adjust the height, position or bottom padding of the view
58+
*/
5559
behavior: PropTypes.oneOf(['height', 'position', 'padding']),
5660

5761
/**
@@ -61,7 +65,7 @@ const KeyboardAvoidingView = createReactClass({
6165

6266
/**
6367
* This is the distance between the top of the user screen and the react native view,
64-
* may be non-zero in some use cases.
68+
* may be non-zero in some use cases. The default value is 0.
6569
*/
6670
keyboardVerticalOffset: PropTypes.number.isRequired,
6771
},
@@ -81,7 +85,7 @@ const KeyboardAvoidingView = createReactClass({
8185
subscriptions: ([]: Array<EmitterSubscription>),
8286
frame: (null: ?ViewLayout),
8387

84-
relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
88+
_relativeKeyboardHeight(keyboardFrame: ScreenRect): number {
8589
const frame = this.frame;
8690
if (!frame || !keyboardFrame) {
8791
return 0;
@@ -94,14 +98,14 @@ const KeyboardAvoidingView = createReactClass({
9498
return Math.max(frame.y + frame.height - keyboardY, 0);
9599
},
96100

97-
onKeyboardChange(event: ?KeyboardChangeEvent) {
101+
_onKeyboardChange(event: ?KeyboardChangeEvent) {
98102
if (!event) {
99103
this.setState({bottom: 0});
100104
return;
101105
}
102106

103107
const {duration, easing, endCoordinates} = event;
104-
const height = this.relativeKeyboardHeight(endCoordinates);
108+
const height = this._relativeKeyboardHeight(endCoordinates);
105109

106110
if (duration && easing) {
107111
LayoutAnimation.configureNext({
@@ -115,7 +119,7 @@ const KeyboardAvoidingView = createReactClass({
115119
this.setState({bottom: height});
116120
},
117121

118-
onLayout(event: ViewLayoutEvent) {
122+
_onLayout(event: ViewLayoutEvent) {
119123
this.frame = event.nativeEvent.layout;
120124
},
121125

@@ -132,12 +136,12 @@ const KeyboardAvoidingView = createReactClass({
132136
componentWillMount() {
133137
if (Platform.OS === 'ios') {
134138
this.subscriptions = [
135-
Keyboard.addListener('keyboardWillChangeFrame', this.onKeyboardChange),
139+
Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
136140
];
137141
} else {
138142
this.subscriptions = [
139-
Keyboard.addListener('keyboardDidHide', this.onKeyboardChange),
140-
Keyboard.addListener('keyboardDidShow', this.onKeyboardChange),
143+
Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
144+
Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
141145
];
142146
}
143147
},
@@ -161,7 +165,7 @@ const KeyboardAvoidingView = createReactClass({
161165
heightStyle = {height: this.frame.height - this.state.bottom, flex: 0};
162166
}
163167
return (
164-
<View ref={viewRef} style={[style, heightStyle]} onLayout={this.onLayout} {...props}>
168+
<View ref={viewRef} style={[style, heightStyle]} onLayout={this._onLayout} {...props}>
165169
{children}
166170
</View>
167171
);
@@ -171,7 +175,7 @@ const KeyboardAvoidingView = createReactClass({
171175
const { contentContainerStyle } = this.props;
172176

173177
return (
174-
<View ref={viewRef} style={style} onLayout={this.onLayout} {...props}>
178+
<View ref={viewRef} style={style} onLayout={this._onLayout} {...props}>
175179
<View style={[contentContainerStyle, positionStyle]}>
176180
{children}
177181
</View>
@@ -181,14 +185,14 @@ const KeyboardAvoidingView = createReactClass({
181185
case 'padding':
182186
const paddingStyle = {paddingBottom: this.state.bottom};
183187
return (
184-
<View ref={viewRef} style={[style, paddingStyle]} onLayout={this.onLayout} {...props}>
188+
<View ref={viewRef} style={[style, paddingStyle]} onLayout={this._onLayout} {...props}>
185189
{children}
186190
</View>
187191
);
188192

189193
default:
190194
return (
191-
<View ref={viewRef} onLayout={this.onLayout} style={style} {...props}>
195+
<View ref={viewRef} onLayout={this._onLayout} style={style} {...props}>
192196
{children}
193197
</View>
194198
);

0 commit comments

Comments
 (0)
Please sign in to comment.