mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 19:44:13 +00:00
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:
parent
1b71e03932
commit
cb6ec7c321
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user