瀏覽代碼

rn,invite: fix bottom padding on AddPeopleDialog on Android

master
Saúl Ibarra Corretgé 5 年之前
父節點
當前提交
a9da047d3a

+ 30
- 2
react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js 查看文件

67
 
67
 
68
 type State = AbstractState & {
68
 type State = AbstractState & {
69
 
69
 
70
+    /**
71
+     * Boolean to show if an extra padding needs to be added to the bottom bar.
72
+     */
73
+    bottomPadding: boolean,
74
+
70
     /**
75
     /**
71
      * State variable to keep track of the search field value.
76
      * State variable to keep track of the search field value.
72
      */
77
      */
94
     defaultState = {
99
     defaultState = {
95
         addToCallError: false,
100
         addToCallError: false,
96
         addToCallInProgress: false,
101
         addToCallInProgress: false,
102
+        bottomPadding: false,
97
         fieldValue: '',
103
         fieldValue: '',
98
         inviteItems: [],
104
         inviteItems: [],
99
         searchInprogress: false,
105
         searchInprogress: false,
194
                             </View>
200
                             </View>
195
                             <TextInput
201
                             <TextInput
196
                                 autoCorrect = { false }
202
                                 autoCorrect = { false }
197
-                                autoFocus = { true }
203
+                                autoFocus = { false }
198
                                 clearButtonMode = 'always' // iOS only
204
                                 clearButtonMode = 'always' // iOS only
205
+                                onBlur = { this._onFocused(false) }
199
                                 onChangeText = { this._onTypeQuery }
206
                                 onChangeText = { this._onTypeQuery }
207
+                                onFocus = { this._onFocused(true) }
200
                                 placeholder = {
208
                                 placeholder = {
201
                                     this.props.t(`inviteDialog.${placeholderKey}`)
209
                                     this.props.t(`inviteDialog.${placeholderKey}`)
202
                                 }
210
                                 }
223
                                 renderItem = { this._renderItem } />
231
                                 renderItem = { this._renderItem } />
224
                         </View>
232
                         </View>
225
                     </SafeAreaView>
233
                     </SafeAreaView>
226
-                    <SafeAreaView style = { [ styles.bottomBar, _headerStyles.headerOverlay ] }>
234
+                    <SafeAreaView
235
+                        style = { [
236
+                            styles.bottomBar,
237
+                            _headerStyles.headerOverlay,
238
+                            this.state.bottomPadding ? styles.extraBarPadding : null ] }>
227
                         { this._renderShareMeetingButton() }
239
                         { this._renderShareMeetingButton() }
228
                     </SafeAreaView>
240
                     </SafeAreaView>
229
                 </KeyboardAvoidingView>
241
                 </KeyboardAvoidingView>
317
         return false;
329
         return false;
318
     }
330
     }
319
 
331
 
332
+    _onFocused: boolean => Function;
333
+
334
+    /**
335
+     * Constructs a callback to be used to update the padding of the field if necessary.
336
+     *
337
+     * @param {boolean} focused - True of the field is focused.
338
+     * @returns {Function}
339
+     */
340
+    _onFocused(focused) {
341
+        return () => {
342
+            Platform.OS === 'android' && this.setState({
343
+                bottomPadding: focused
344
+            });
345
+        };
346
+    }
347
+
320
     _onInvite: () => void
348
     _onInvite: () => void
321
 
349
 
322
     /**
350
     /**

+ 7
- 0
react/features/invite/components/add-people-dialog/native/styles.js 查看文件

58
         justifyContent: 'flex-start'
58
         justifyContent: 'flex-start'
59
     },
59
     },
60
 
60
 
61
+    /**
62
+     * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
63
+     */
64
+    extraBarPadding: {
65
+        paddingBottom: 30
66
+    },
67
+
61
     invitedList: {
68
     invitedList: {
62
         padding: 3
69
         padding: 3
63
     },
70
     },

Loading…
取消
儲存