From a0841e0ef1971e406defc9e04618179c5c8e89c2 Mon Sep 17 00:00:00 2001
From: Andre Vasconcelos <andre.onogoro@gmail.com>
Date: Fri, 15 May 2020 11:10:15 +0900
Subject: [PATCH] MM-24497 Ensuring quick reactions render within safe area
 (#4235)

* Ensuring quick reactions render within safe area

* Added modifier to align paddings

* Updating snapshots
---
 .../reaction_picker.test.js.snap              | 44 +++++++++++--------
 app/components/reaction_picker/index.js       |  3 +-
 .../reaction_picker/reaction_picker.js        | 15 +++++--
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/components/reaction_picker/__snapshots__/reaction_picker.test.js.snap b/app/components/reaction_picker/__snapshots__/reaction_picker.test.js.snap
index c81fd78e8..d538515ae 100644
--- a/app/components/reaction_picker/__snapshots__/reaction_picker.test.js.snap
+++ b/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
diff --git a/app/components/reaction_picker/index.js b/app/components/reaction_picker/index.js
index d4fc48cb2..b7537b075 100644
--- a/app/components/reaction_picker/index.js
+++ b/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),
     };
 }
 
diff --git a/app/components/reaction_picker/reaction_picker.js b/app/components/reaction_picker/reaction_picker.js
index 56319a4c4..86b7ebcc0 100644
--- a/app/components/reaction_picker/reaction_picker.js
+++ b/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',
         },