fix: avoid keyboard with search results list

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

@@ -6,6 +6,7 @@ import {
     ActivityIndicator,
     Alert,
     FlatList,
+    KeyboardAvoidingView,
     SafeAreaView,
     TextInput,
     TouchableOpacity,
@@ -149,37 +150,41 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                     headerLabelKey = 'inviteDialog.header'
                     onPressBack = { this._onCloseAddPeopleDialog }
                     onPressForward = { this._onInvite } />
-                <SafeAreaView style = { styles.dialogWrapper }>
+                <KeyboardAvoidingView
-                    <View
+                    behavior = 'padding'
-                        style = { styles.searchFieldWrapper }>
+                    style = { styles.avoidingView }>
-                        <View style = { styles.searchIconWrapper }>
+                    <SafeAreaView style = { styles.dialogWrapper }>
-                            { this.state.searchInprogress
+                        <View
-                                ? <ActivityIndicator
+                            style = { styles.searchFieldWrapper }>
-                                    color = { DARK_GREY }
+                            <View style = { styles.searchIconWrapper }>
-                                    size = 'small' />
+                                { this.state.searchInprogress
-                                : <Icon
+                                    ? <ActivityIndicator
-                                    name = { 'search' }
+                                        color = { DARK_GREY }
-                                    style = { styles.searchIcon } />}
+                                        size = 'small' />
+                                    : <Icon
+                                        name = { 'search' }
+                                        style = { styles.searchIcon } />}
+                            </View>
+                            <TextInput
+                                autoCorrect = { false }
+                                autoFocus = { true }
+                                onChangeText = { this._onTypeQuery }
+                                placeholder = {
+                                    this.props.t(`inviteDialog.${placeholderKey}`)
+                                }
+                                ref = { this._setFieldRef }
+                                style = { styles.searchField } />
                         </View>
-                        <TextInput
+                        <FlatList
-                            autoCorrect = { false }
+                            ItemSeparatorComponent = { this._renderSeparator }
-                            autoFocus = { true }
+                            data = { this.state.selectableItems }
-                            onChangeText = { this._onTypeQuery }
+                            extraData = { inviteItems }
-                            placeholder = {
+                            keyExtractor = { this._keyExtractor }
-                                this.props.t(`inviteDialog.${placeholderKey}`)
+                            keyboardShouldPersistTaps = 'always'
-                            }
+                            renderItem = { this._renderItem }
-                            ref = { this._setFieldRef }
+                            style = { styles.resultList } />
-                            style = { styles.searchField } />
+                    </SafeAreaView>
-                    </View>
+                </KeyboardAvoidingView>
-                    <FlatList
-                        ItemSeparatorComponent = { this._renderSeparator }
-                        data = { this.state.selectableItems }
-                        extraData = { inviteItems }
-                        keyExtractor = { this._keyExtractor }
-                        keyboardShouldPersistTaps = 'always'
-                        renderItem = { this._renderItem }
-                        style = { styles.resultList } />
-                </SafeAreaView>
             </Modal>
         );
     }

react/features/invite/components/add-people-dialog/native/styles.js

@@ -17,6 +17,10 @@ export default {
         fontSize: 12
     },
 
+    avoidingView: {
+        flex: 1
+    },
+
     dialogWrapper: {
         alignItems: 'stretch',
         backgroundColor: ColorPalette.white,