MM-24497 Ensuring quick reactions render within safe area (#4235)

* Ensuring quick reactions render within safe area

* Added modifier to align paddings

* Updating snapshots

app/components/reaction_picker/__snapshots__/reaction_picker.test.js.snap

@@ -3,15 +3,19 @@
 exports[`Reactions Should match snapshot with default emojis 1`] = `
 <View
   style={
-    Object {
-      "alignItems": "center",
-      "flex": 1,
-      "flexDirection": "row",
-      "height": 72,
-      "justifyContent": "space-between",
-      "paddingLeft": 12,
-      "paddingRight": 12,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "height": 72,
+        "justifyContent": "space-between",
+      },
+      Object {
+        "paddingLeft": 12,
+        "paddingRight": 12,
+      },
+    ]
   }
 >
   <ReactionButton
@@ -267,15 +271,19 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
 exports[`Reactions Should match snapshot with default emojis 2`] = `
 <View
   style={
-    Object {
-      "alignItems": "center",
-      "flex": 1,
-      "flexDirection": "row",
-      "height": 72,
-      "justifyContent": "space-between",
-      "paddingLeft": 12,
-      "paddingRight": 12,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "flexDirection": "row",
+        "height": 72,
+        "justifyContent": "space-between",
+      },
+      Object {
+        "paddingLeft": 12,
+        "paddingRight": 12,
+      },
+    ]
   }
 >
   <ReactionButton

app/components/reaction_picker/index.js

@@ -3,7 +3,7 @@
 
 import {connect} from 'react-redux';
 import {getTheme} from '@mm-redux/selectors/entities/preferences';
-import {getDimensions} from 'app/selectors/device';
+import {getDimensions, isLandscape} from 'app/selectors/device';
 import ReactionPicker from './reaction_picker';
 
 function mapStateToProps(state) {
@@ -12,6 +12,7 @@ function mapStateToProps(state) {
         theme: getTheme(state),
         recentEmojis: state.views.recentEmojis,
         deviceWidth,
+        isLandscape: isLandscape(state),
     };
 }
 

app/components/reaction_picker/reaction_picker.js

@@ -9,6 +9,7 @@ import {
     TouchableWithoutFeedback,
 } from 'react-native';
 
+import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
 import addReactionIcon from '@assets/images/icons/reaction.png';
 import {
     REACTION_PICKER_HEIGHT,
@@ -30,6 +31,7 @@ export default class ReactionPicker extends PureComponent {
         theme: PropTypes.object.isRequired,
         recentEmojis: PropTypes.array,
         deviceWidth: PropTypes.number,
+        isLandscape: PropTypes.bool.isRequired,
     }
 
     handlePress = (emoji) => {
@@ -40,6 +42,7 @@ export default class ReactionPicker extends PureComponent {
         const {
             theme,
             deviceWidth,
+            isLandscape,
         } = this.props;
         const style = getStyleSheet(theme);
         const isSmallDevice = deviceWidth < SMALL_ICON_BREAKPOINT;
@@ -68,8 +71,16 @@ export default class ReactionPicker extends PureComponent {
             );
         });
 
+        let paddingRes = padding(isLandscape, 12);
+        if (!paddingRes) {
+            paddingRes = {
+                paddingLeft: 12,
+                paddingRight: 12,
+            };
+        }
+
         return (
-            <View style={style.reactionListContainer}>
+            <View style={[style.reactionListContainer, paddingRes]}>
                 {list}
                 <TouchableWithoutFeedback onPress={this.props.openReactionScreen}>
                     <View
@@ -103,8 +114,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flex: 1,
             flexDirection: 'row',
             alignItems: 'center',
-            paddingLeft: 12,
-            paddingRight: 12,
             height: REACTION_PICKER_HEIGHT,
             justifyContent: 'space-between',
         },