diff --git a/app/components/emoji_picker/emoji_picker_base.js b/app/components/emoji_picker/emoji_picker_base.js index 93a06261e..cc4919512 100644 --- a/app/components/emoji_picker/emoji_picker_base.js +++ b/app/components/emoji_picker/emoji_picker_base.js @@ -14,6 +14,8 @@ import { View, } from 'react-native'; import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; +import Octicons from 'react-native-vector-icons/Octicons'; + import sectionListGetItemLayout from 'react-native-section-list-get-item-layout'; import Emoji from 'app/components/emoji'; @@ -258,6 +260,8 @@ export default class EmojiPicker extends PureComponent { nativeID={SCROLLVIEW_NATIVE_ID} pageSize={10} renderItem={this.flatListRenderItem} + ListEmptyComponent={this.renderEmptyList} + contentContainerStyle={styles.flex} style={styles.flatList} /> ); @@ -449,6 +453,42 @@ export default class EmojiPicker extends PureComponent { ); }; + + renderEmptyList = () => { + const {theme} = this.props; + const {formatMessage} = this.context.intl; + const {searchTerm} = this.state; + const styles = getStyleSheetFromTheme(theme); + const title = formatMessage({ + id: 'mobile.emoji_picker.search.not_found_title', + defaultMessage: 'No results found for "{searchTerm}"', + }, { + searchTerm, + }); + const description = formatMessage({ + id: 'mobile.emoji_picker.search.not_found_description', + defaultMessage: 'Check the spelling or try another search.', + }); + return ( + + + + + + + {title} + + + {description} + + + + ); + } } export const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { @@ -515,6 +555,31 @@ export const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { borderRightColor: changeOpacity(theme.centerChannelColor, 0.2), overflow: 'hidden', }, + flexCenter: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + notFoundIcon: { + backgroundColor: changeOpacity(theme.centerChannelColor, 0.04), + width: 120, + height: 120, + borderRadius: 60, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + notFoundText: { + color: theme.centerChannelColor, + marginTop: 16, + }, + notFoundText20: { + fontSize: 20, + fontWeight: '600', + }, + notFoundText15: { + fontSize: 15, + }, searchBar: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), paddingVertical: 5, diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 72de09f7d..5eb0186d7 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -243,6 +243,8 @@ "mobile.emoji_picker.people": "PEOPLE", "mobile.emoji_picker.places": "PLACES", "mobile.emoji_picker.recent": "RECENTLY USED", + "mobile.emoji_picker.search.not_found_description": "Check the spelling or try another search.", + "mobile.emoji_picker.search.not_found_title": "No results found for \"{searchTerm}\"", "mobile.emoji_picker.symbols": "SYMBOLS", "mobile.error_handler.button": "Relaunch", "mobile.error_handler.description": "\nTap relaunch to open the app again. After restart, you can report the problem from the settings menu.\n",