diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 44aba2a9e..27628c054 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/app/components/autocomplete/at_mention/at_mention.js
@@ -25,6 +25,7 @@ export default class AtMention extends PureComponent {
         defaultChannel: PropTypes.object,
         inChannel: PropTypes.array,
         isSearch: PropTypes.bool,
+        listHeight: PropTypes.number,
         matchTerm: PropTypes.string,
         onChangeText: PropTypes.func.isRequired,
         onResultCountChange: PropTypes.func.isRequired,
@@ -202,7 +203,7 @@ export default class AtMention extends PureComponent {
     };
 
     render() {
-        const {isSearch, theme} = this.props;
+        const {isSearch, listHeight, theme} = this.props;
         const {mentionComplete, sections} = this.state;
 
         if (sections.length === 0 || mentionComplete) {
@@ -217,7 +218,7 @@ export default class AtMention extends PureComponent {
             <SectionList
                 keyboardShouldPersistTaps='always'
                 keyExtractor={this.keyExtractor}
-                style={[style.listView, isSearch ? style.search : null]}
+                style={[style.listView, isSearch ? [style.search, {height: listHeight}] : null]}
                 sections={sections}
                 renderItem={this.renderItem}
                 renderSectionHeader={this.renderSectionHeader}
@@ -234,8 +235,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             backgroundColor: theme.centerChannelBg
         },
         search: {
-            minHeight: 125,
-            maxHeight: 250
+            minHeight: 125
         }
     };
 });
diff --git a/app/components/autocomplete/autocomplete.js b/app/components/autocomplete/autocomplete.js
index be9c8c3c3..400b06252 100644
--- a/app/components/autocomplete/autocomplete.js
+++ b/app/components/autocomplete/autocomplete.js
@@ -3,7 +3,12 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Platform, View} from 'react-native';
+import {
+    Keyboard,
+    Platform,
+    View
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
@@ -14,6 +19,7 @@ import SlashSuggestion from './slash_suggestion';
 
 export default class Autocomplete extends PureComponent {
     static propTypes = {
+        deviceHeight: PropTypes.number,
         onChangeText: PropTypes.func.isRequired,
         rootId: PropTypes.string,
         isSearch: PropTypes.bool,
@@ -30,7 +36,8 @@ export default class Autocomplete extends PureComponent {
         atMentionCount: 0,
         channelMentionCount: 0,
         emojiCount: 0,
-        commandCount: 0
+        commandCount: 0,
+        keyboardOffset: 0
     };
 
     handleSelectionChange = (event) => {
@@ -55,6 +62,33 @@ export default class Autocomplete extends PureComponent {
         this.setState({commandCount});
     };
 
+    componentWillMount() {
+        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    }
+
+    componentWillUnmount() {
+        this.keyboardDidShowListener.remove();
+        this.keyboardDidHideListener.remove();
+    }
+
+    keyboardDidShow = (e) => {
+        const {height} = e.endCoordinates;
+        this.setState({keyboardOffset: height});
+    }
+
+    keyboardDidHide = () => {
+        this.setState({keyboardOffset: 0});
+    }
+
+    listHeight() {
+        let offset = Platform.select({ios: 65, android: 75});
+        if (DeviceInfo.getModel() === 'iPhone X') {
+            offset = 90;
+        }
+        return this.props.deviceHeight - offset - this.state.keyboardOffset;
+    }
+
     render() {
         const style = getStyleFromTheme(this.props.theme);
 
@@ -76,16 +110,18 @@ export default class Autocomplete extends PureComponent {
                 containerStyle.push(style.borders);
             }
         }
-
+        const listHeight = this.listHeight();
         return (
             <View style={wrapperStyle}>
                 <View style={containerStyle}>
                     <AtMention
+                        listHeight={listHeight}
                         cursorPosition={this.state.cursorPosition}
                         onResultCountChange={this.handleAtMentionCountChange}
                         {...this.props}
                     />
                     <ChannelMention
+                        listHeight={listHeight}
                         cursorPosition={this.state.cursorPosition}
                         onResultCountChange={this.handleChannelMentionCountChange}
                         {...this.props}
@@ -131,7 +167,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
         },
         searchContainer: {
             flex: 1,
-            maxHeight: 250,
             ...Platform.select({
                 android: {
                     top: 46
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index 03c2e6871..7bc862a10 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -21,6 +21,7 @@ export default class ChannelMention extends PureComponent {
         currentTeamId: PropTypes.string.isRequired,
         cursorPosition: PropTypes.number.isRequired,
         isSearch: PropTypes.bool,
+        listHeight: PropTypes.number,
         matchTerm: PropTypes.string,
         myChannels: PropTypes.array,
         otherChannels: PropTypes.array,
@@ -166,7 +167,7 @@ export default class ChannelMention extends PureComponent {
     };
 
     render() {
-        const {isSearch, theme} = this.props;
+        const {isSearch, listHeight, theme} = this.props;
         const {mentionComplete, sections} = this.state;
 
         if (sections.length === 0 || mentionComplete) {
@@ -181,7 +182,7 @@ export default class ChannelMention extends PureComponent {
             <SectionList
                 keyboardShouldPersistTaps='always'
                 keyExtractor={this.keyExtractor}
-                style={[style.listView, isSearch ? style.search : null]}
+                style={[style.listView, isSearch ? [style.search, {height: listHeight}] : null]}
                 sections={sections}
                 renderItem={this.renderItem}
                 renderSectionHeader={this.renderSectionHeader}
@@ -198,8 +199,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             backgroundColor: theme.centerChannelBg
         },
         search: {
-            minHeight: 125,
-            maxHeight: 250
+            minHeight: 125
         }
     };
 });
diff --git a/app/components/autocomplete/index.js b/app/components/autocomplete/index.js
index a0ebdca7c..1afa78e7c 100644
--- a/app/components/autocomplete/index.js
+++ b/app/components/autocomplete/index.js
@@ -5,10 +5,14 @@ import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
+import {getDimensions} from 'app/selectors/device';
+
 import Autocomplete from './autocomplete';
 
 function mapStateToProps(state) {
+    const {deviceHeight} = getDimensions(state);
     return {
+        deviceHeight,
         theme: getTheme(state)
     };
 }