diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 924d81a2bf37..e2ad3bed1b78 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -438,9 +438,11 @@ class EmojiPickerMenu extends Component {
if (header) {
return (
-
- {this.props.translate(`emojiPicker.headers.${code}`)}
-
+
+
+ {this.props.translate(`emojiPicker.headers.${code}`)}
+
+
);
}
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index 754ed20fd766..d70eed98800b 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -107,9 +107,11 @@ class EmojiPickerMenu extends Component {
if (item.header) {
return (
-
- {this.props.translate(`emojiPicker.headers.${item.code}`)}
-
+
+
+ {this.props.translate(`emojiPicker.headers.${item.code}`)}
+
+
);
}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index ff9dd1190130..c61acf2ff812 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1455,12 +1455,15 @@ const styles = {
height: 240,
},
- emojiHeaderStyle: {
+ emojiHeaderContainer: {
backgroundColor: themeColors.componentBG,
- width: '100%',
- height: 32,
display: 'flex',
- alignItems: 'center',
+ height: CONST.EMOJI_PICKER_HEADER_HEIGHT,
+ justifyContent: 'center',
+ width: '100%',
+ },
+
+ emojiHeaderStyle: {
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
color: themeColors.heading,