ordering-ui-react-native 0.17.64 → 0.17.66

package/package.json

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

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

@@ -538,17 +538,21 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</FeaturedWrapper>
 				)
 			}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			{
-				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses
-						onBusinessClick={handleBusinessClick}
-						navigation={navigation}
-						favoriteIds={favoriteIds}
-						setFavoriteIds={setFavoriteIds}
-					/>
-				)
-			}
+			{!isChewLayout && (
+				<>
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
+					{
+						!businessId && !props.franchiseId && (
+							<HighestRatedBusinesses
+								onBusinessClick={handleBusinessClick}
+								navigation={navigation}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					}
+				</>
+			)}
 
 			<PageBanner position='app_business_listing' />
 

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -16,24 +16,24 @@ const BusinessControllerList = ({ businesses, onBusinessClick, navigation, order
   return (
     <>
       {businesses?.result?.map((business: any, i: number) => (
-        <BusinessController
-          key={`${business.id}_` + i}
-          business={business}
-          isBusinessOpen={business.open}
-          handleCustomClick={() => onBusinessClick(business)}
-          orderType={orderState?.options?.type}
-          navigation={navigation}
-          businessHeader={business?.header}
-          businessFeatured={business?.featured}
-          businessLogo={business?.logo}
-          businessReviews={business?.reviews}
-          businessDeliveryPrice={business?.delivery_price}
-          businessDeliveryTime={business?.delivery_time}
-          businessPickupTime={business?.pickup_time}
-          businessDistance={business?.distance}
-          handleCustomUpdate={handleCustomUpdate}
-          style={style}
-        />
+        <View style={style} key={`${business.id}_` + i}>
+          <BusinessController
+            business={business}
+            isBusinessOpen={business.open}
+            handleCustomClick={() => onBusinessClick(business)}
+            orderType={orderState?.options?.type}
+            navigation={navigation}
+            businessHeader={business?.header}
+            businessFeatured={business?.featured}
+            businessLogo={business?.logo}
+            businessReviews={business?.reviews}
+            businessDeliveryPrice={business?.delivery_price}
+            businessDeliveryTime={business?.delivery_time}
+            businessPickupTime={business?.pickup_time}
+            businessDistance={business?.distance}
+            handleCustomUpdate={handleCustomUpdate}
+          />
+        </View>
       ))}
     </>
   )
@@ -109,7 +109,12 @@ export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) =>
   });
 
   return (
-    <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
+    <ScrollView
+      horizontal={isBusinessesSearchList}
+      style={styles.container}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+    >
       {isBusinessesSearchList ? (
         <>
           {!businesses?.loading && (

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

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
 
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import Swiper from 'react-native-swiper'
+import Carousel from 'react-native-snap-carousel'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useTheme } from 'styled-components/native';
-import { PageBannerWrapper } from './styles'
+import { PageBannerWrapper, ArrowButtonsContainer } from './styles'
 
 const PageBannerUI = (props: any) => {
   const {
@@ -16,6 +16,9 @@ const PageBannerUI = (props: any) => {
 
 	const theme = useTheme();
 	const [{ optimizeImage }] = useUtils();
+  const carouselRef = useRef(null)
+
+  const windowWidth = Dimensions.get('window').width;
 
   const styles = StyleSheet.create({
     mainSwiper: {
@@ -36,6 +39,18 @@ const PageBannerUI = (props: any) => {
     }
   })
 
+  const renderItem = ({ item, index }) => {
+    return (
+      <View style={styles.sliderWrapper}>
+        <FastImage
+          style={{ height: '100%', width: '100%' }}
+          resizeMode='cover'
+          source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
+        />
+      </View>
+    )
+  }
+
   return (
     <>
       {pageBannerState.loading ? (
@@ -53,40 +68,40 @@ const PageBannerUI = (props: any) => {
         <>
           {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
             <PageBannerWrapper>
-              <Swiper
+              <ArrowButtonsContainer>
+                <TouchableOpacity
+                  style={styles.swiperButton}
+                  onPress={() => carouselRef.current.snapToPrev()}
+                >
+                  <IconAntDesign
+                    name="caretleft"
+                    color={theme.colors.white}
+                    size={13}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.swiperButton}
+                  onPress={() => carouselRef.current.snapToNext()}
+                >
+                  <IconAntDesign
+                    name="caretright"
+                    color={theme.colors.white}
+                    size={13}
+                  />
+                </TouchableOpacity>
+              </ArrowButtonsContainer>
+              <Carousel
+                ref={carouselRef}
                 loop={pageBannerState.banner?.items.length > 1}
-                showsButtons={true}
-                style={styles.mainSwiper}
-                showsPagination={false}
-                prevButton={
-                  <View style={styles.swiperButton}>
-                    <IconAntDesign
-                      name="caretleft"
-                      color={theme.colors.white}
-                      size={13}
-                    />
-                  </View>
-                }
-                nextButton={
-                  <View style={styles.swiperButton}>
-                    <IconAntDesign
-                      name="caretright"
-                      color={theme.colors.white}
-                      size={13}
-                    />
-                  </View>
-                }
-              >
-                {pageBannerState.banner?.items.map((img, i) => (
-                  <View key={i} style={styles.sliderWrapper}>
-                    <FastImage
-                      style={{ height: '100%', width: '100%' }}
-                      resizeMode='cover'
-                      source={{ uri: optimizeImage(img.url, 'h_300,c_limit') }}
-                    />
-                  </View>
-                ))}
-              </Swiper>
+                data={pageBannerState.banner?.items}
+                renderItem={renderItem}
+                sliderWidth={windowWidth - 80}
+                itemWidth={windowWidth - 80}
+                inactiveSlideScale={1}
+                pagingEnabled
+                removeClippedSubviews={false}
+                inactiveSlideOpacity={1}
+              />
             </PageBannerWrapper>
           )}
         </>

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

@@ -1,8 +1,18 @@
-import styled, { css } from 'styled-components/native'
+import styled from 'styled-components/native'
 
 export const PageBannerWrapper = styled.View`
   margin-horizontal: 40px;
   border-radius: 8px;
   overflow: hidden;
   margin-vertical: 30px;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+`
+export const ArrowButtonsContainer = styled.View`
+  position: absolute;
+  z-index: 100;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
 `