diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index b8e415b5adb4..27e5b8a9efe5 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import EmojiReactionBubble from '../EmojiReactionBubble';
 import AddReactionBubble from '../AddReactionBubble';
 import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
 
 const EMOJI_BUBBLE_SCALE = 1.5;
 
@@ -20,16 +21,7 @@ const baseQuickEmojiReactionsDefaultProps = {
 };
 
 const BaseQuickEmojiReactions = props => (
-
-    // TODO: move this to styles file
-    <View style={{
-        gap: 12,
-        flexDirection: 'row',
-        paddingHorizontal: 25,
-        paddingVertical: 12,
-        justifyContent: 'space-between',
-    }}
-    >
+    <View style={styles.quickReactionsContainer}>
         {_.map(CONST.QUICK_REACTIONS, reaction => (
             <EmojiReactionBubble
                 key={reaction.name}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index bd3d99f1ac2c..eb4d82871799 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2945,6 +2945,14 @@ const styles = {
         lineHeight: variables.iconSizeXLarge,
     },
 
+    quickReactionsContainer: {
+        gap: 12,
+        flexDirection: 'row',
+        paddingHorizontal: 25,
+        paddingVertical: 12,
+        justifyContent: 'space-between',
+    },
+
     magicCodeDigits: {
         color: themeColors.text,
         fontFamily: fontFamily.EXP_NEUE,