ordering-ui-react-native 0.17.63 → 0.17.65

package/package.json

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

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

@@ -48,7 +48,7 @@ import { OrderTypeSelector } from '../../../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../../../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../../../HighestRatedBusinesses';
-import { getTypesText, convertToRadian } from '../../../../utils';
+import { getTypesText } from '../../../../utils';
 import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
@@ -189,6 +189,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	};
 
+	const convertToRadian = (value: number) => {
+		return value * Math.PI / 180
+	}
+
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
 		const R = 6371 // km
 		const dLat = convertToRadian(lat2 - lat1)

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%;
 `