define and use getGoogleListViewStyle

Expensify · Apr 14, 2023 · a722c9f · a722c9f
1 parent 24fe2d5
commit a722c9f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js
@@ -11,6 +11,7 @@ import TextInput from './TextInput';
 import * as ApiUtils from '../libs/ApiUtils';
 import * as GooglePlacesUtils from '../libs/GooglePlacesUtils';
 import CONST from '../CONST';
+import * as StyleUtils from '../styles/StyleUtils';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -259,11 +260,7 @@ const AddressSearch = (props) => {
                     styles={{
                         textInputContainer: [styles.flexColumn],
                         listView: [
-                            !displayListViewBorder && styles.googleListView,
-                            displayListViewBorder && styles.borderTopRounded,
-                            displayListViewBorder && styles.borderBottomRounded,
-                            displayListViewBorder && styles.mt1,
-                            displayListViewBorder && styles.pv1,
+                            StyleUtils.getGoolgeListViewStyle(displayListViewBorder),
                             styles.overflowAuto,
                             styles.borderLeft,
                             styles.borderRight,

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -936,6 +936,25 @@ function getDirectionStyle(direction) {
     return {};
 }
 
+/**
+ * @param {Boolean} shouldDisplayBorder
+ * @returns {Object}
+ */
+function getGoolgeListViewStyle(shouldDisplayBorder) {
+    if (shouldDisplayBorder) {
+        return {
+            ...styles.borderTopRounded,
+            ...styles.borderBottomRounded,
+            marginTop: 4,
+            paddingVertical: 6,
+        };
+    }
+
+    return {
+        transform: [{scale: 0}],
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -986,4 +1005,5 @@ export {
     getEmojiReactionBubbleTextStyle,
     getEmojiReactionCounterTextStyle,
     getDirectionStyle,
+    getGoolgeListViewStyle,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2746,10 +2746,6 @@ const styles = {
         right: 60,
     },
 
-    googleListView: {
-        transform: [{scale: 0}],
-    },
-
     invert: {
         // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
         transform: [{scaleX: -1}, {scaleY: -1}],