ordering-ui-react-native 0.16.46 → 0.16.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.46",
+  "version": "0.16.49",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/BusinessBasicInformation/index.tsx

@@ -56,22 +56,14 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         }
         source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_400,c_limit') }}
       >
-        <BusinessLogo>
-          {loading ? (
-            <View style={{ marginLeft: 20 }}>
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine height={50} width={20} />
-              </Placeholder>
-            </View>
-          ) : (
-            !isBusinessInfoShow && (
-              <OIcon
-                url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
-                style={styles.businessLogo}
-              />
-            )
-          )}
-        </BusinessLogo>
+        {!isBusinessInfoShow && (
+          <BusinessLogo>
+            <OIcon
+              url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
+              style={styles.businessLogo}
+            />
+          </BusinessLogo>
+        )}
       </BusinessHeader>
       <BusinessInfo
         style={styles.businessInfo}
@@ -117,7 +109,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
               <PlaceholderLine width={10} />
             </Placeholder>
           ) : (
-            <View style={{width: '75%'}}>
+            <View style={{ width: '75%' }}>
               <OText color={theme.colors.textSecondary}>{getBusinessType()}</OText>
             </View>
           )}
@@ -187,7 +179,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessInformation}
         onClose={() => setOpenBusinessInformation(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessInformation
@@ -199,7 +191,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessReviews}
         onClose={() => setOpenBusinessReviews(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessReviews

package/src/components/ReviewDriver/index.tsx

@@ -218,7 +218,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
             <RatingBarContainer>
               <LinearGradient
                 start={{ x: 0.0, y: 0.0 }}
-                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0, y: 0 }}
+                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0.0001, y: 0 }}
                 locations={[.9999, .9999]}
                 colors={[theme.colors.primary, theme.colors.lightGray]}
                 style={styles.statusBar}

package/src/components/ReviewOrder/index.tsx

@@ -106,7 +106,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   }
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0.0001,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
@@ -238,7 +238,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
               <RatingBarContainer>
                 <LinearGradient
                   start={{ x: 0.0, y: 0.0 }}
-                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0.0, y: 0.0 }}
+                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0.0001, y: 0.0 }}
                   locations={[.9999, .9999]}
                   colors={[theme.colors.primary, theme.colors.lightGray]}
                   style={styles.statusBar}

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -439,7 +439,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <OrderContentComponent order={order} />
               {(order?.status === 7 || order?.status === 4) &&
-                order?.delivery_type === 1 && (
+                order?.delivery_type === 1 && configs?.assign_driver_enabled?.value === '1' && (
                   <AssignDriver>
                     <OText style={{ marginBottom: 5 }} size={16} weight="600">
                       {t('ASSIGN_DRIVER', 'Assign driver')}

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -104,8 +104,8 @@ export const PreviousOrders = (props: any) => {
     const offset = 300
     const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
     const _delivery = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc)
-      : parseDate(cdtToutc)
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
     const _eta = order?.eta_time
     const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
     return Math.ceil(diffTimeAsSeconds / 60)
@@ -178,9 +178,9 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                  {allowColumns?.slaBar && (
-                    <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
-                  )}
+                    {allowColumns?.slaBar && (
+                      <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
+                    )}
                     {
                       !!order.business?.logo && (
                         <Logo style={styles.logo}>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -8,6 +8,7 @@ import {
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
 import {
@@ -50,6 +51,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(false)
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -123,126 +125,132 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
-  const handleChangeFavorite = () => {
-    handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
-  }
+	const handleChangeFavorite = () => {
+		handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+	}
 
 	return (
-		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
-			{business?.ribbon?.enabled && (
-				<RibbonBox
-					bgColor={business?.ribbon?.color}
-					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-				>
-					<OText
-						size={10}
-						weight={'400'}
-						color={theme.colors.white}
-						numberOfLines={2}
-						ellipsizeMode='tail'
-						lineHeight={13}
+		<InView triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+			<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+				{business?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={business?.ribbon?.color}
+						isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 					>
-						{business?.ribbon?.text}
-					</OText>
-				</RibbonBox>
-			)}
-			<BusinessHero>
-				<FastImage
-					style={{ height: 120 }}
-					source={{
-						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-				{(businessFeatured ?? business?.featured) && (
-					<View style={styles.featured}>
-						<FontAwesomeIcon name="crown" size={26} color="gold" />
-					</View>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+							ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{business?.ribbon?.text}
+						</OText>
+					</RibbonBox>
 				)}
-				<BusinessState>
-					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
-						<View style={styles.businessStateView}>
-							<OText
-								color={theme.colors.textThird}
-								size={10}
-								style={styles.businessStateText}>
-								{t('PREORDER', 'PREORDER')}
-							</OText>
-						</View>
-					)}
-				</BusinessState>
-			</BusinessHero>
-			<BusinessContent>
-				<BusinessInfo>
-					<BusinessLogo style={styles.businessLogo}>
+				{isIntersectionObserver && (
+					<BusinessHero>
 						<FastImage
-							style={{ width: 56, height: 56 }}
+							style={{ height: 120 }}
 							source={{
-								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
-					</BusinessLogo>
-					<ReviewAndFavorite>
-						{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-							<Reviews>
-								<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-								<OText size={10} style={{ lineHeight: 15 }}>
-									{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-								</OText>
-							</Reviews>
+						{(businessFeatured ?? business?.featured) && (
+							<View style={styles.featured}>
+								<FontAwesomeIcon name="crown" size={26} color="gold" />
+							</View>
 						)}
-						<TouchableOpacity
-							onPress={handleChangeFavorite}
-						>
-							<IconAntDesign
-								name={business?.favorite ? 'heart' : 'hearto'}
-								color={theme.colors.danger5}
-								size={18}
-							/>
-						</TouchableOpacity>
-					</ReviewAndFavorite>
-				</BusinessInfo>
-				<OText
-					size={12}
-					style={{ lineHeight: 18, marginBottom: 6 }}
-					weight={'500'}>
-					{business?.name}
-				</OText>
-				<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
-					{business?.address}
-				</OText>
-				{/* <BusinessCategory>
+						<BusinessState>
+							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
+								<View style={styles.businessStateView}>
+									<OText
+										color={theme.colors.textThird}
+										size={10}
+										style={styles.businessStateText}>
+										{t('PREORDER', 'PREORDER')}
+									</OText>
+								</View>
+							)}
+						</BusinessState>
+					</BusinessHero>
+				)}
+				<BusinessContent>
+					<BusinessInfo>
+						{isIntersectionObserver && (
+							<BusinessLogo style={styles.businessLogo}>
+								<FastImage
+									style={{ width: 56, height: 56 }}
+									source={{
+										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							</BusinessLogo>
+						)}
+						<ReviewAndFavorite>
+							{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+								<Reviews>
+									<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+									<OText size={10} style={{ lineHeight: 15 }}>
+										{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+									</OText>
+								</Reviews>
+							)}
+							<TouchableOpacity
+								onPress={handleChangeFavorite}
+							>
+								<IconAntDesign
+									name={business?.favorite ? 'heart' : 'hearto'}
+									color={theme.colors.danger5}
+									size={18}
+								/>
+							</TouchableOpacity>
+						</ReviewAndFavorite>
+					</BusinessInfo>
+					<OText
+						size={12}
+						style={{ lineHeight: 18, marginBottom: 6 }}
+						weight={'500'}>
+						{business?.name}
+					</OText>
+					<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+						{business?.address}
+					</OText>
+					{/* <BusinessCategory>
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
-				<Metadata>
-					{!isBusinessOpen ? (
-						<View style={styles.closed}>
-							<OText size={10} color={theme.colors.red}>
-								{t('CLOSED', 'Closed')}
-							</OText>
-						</View>
-					) : (
-						<View style={styles.bullet}>
-							{orderState?.options?.type === 1 && (
-								<OText size={10} color={theme.colors.textSecondary}>
-									{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+					<Metadata>
+						{!isBusinessOpen ? (
+							<View style={styles.closed}>
+								<OText size={10} color={theme.colors.red}>
+									{t('CLOSED', 'Closed')}
 								</OText>
-							)}
-							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-								orderState?.options?.type === 1
-									? (businessDeliveryTime ?? business?.delivery_time)
-									: (businessPickupTime ?? business?.pickup_time),
-							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
-						</View>
-					)}
-				</Metadata>
-			</BusinessContent>
-		</Card>
+							</View>
+						) : (
+							<View style={styles.bullet}>
+								{orderState?.options?.type === 1 && (
+									<OText size={10} color={theme.colors.textSecondary}>
+										{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+									</OText>
+								)}
+								<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+									orderState?.options?.type === 1
+										? (businessDeliveryTime ?? business?.delivery_time)
+										: (businessPickupTime ?? business?.pickup_time),
+								)} \u2022 `}</OText>
+								<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+							</View>
+						)}
+					</Metadata>
+				</BusinessContent>
+			</Card>
+		</InView>
 	);
 };
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, BusinessSearchList, useOrder, useUtils } from 'ordering-components/native'
+import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastType } from 'ordering-components/native'
 import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
@@ -183,6 +183,30 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     setOpenFilters(false)
   }
 
+  const isInteger = (val: any) => Number.isInteger(Number(val)) && !!val
+
+  const onProductClick = (business: any, categoryId: any, productId: any) => {
+    if (!isInteger(business?.id) ||
+      !isInteger(categoryId) ||
+      !isInteger(productId) ||
+      !business.slug || !business.header || !business.logo) {
+      showToast(ToastType.error, t('NOT_AVAILABLE', 'Not Available'))
+      return
+    }
+
+    navigation.navigate('ProductDetails', {
+      isRedirect: 'business',
+      businessId: business?.id,
+      categoryId: categoryId,
+      productId: productId,
+      business: {
+        store: business.slug,
+        header: business.header,
+        logo: business.logo,
+      }
+    })
+  }
+
   useEffect(() => {
     if (filters.business_types?.length === 0 && filters.orderBy === 'default' && Object.keys(filters)?.length === 2 && !openFilters) {
       handleSearchbusinessAndProducts(true)
@@ -409,7 +433,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   isSoldOut={(product.inventoried && !product.quantity)}
                   product={product}
                   businessId={business?.id}
-                  onProductClick={() => { }}
+                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                   style={{ width: screenWidth - 80, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -222,7 +223,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}, [currentCart])
 
 	return (
-		<>
+		<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
 			<ContainerSafeAreaView
 				style={{ flex: 1 }}
 				isOpenFiltProducts={isOpenFiltProducts}
@@ -421,6 +422,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 				</BusinessProductsListingContainer>
+
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 					<FloatingButton
 						btnText={
@@ -479,7 +481,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onClose={() => setOpenService(false)}
 				/>
 			</OModal>
-		</>
+		</IOScrollView>
 	)
 }
 

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

@@ -32,7 +32,7 @@ import {
 	FeaturedWrapper,
 	OrderProgressWrapper,
 	FarAwayMessage,
-  SearchBarWrapper,
+	SearchBarWrapper,
 	MomentWrapper,
 	FilterWrapper,
 	ServiceWrapper,
@@ -70,8 +70,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		isGuestUser,
 		handleUpdateBusinessList,
 		priceLevelSelected,
-    handleChangePriceLevel,
-    businessTypeSelected
+		handleChangePriceLevel,
+		businessTypeSelected
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -327,22 +327,23 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 						{!businessId && (
-              <SearchBarWrapper>
-                <SearchBar
-                  onSearch={handleChangeSearch}
-                  searchValue={searchValue}
-                  lazyLoad
-                  isCancelXButtonShow={!!searchValue}
-                  borderStyle={styles.borderStyle}
-                  onCancel={() => handleChangeSearch('')}
-                  placeholder={t('SEARCH', 'Search')}
-                  height={80}
-                  isAppointment
-                  isDisabled={!businessTypes}
-                  inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-                  onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
-                />
-              </SearchBarWrapper>
+							<SearchBarWrapper>
+								<SearchBar
+									onSearch={handleChangeSearch}
+									searchValue={searchValue}
+									lazyLoad
+									isCancelXButtonShow={!!searchValue}
+									borderStyle={styles.borderStyle}
+									onCancel={() => handleChangeSearch('')}
+									placeholder={t('SEARCH', 'Search')}
+									height={80}
+									isAppointment
+									isDisabled={!businessTypes || configs?.advanced_business_search_enabled?.value === '1'}
+									inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+									onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
+									onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+								/>
+							</SearchBarWrapper>
 						)}
 					</View>
 				</OrderControlContainer>

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

@@ -352,13 +352,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					onCancel={() => handleChangeSearch('')}
 					placeholder={t('SEARCH', 'Search')}
 					height={50}
-					isDisabled={!businessTypes}
+					isDisabled={!businessTypes || configs?.advanced_business_search_enabled?.value === '1'}
 					inputContainerStyles={styles.inputContainerStyles}
 					containerStyles={{
 						marginHorizontal: 40,
 						marginTop: 20
 					}}
 					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
+					onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
 					onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
 				/>
 			)}

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

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react'
 import { useOrder, useSession } from 'ordering-components/native';
 
 import { useTheme } from 'styled-components/native'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 
@@ -42,9 +43,9 @@ export const BusinessesListing = (props: any) => {
   }, [auth])
 
   return (
-    <>
+    <IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
       {(layout === 'original') && <OriginalBusinessListing {...props} />}
       {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
-    </>
+    </IOScrollView>
   )
 }