feat: Dynamic emoji size

src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js

@@ -0,0 +1,13 @@
+import styleVariables from '../../../../styles/variables';
+
+const dynamicEmojiSize = (windowWidth) => {
+    if (windowWidth <= 320) {
+        return styleVariables.iconSizeExtraSmall;
+    }
+    if (windowWidth <= 480) {
+        return styleVariables.iconSizeNormal;
+    }
+    return styleVariables.iconSizeLarge;
+};
+
+export default dynamicEmojiSize;

src/pages/home/report/EmojiPickerMenu/index.js

@@ -12,6 +12,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../compo
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import compose from '../../../../libs/compose';
 import getOperatingSystem from '../../../../libs/getOperatingSystem';
+import dynamicEmojiSize from './dynamicEmojiSize';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
@@ -20,6 +21,7 @@ const propTypes = {
     /** The ref to the search input (may be null on small screen widths) */
     forwardedRef: PropTypes.func,
 
+    /** Props related to the dimensions of the window */
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -66,6 +68,9 @@ class EmojiPickerMenu extends Component {
         this.cleanupEventHandlers = this.cleanupEventHandlers.bind(this);
         this.renderItem = this.renderItem.bind(this);
         this.currentScrollOffset = 0;
+        this.emojiSize = {
+            fontSize: dynamicEmojiSize(this.props.windowWidth),
+        };
 
         this.state = {
             filteredEmojis: this.emojis,
@@ -302,6 +307,7 @@ class EmojiPickerMenu extends Component {
                 onHover={() => this.setState({highlightedIndex: index})}
                 emoji={code}
                 isHighlighted={index === this.state.highlightedIndex}
+                emojiSize={this.emojiSize}
             />
         );
     }

src/pages/home/report/EmojiPickerMenu/index.native.js

@@ -1,14 +1,20 @@
 import React, {Component} from 'react';
 import {View, FlatList, Text} from 'react-native';
 import PropTypes from 'prop-types';
+import compose from '../../../../libs/compose';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 import CONST from '../../../../CONST';
 import styles from '../../../../styles/styles';
 import emojis from '../../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
+import dynamicEmojiSize from './dynamicEmojiSize';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
     onEmojiSelected: PropTypes.func.isRequired,
+
+    /** Props related to the dimensions of the window */
+    ...windowDimensionsPropTypes,
 };
 
 class EmojiPickerMenu extends Component {
@@ -29,6 +35,10 @@ class EmojiPickerMenu extends Component {
         this.unfilteredHeaderIndices = [0, 33, 59, 87, 98, 120, 147];
 
         this.renderItem = this.renderItem.bind(this);
+
+        this.emojiSize = {
+            fontSize: dynamicEmojiSize(this.props.windowWidth),
+        };
     }
 
     /**
@@ -56,6 +66,7 @@ class EmojiPickerMenu extends Component {
             <EmojiPickerMenuItem
                 onPress={this.props.onEmojiSelected}
                 emoji={item.code}
+                emojiSize={this.emojiSize}
             />
         );
     }
@@ -78,8 +89,9 @@ class EmojiPickerMenu extends Component {
 
 EmojiPickerMenu.propTypes = propTypes;
 
-// eslint-disable-next-line no-unused-vars
-export default React.forwardRef((props, _ref) => (
+export default compose(
+    withWindowDimensions,
+)(React.forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <EmojiPickerMenu {...props} />
-));
+    <EmojiPickerMenu {...props} forwardedRef={ref} />
+)));

src/pages/home/report/EmojiPickerMenuItem.js

@@ -13,10 +13,15 @@ const propTypes = {
     onPress: PropTypes.func.isRequired,
 
     /** Handles what to do when we hover over this item with our cursor */
-    onHover: PropTypes.func.isRequired,
+    onHover: PropTypes.func,
 
     /** Whether this menu item is currently highlighted or not */
-    isHighlighted: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool,
+
+    /** Size of the emoji item */
+    emojiSize: PropTypes.shape({
+        fontSize: PropTypes.number,
+    }).isRequired,
 };
 
 const EmojiPickerMenuItem = props => (
@@ -26,19 +31,25 @@ const EmojiPickerMenuItem = props => (
             pressed,
         }) => ([
             styles.emojiItem,
+            styles.pv1,
             getButtonBackgroundColorStyle(getButtonState(false, pressed)),
             props.isHighlighted ? styles.emojiItemHighlighted : {},
         ])}
     >
         <Hoverable onHoverIn={props.onHover}>
-            <Text style={styles.emojiText}>{props.emoji}</Text>
+            <Text style={[styles.emojiText, props.emojiSize]}>
+                {props.emoji}
+            </Text>
         </Hoverable>
     </Pressable>
 
 );
-
 EmojiPickerMenuItem.propTypes = propTypes;
 EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem';
+EmojiPickerMenuItem.defaultProps = {
+    isHighlighted: false,
+    onHover: () => {},
+};
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.

src/styles/styles.js

@@ -979,15 +979,22 @@ const styles = {
     // Emoji Picker Styles
     emojiText: {
         fontFamily: fontFamily.GTA_BOLD,
-        fontSize: variables.iconSizeLarge,
         textAlign: 'center',
         ...spacing.pv1,
         ...spacing.ph2,
     },
 
+    emojiExtraSmall: {
+        fontSize: variables.iconSizeExtraSmall,
+    },
+
+    emojiLarge: {
+        fontSize: variables.iconSizeLarge,
+    },
+
     emojiItem: {
+        flex: 1,
         width: '12.5%',
-        height: 40,
         textAlign: 'center',
         borderRadius: 8,
     },