@@ -43,15 +43,19 @@ type KeyboardChangeEvent = {
43
43
const viewRef = 'VIEW' ;
44
44
45
45
/**
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.
48
48
*/
49
49
const KeyboardAvoidingView = createReactClass ( {
50
50
displayName : 'KeyboardAvoidingView' ,
51
51
mixins : [ TimerMixin ] ,
52
52
53
53
propTypes : {
54
54
...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
+ */
55
59
behavior : PropTypes . oneOf ( [ 'height' , 'position' , 'padding' ] ) ,
56
60
57
61
/**
@@ -61,7 +65,7 @@ const KeyboardAvoidingView = createReactClass({
61
65
62
66
/**
63
67
* 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.
65
69
*/
66
70
keyboardVerticalOffset : PropTypes . number . isRequired ,
67
71
} ,
@@ -81,7 +85,7 @@ const KeyboardAvoidingView = createReactClass({
81
85
subscriptions : ( [ ] : Array < EmitterSubscription > ) ,
82
86
frame : ( null : ?ViewLayout ) ,
83
87
84
- relativeKeyboardHeight ( keyboardFrame : ScreenRect ) : number {
88
+ _relativeKeyboardHeight ( keyboardFrame : ScreenRect ) : number {
85
89
const frame = this . frame ;
86
90
if ( ! frame || ! keyboardFrame ) {
87
91
return 0 ;
@@ -94,14 +98,14 @@ const KeyboardAvoidingView = createReactClass({
94
98
return Math . max ( frame . y + frame . height - keyboardY , 0 ) ;
95
99
} ,
96
100
97
- onKeyboardChange ( event : ?KeyboardChangeEvent ) {
101
+ _onKeyboardChange ( event : ?KeyboardChangeEvent ) {
98
102
if ( ! event ) {
99
103
this . setState ( { bottom : 0 } ) ;
100
104
return ;
101
105
}
102
106
103
107
const { duration, easing, endCoordinates} = event ;
104
- const height = this . relativeKeyboardHeight ( endCoordinates ) ;
108
+ const height = this . _relativeKeyboardHeight ( endCoordinates ) ;
105
109
106
110
if ( duration && easing ) {
107
111
LayoutAnimation . configureNext ( {
@@ -115,7 +119,7 @@ const KeyboardAvoidingView = createReactClass({
115
119
this . setState ( { bottom : height } ) ;
116
120
} ,
117
121
118
- onLayout ( event : ViewLayoutEvent ) {
122
+ _onLayout ( event : ViewLayoutEvent ) {
119
123
this . frame = event . nativeEvent . layout ;
120
124
} ,
121
125
@@ -132,12 +136,12 @@ const KeyboardAvoidingView = createReactClass({
132
136
componentWillMount ( ) {
133
137
if ( Platform . OS === 'ios' ) {
134
138
this . subscriptions = [
135
- Keyboard . addListener ( 'keyboardWillChangeFrame' , this . onKeyboardChange ) ,
139
+ Keyboard . addListener ( 'keyboardWillChangeFrame' , this . _onKeyboardChange ) ,
136
140
] ;
137
141
} else {
138
142
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 ) ,
141
145
] ;
142
146
}
143
147
} ,
@@ -161,7 +165,7 @@ const KeyboardAvoidingView = createReactClass({
161
165
heightStyle = { height : this . frame . height - this . state . bottom , flex : 0 } ;
162
166
}
163
167
return (
164
- < View ref = { viewRef } style = { [ style , heightStyle ] } onLayout = { this . onLayout } { ...props } >
168
+ < View ref = { viewRef } style = { [ style , heightStyle ] } onLayout = { this . _onLayout } { ...props } >
165
169
{ children }
166
170
</ View >
167
171
) ;
@@ -171,7 +175,7 @@ const KeyboardAvoidingView = createReactClass({
171
175
const { contentContainerStyle } = this . props ;
172
176
173
177
return (
174
- < View ref = { viewRef } style = { style } onLayout = { this . onLayout } { ...props } >
178
+ < View ref = { viewRef } style = { style } onLayout = { this . _onLayout } { ...props } >
175
179
< View style = { [ contentContainerStyle , positionStyle ] } >
176
180
{ children }
177
181
</ View >
@@ -181,14 +185,14 @@ const KeyboardAvoidingView = createReactClass({
181
185
case 'padding' :
182
186
const paddingStyle = { paddingBottom : this . state . bottom } ;
183
187
return (
184
- < View ref = { viewRef } style = { [ style , paddingStyle ] } onLayout = { this . onLayout } { ...props } >
188
+ < View ref = { viewRef } style = { [ style , paddingStyle ] } onLayout = { this . _onLayout } { ...props } >
185
189
{ children }
186
190
</ View >
187
191
) ;
188
192
189
193
default :
190
194
return (
191
- < View ref = { viewRef } onLayout = { this . onLayout } style = { style } { ...props } >
195
+ < View ref = { viewRef } onLayout = { this . _onLayout } style = { style } { ...props } >
192
196
{ children }
193
197
</ View >
194
198
) ;
0 commit comments