diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 68bda3936e10..47a6958b733d 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -37,6 +37,7 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import {iouPropTypes} from '../pages/iou/propTypes';
 import reportPropTypes from '../pages/reportPropTypes';
 import * as IOU from '../libs/actions/IOU';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
@@ -212,7 +213,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 {shouldShowGradient && (
                     <LinearGradient
                         style={[styles.pAbsolute, styles.b0, styles.l0, styles.r0, {height: halfMenuItemHeight}]}
-                        colors={[`${theme.modalBackground}00`, theme.modalBackground]}
+                        colors={[StyleUtils.getTransparentColor(theme.modalBackground), theme.modalBackground]}
                     />
                 )}
                 {hasRouteError && (
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index d4e4239fc7dd..0e0d3b34098c 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -1180,6 +1180,13 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle | CSSPr
     };
 }
 
+/**
+ * Get transparent color by setting alpha value 0 of the passed color
+ */
+function getTransparentColor(color: string) {
+    return `${color}00`;
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1256,4 +1263,5 @@ export {
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
+    getTransparentColor,
 };