ordering-ui-react-native 0.21.48 → 0.21.49-release

package/themes/original/src/components/BusinessReviews/index.tsx

@@ -109,7 +109,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent
-				contentContainerStyle={{ paddingHorizontal: 40, paddingVertical: 27 }}>
+				contentContainerStyle={{ paddingHorizontal: 20, paddingVertical: 27 }}>
 				{reviewsList.error ? (
 					<OText size={16}>{t('ERROR_UNKNOWN', 'An error has ocurred')}</OText>
 				) : (

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -415,7 +415,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
-							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							horizontal contentContainerStyle={{ paddingHorizontal: 20 }}>
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController

package/themes/original/src/components/BusinessesListing/Layout/Appointment/styles.tsx

@@ -54,13 +54,13 @@ export const WrapMomentOption = styled.TouchableOpacity`
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
 	height: 370px;
-	padding: 20px 40px;
+	padding: 20px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `;
 
 export const FeaturedWrapper = styled.View`
@@ -72,7 +72,7 @@ export const FeaturedWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `
 
 export const FarAwayMessage = styled.View`
@@ -98,10 +98,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `

package/themes/original/src/components/BusinessesListing/Layout/Original/FlatListBusinessListFooter.tsx

@@ -11,7 +11,7 @@ export const FlatListBusinessListFooter = (props : any) => {
     } = props
     return (
         <>
-            <ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <ListWrapper style={{ paddingHorizontal: 20 }}>
                 {(businessesList.loading || !businessesList?.fetched) && (
                     <>
                         {[

package/themes/original/src/components/BusinessesListing/Layout/Original/FlatListBusinessListHeader.tsx

@@ -133,7 +133,7 @@ export const FlatListBusinessListHeader = (props: any) => {
             backgroundColor: theme.colors.white,
             borderColor: theme.colors.backgroundGray,
             borderRadius: 8,
-            marginHorizontal: 40,
+            marginHorizontal: 20,
             minHeight: 45,
             paddingVertical: 5,
             paddingHorizontal: 20,
@@ -165,7 +165,7 @@ export const FlatListBusinessListHeader = (props: any) => {
             )}
             <View style={{
                 height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
-                marginTop: isChewLayout ? 0 : Platform.OS == 'ios' ? 0 : 50,
+                marginTop: 0,
                 backgroundColor: isChewLayout ? theme?.colors?.chew : theme.colors?.white
             }}
             >
@@ -276,7 +276,7 @@ export const FlatListBusinessListHeader = (props: any) => {
                             bgHeaderHeight={bgHeaderHeight}
                         >
                             {!auth && (
-                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 20, paddingVertical: 20 }}>
                                     <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
                                 </TouchableOpacity>
                             )}
@@ -284,7 +284,7 @@ export const FlatListBusinessListHeader = (props: any) => {
                     ) : (
                         <>
                             {!auth && (
-                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 20, paddingVertical: 20 }}>
                                     <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
                                 </TouchableOpacity>
                             )}
@@ -324,12 +324,12 @@ export const FlatListBusinessListHeader = (props: any) => {
             {
                 !businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
                     <FeaturedWrapper>
-                        <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
+                        <OText size={16} style={{ marginLeft: 20 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
                         <ScrollView
                             showsHorizontalScrollIndicator={false}
                             nestedScrollEnabled
                             horizontal
-                            contentContainerStyle={{ paddingHorizontal: 40 }}
+                            contentContainerStyle={{ paddingHorizontal: 20 }}
                         >
                             {featuredBusiness.map((bAry: any, idx: number) => (
                                 <View key={'f-listing_' + idx}>
@@ -372,7 +372,7 @@ export const FlatListBusinessListHeader = (props: any) => {
             <PageBanner position='app_business_listing' navigation={navigation} />
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 
-            <ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <ListWrapper style={{ paddingHorizontal: 20 }}>
                 {!businessId && !isAllCategoriesHidden && (
                     <BusinessTypeFilter
                         images={props.images}

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -94,7 +94,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			backgroundColor: theme.colors.white,
 			borderColor: theme.colors.backgroundGray,
 			borderRadius: 8,
-			marginHorizontal: 40,
+			marginHorizontal: 20,
 			minHeight: 45,
 			paddingVertical: 5,
 			paddingHorizontal: 20,
@@ -168,7 +168,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 		resetInactivityTimeout()
-	}, [businessesList.loading])
+	}, [businessesList.loading, businessesList?.businesses])
 
 	const handleOnRefresh = () => {
 		if (!businessesList.loading) {

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -61,7 +61,7 @@ export const WrapMomentOption = styled.TouchableOpacity`
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
   height: 270px;
-	padding: 20px 40px;
+	padding: 20px;
 	background-color: transparent;
 `;
 

package/themes/original/src/components/BusinessesListing/index.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 

package/themes/original/src/components/Cart/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   Cart as CartController,
   useOrder,
@@ -52,7 +52,11 @@ const CartUI = (props: any) => {
     preorderMaximumDays,
     preorderMinimumDays,
     cateringTypes,
-    isFromUpselling
+    isFromUpselling,
+    cartsOpened,
+    setCartsOpened,
+    changeActiveState,
+    isActive
   } = props
 
   const theme = useTheme();
@@ -62,7 +66,7 @@ const CartUI = (props: any) => {
   const [{ configs }] = useConfig();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
   const [validationFields] = useValidationFields()
-
+  const commentRef = useRef()
   const [openUpselling, setOpenUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
@@ -109,7 +113,7 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = (individualCart : any) => {
+  const handleUpsellingPage = (individualCart: any) => {
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -117,7 +121,7 @@ const CartUI = (props: any) => {
     const cartsAvailable: any = Object.values(orderState?.carts)
       ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
       ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== individualCart?.uuid : _c)
-    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+    if (cartsAvailable.length === 1 || !isMultiCheckout || !cart?.business_id) {
       const cart = isMultiCheckout ? cartsAvailable[0] : individualCart
       onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
@@ -192,6 +196,18 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
+  const handleClickCheckout = () => {
+    if (cart?.business_id) {
+      setOpenUpselling(true)
+    } else {
+      onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        cartTotal: cart?.total
+      }, true)
+    }
+  }
+
   useEffect(() => {
     const limitDays = parseInt(preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
     const currentDate = new Date()
@@ -207,7 +223,7 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {openUpselling && (
+      {!!openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}
@@ -228,10 +244,15 @@ const CartUI = (props: any) => {
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={() => setOpenChangeStore(true)}
-        handleClickCheckout={() => setOpenUpselling(true)}
+        handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
         isFromUpselling={isFromUpselling}
+        cartsOpened={cartsOpened}
+        setCartsOpened={setCartsOpened}
+        changeActiveState={changeActiveState}
+        isActive={isActive}
+        isGiftCart={!cart?.business_id}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
@@ -423,6 +444,7 @@ const CartUI = (props: any) => {
               cart?.status !== 2 &&
               validationFields?.fields?.checkout?.driver_tip?.enabled &&
               driverTipsOptions && driverTipsOptions?.length > 0 &&
+              cart?.business_id &&
               (
                 <DriverTipsContainer>
                   <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
@@ -489,6 +511,7 @@ const CartUI = (props: any) => {
                         marginTop: 10,
                         borderRadius: 7.6
                       }}
+                      forwardRef={commentRef}
                       multiline
                     />
                     {commentState?.loading && (
@@ -521,7 +544,7 @@ const CartUI = (props: any) => {
             />
           </View>
         )}
-        {!isMultiCheckout && (
+        {(!isMultiCheckout || !cart?.business_id) && (
           <>
             {cart?.valid_products ? (
               <CheckoutAction>
@@ -538,7 +561,7 @@ const CartUI = (props: any) => {
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
                   textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
-                  onClick={() => setOpenUpselling(true)}
+                  onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />
               </CheckoutAction>

package/themes/original/src/components/CartContent/index.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
+import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
 
@@ -11,10 +11,10 @@ import { NotFoundSource } from '../NotFoundSource';
 
 export const CartContent = (props: any) => {
 	const {
-		carts,
-		isOrderStateCarts,
 		onNavigationRedirect,
-		singleBusiness
+		singleBusiness,
+		businessSlug,
+		navigation
 	} = props
 
 	const theme = useTheme();
@@ -22,16 +22,22 @@ export const CartContent = (props: any) => {
 	const [{ configs }] = useConfig()
 	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
-
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const [cartsOpened, setCartsOpened] = useState([])
+	const [{ carts: cartsContext }, { confirmCart }] = useOrder();
+	const cartsList =
+		(cartsContext &&
+			Object.values(cartsContext).filter((cart: any) => cart.products.length > 0)) ??
+		[];
+	const carts = businessSlug
+		? cartsList.filter((cart: any) => cart?.business?.slug === businessSlug || parseInt(businessSlug) === cart?.business_id)
+		: cartsList
+	const isOrderStateCarts = !!carts
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-
+	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2 && cart?.business_id)
 	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
 	const totalCartsFee = cartsAvailable?.length && cartsAvailable
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
-
 	const handleCheckoutRedirect = () => {
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
@@ -66,9 +72,35 @@ export const CartContent = (props: any) => {
 		}
 	}
 
+	const changeActiveState = useCallback((isClosed: boolean, uuid: string) => {
+		const isActive = cartsOpened?.includes?.(uuid) || !!singleBusiness
+		if (isActive || !isClosed) {
+			setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
+		} else {
+			setCartsOpened([
+				...cartsOpened,
+				uuid
+			])
+		}
+	}, [cartsOpened])
+
+	useEffect(() => {
+		const unsuscribe = navigation.addListener('focus', () => {
+			const cartsListBlockedByPaypal = carts?.filter((cart: any) => cart?.status === 2 && cart?.paymethod_data?.gateway === 'paypal')
+			if (cartsListBlockedByPaypal?.length > 0) {
+				cartsListBlockedByPaypal.map(async (cart: any) => {
+					await confirmCart(cart?.uuid)
+				})
+			}
+		})
+		return () => {
+			return unsuscribe()
+		}
+	}, [carts, navigation])
+
 	return (
 		<CCContainer
-			style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+			style={{ paddingHorizontal: 20 }}
 		>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
@@ -88,8 +120,12 @@ export const CartContent = (props: any) => {
 										hideUpselling
 										businessConfigs={cart?.business?.configs}
 										hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
-                    hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
+										hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
 										hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
+										cartsOpened={cartsOpened}
+										setCartsOpened={setCartsOpened}
+										changeActiveState={changeActiveState}
+										isActive={cartsOpened?.includes?.(cart?.uuid) || !!singleBusiness}
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>
@@ -99,53 +135,55 @@ export const CartContent = (props: any) => {
 					{isMultiCheckout && (
 						<>
 							{!!cartsAvailable.length && (
-								<ChCartsTotal>
-									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(totalCartsFee)}
-                      </OText>
-                    </View>
-                  )}
-                  {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
-                    configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('DRIVER_TIP', 'Driver tip')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
-                      </OText>
-                    </View>
-                  )}
-                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
-                      {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
-                    </OText>
-                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
-                  </View>
-									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
-										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
-											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
-										</OText>
-									</View>
-								</ChCartsTotal>
+								<>
+									<ChCartsTotal>
+										{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
+											<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+													{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
+												</OText>
+												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+													{parsePrice(totalCartsFee)}
+												</OText>
+											</View>
+										)}
+										{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+											configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+												<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{t('DRIVER_TIP', 'Driver tip')}
+													</OText>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													</OText>
+												</View>
+											)}
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+												{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+											</OText>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+										</View>
+										<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
+											<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
+												{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
+											</OText>
+										</View>
+									</ChCartsTotal>
+									<CheckoutAction style={{ marginTop: 0 }}>
+										<OButton
+											text={t('CHECKOUT', 'Checkout')}
+											bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
+											isDisabled={!cartsAvailable.length}
+											borderColor={theme.colors.primary}
+											imgRightSrc={null}
+											textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+											onClick={() => handleCheckoutRedirect()}
+											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+										/>
+									</CheckoutAction>
+								</>
 							)}
-							<CheckoutAction style={{ marginTop: 0 }}>
-								<OButton
-									text={t('CHECKOUT', 'Checkout')}
-									bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
-									isDisabled={!cartsAvailable.length}
-									borderColor={theme.colors.primary}
-									imgRightSrc={null}
-									textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-									onClick={() => handleCheckoutRedirect()}
-									style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-								/>
-							</CheckoutAction>
 						</>
 					)}
 				</>

package/themes/original/src/components/CartStoresListing/styles.tsx

@@ -9,7 +9,7 @@ export const Container = styled.View`
 `
 
 export const ItemListing = styled.ScrollView`
-  padding: 0 40px;
+  padding: 0 20px;
   margin: 0 0 140px;
 `
 
@@ -19,7 +19,7 @@ export const TopHeader = styled.View`
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding: 0 40px;
+  padding: 0 20px;
 `
 
 export const HeaderItem = styled.TouchableOpacity`