ordering-ui-react-native 0.16.83 → 0.16.84

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

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useUtils, useToast,	ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
-import { View, StyleSheet, BackHandler } from 'react-native'
+import { useLanguage, useUtils, useToast, ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
+import { View, StyleSheet, BackHandler, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OText, OButton } from '../shared'
 import { Container } from '../../layouts/Container'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { SingleOrderCard } from './SingleOrderCard'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   OrdersDetailsContainer,
@@ -29,20 +30,20 @@ export const MultiOrdersDetailsUI = (props: any) => {
   } = props
 
   const theme = useTheme()
-	const styles = StyleSheet.create({
+  const styles = StyleSheet.create({
     btnBackArrow: {
-			borderWidth: 0,
-			backgroundColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			padding: 0,
+      borderWidth: 0,
+      backgroundColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      padding: 0,
       marginLeft: -20
-		},
-	})
-  
+    },
+  })
+
   const { loading, orders, error } = props.ordersList
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-	const [, { showToast }] = useToast();
+  const [, { showToast }] = useToast();
 
   const walletName: any = {
     cash: {
@@ -60,7 +61,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
     }
     navigation.navigate('BusinessList');
     return true
-	}
+  }
 
   const handleGoToOrderDetails = (uuid: any) => {
     navigation.navigate('OrderDetails', { orderId: uuid })
@@ -68,7 +69,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
 
   useEffect(() => {
     if (error) {
-	  	showToast(ToastType.Error, error)
+      showToast(ToastType.Error, error)
     }
   }, [error])
 
@@ -83,11 +84,14 @@ export const MultiOrdersDetailsUI = (props: any) => {
     <OrdersDetailsContainer keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingHorizontal: 40 }}>
       <View style={{ flexDirection: 'row' }}>
         <OButton
-          imgLeftSrc={theme.images.general.arrow_left}
           imgRightSrc={null}
           style={styles.btnBackArrow}
           onClick={() => handleArrowBack()}
-          imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26
+          }}
         />
       </View>
       <Header>
@@ -202,7 +206,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           </Row>
           <Row>
             <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-            {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
+              {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
             </OText>
             <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
               {parsePrice(ordersSummary?.tax)}

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

@@ -2,6 +2,7 @@ import * as React from 'react'
 import styled, { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OText } from '../shared'
 import { Platform, TextStyle, ViewStyle, I18nManager, TouchableOpacity } from 'react-native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const TitleWrapper = styled.View`
   flex-direction: column;
@@ -61,11 +62,16 @@ const NavBar = (props: Props) => {
 	return (
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			<OButton
-				imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
+				imgLeftSrc={props.leftImg}
 				imgLeftStyle={{ width: 18 }}
 				imgRightSrc={null}
 				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
 				onClick={props?.onActionLeft}
+				icon={AntDesignIcon}
+				iconProps={{
+					name: 'arrowleft',
+					size: 26
+				}}
 			/>
 			<TitleTopWrapper>
 				{props.withIcon

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

@@ -19,15 +19,16 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
     categoryState,
     currentCart,
     handleUpdateProducts,
-    navigation
+    navigation,
+    searchValue
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
   const { width } = Dimensions.get('window');
-
+  const productsFilterd = productList?.length > 0 && productList?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf()).filter((product : any) => product?.name?.toLowerCase()?.includes(searchValue?.toLowerCase()))
   return (
-    <Container>
+    <Container hide={productsFilterd?.length === 0}>
       <OText
         size={16}
         lineHeight={24}
@@ -51,7 +52,7 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
       >
-        {productList?.length > 0 && productList?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf()).map((product: any, i: number) => (
+        {productsFilterd.map((product: any, i: number) => (
           <ProductWrapper key={'prod_' + product.id + `_${i}`} style={{ width: width - 120, }}>
             <SingleProductCard
               isSoldOut={product.inventoried && !product.quantity}

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

@@ -11,6 +11,7 @@ import { OrderTypeSelectParams } from '../../types'
 import { OIcon, OText } from '../shared'
 import NavBar from '../NavBar';
 import { ORDER_TYPES } from '../../config/constants';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const {
@@ -44,7 +45,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		if (!orderState.loading) {
 			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
-			if(!isChewLayout){
+			if (!isChewLayout) {
 				goToBack();
 			}
 		}
@@ -58,7 +59,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						horizontal
 						showsHorizontalScrollIndicator={false}
 					>
-						{chewOrderTypes?.map((type : any) => (
+						{chewOrderTypes?.map((type: any) => (
 							<TabBtn
 								key={type.value}
 								onPress={() => handleChangeOrderTypeCallback(type.value)}
@@ -108,7 +109,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
 													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
 														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-														<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
+														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>
 											</BgImage>

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

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { BusinessList as BusinessListController, useOrder } from 'ordering-components/native'
+import React from 'react'
+import { useOrder } from 'ordering-components/native'
 import { BusinessController } from '../../BusinessController'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -12,30 +12,93 @@ import {
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams) => {
+const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, style }: any) => {
+  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}
+          style={style}
+        />
+      ))}
+    </>
+  )
+}
+
+const BusinessSkeletons = () => {
+  return (
+    <>
+      {[...Array(4).keys()].map((item, i) => (
+        <Placeholder
+          Animation={Fade}
+          key={i}
+          style={{ marginBottom: 20 }}>
+          <View style={{ width: '100%' }}>
+            <PlaceholderLine
+              height={200}
+              style={{ marginBottom: 20, borderRadius: 25 }}
+            />
+            <View style={{ paddingHorizontal: 10 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}>
+                <PlaceholderLine
+                  height={25}
+                  width={40}
+                  style={{ marginBottom: 10 }}
+                />
+                <PlaceholderLine
+                  height={25}
+                  width={20}
+                  style={{ marginBottom: 10 }}
+                />
+              </View>
+              <PlaceholderLine
+                height={20}
+                width={30}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={20}
+                width={80}
+                style={{ marginBottom: 10 }}
+              />
+            </View>
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}
+
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
   const {
     navigation,
-    businessesList,
-    setBusinessLoading,
-    businessId,
+    businesses,
     onNavigationRedirect,
     isBusinessesSearchList,
-    businessLoading
   } = props
 
   const [orderState] = useOrder()
   const windowWidth = Dimensions.get('window').width;
-
   const onBusinessClick = (business: any) => {
     onNavigationRedirect('Business', { store: business.slug })
   }
-  useEffect(() => {
-    if (businessesList?.loading && businessesList?.businesses?.length === 0) {
-      setBusinessLoading(true)
-    } else {
-      setBusinessLoading(false)
-    }
-  }, [businessesList?.loading])
 
   const styles = StyleSheet.create({
     container: {
@@ -43,95 +106,31 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
     },
   });
 
-  const BusinessControllerList = ({ style }: any) => {
-    return (
-      <>
-        {businessesList.businesses?.filter((business: any) => businessId?.includes(business?.id))?.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}
-            style={style}
-          />
-        ))}
-      </>
-    )
-  }
-
-  const BusinessSkeletons = () => {
-    return (
-      <>
-        {[...Array(4).keys()].map((item, i) => (
-          <Placeholder
-            Animation={Fade}
-            key={i}
-            style={{ marginBottom: 20 }}>
-            <View style={{ width: '100%' }}>
-              <PlaceholderLine
-                height={200}
-                style={{ marginBottom: 20, borderRadius: 25 }}
-              />
-              <View style={{ paddingHorizontal: 10 }}>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  }}>
-                  <PlaceholderLine
-                    height={25}
-                    width={40}
-                    style={{ marginBottom: 10 }}
-                  />
-                  <PlaceholderLine
-                    height={25}
-                    width={20}
-                    style={{ marginBottom: 10 }}
-                  />
-                </View>
-                <PlaceholderLine
-                  height={20}
-                  width={30}
-                  style={{ marginBottom: 10 }}
-                />
-                <PlaceholderLine
-                  height={20}
-                  width={80}
-                  style={{ marginBottom: 10 }}
-                />
-              </View>
-            </View>
-          </Placeholder>
-        ))}
-      </>
-    )
-  }
-
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
         <>
-          {!businessLoading && (
+          {!businesses?.loading && (
             <BusinessControllerList
               style={{ width: windowWidth - 120, marginRight: 20 }}
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
             />
           )}
         </>
       ) : (
         <ListWrapper>
-          <BusinessControllerList />
-          {businessesList.loading && (
+          {businesses?.loading ? (
             <BusinessSkeletons />
+          ) : (
+            <BusinessControllerList
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+            />
           )}
         </ListWrapper>
       )}
@@ -139,15 +138,3 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
     </ScrollView>
   )
 }
-
-export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
-  const previousBusinessOrderedController = {
-    ...props,
-    UIComponent: PreviousBusinessOrderedUI,
-    paginationSettings: { initialPage: 1, pageSize: 50, controlType: 'infinity' }
-  }
-
-  return (
-    <BusinessListController {...previousBusinessOrderedController} />
-  )
-}

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

@@ -47,6 +47,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businessesSearchList,
 		hideOrders,
 		BusinessControllerSkeletons,
+		businesses,
+		businessPaginationProps
 	} = props
 
 	const theme = useTheme();
@@ -141,9 +143,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			if (!businessesSearchList) {
-				loadOrders(false, false, false, true)
-			}
+			loadOrders(false, false, false, true)
 		}, [navigation])
 	)
 
@@ -215,23 +215,20 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businessLoading && businessOrderIds?.length > 0 && (
+			{isBusiness && !!businessesSearchList && businesses?.loading &&  (
 				<ScrollView horizontal>
-					<BusinessControllerSkeletons />
+					<BusinessControllerSkeletons paginationProps={businessPaginationProps} />
 				</ScrollView>
 			)}
-			{isBusiness && businessOrderIds?.length > 0 && (
+			{isBusiness && (
 				<PreviousBusinessOrdered
-					businessId={businessOrderIds}
-					businessLoading={businessLoading}
-					setBusinessLoading={setBusinessLoading}
 					onNavigationRedirect={onNavigationRedirect}
-					isLoadingOrders={loading}
 					isBusinessesSearchList={!!businessesSearchList}
+					businesses={businesses}
 				/>
 			)}
 
-			{isProducts && (
+			{isProducts && !loading && (
 				<PreviousProductsOrdered
 					products={products}
 					onProductClick={onProductClick}
@@ -240,9 +237,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			)}
 			{(loading && isProducts) && (
 				<>
-					{[...Array(4).keys()].map(
+					{[...Array(!!businessesSearchList ? 1 : 4).keys()].map(
 						(item, i) => (
-							<Placeholder key={i} style={{ padding: 5, paddingLeft: 40 }} Animation={Fade}>
+							<Placeholder key={i} style={{ padding: 5, paddingLeft: !!businessesSearchList ? 0 : 40, marginBottom: !!businessesSearchList ? 38 : 0 }} Animation={Fade}>
 								<View style={{ flexDirection: 'row' }}>
 									<PlaceholderLine
 										width={24}

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

@@ -458,7 +458,7 @@ export const ProductOptionsUI = (props: any) => {
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
 				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} width={30} />
+					<IconAntDesign name='arrowleft' size={26} />
 				</TopActions>
 			</TopHeader>
 			{!error && (
@@ -981,7 +981,7 @@ export const ProductOptionsUI = (props: any) => {
 							<OText size={16} lineHeight={24} weight={'600'}>
 								{productCart.total ? parsePrice(productCart?.total) : ''}
 							</OText>
-							{product?.minimum_per_order && productCart?.quantity <= product?.minimum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
+							{product?.minimum_per_order && productCart?.quantity <= product?.minimum_per_order && productCart?.quantity !== 1 && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
 							{product?.maximum_per_order && productCart?.quantity >= product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
 						</View>
 						{productCart && !isSoldOut && maxProductQuantity > 0 && (
@@ -1031,7 +1031,7 @@ export const ProductOptionsUI = (props: any) => {
 										disabled={
 											maxProductQuantity <= 0 ||
 											productCart.quantity >= maxProductQuantity ||
-											productCart.quantity >= product?.maximum_per_order ||
+											(productCart.quantity >= product?.maximum_per_order && product?.maximum_per_order) ||
 											isSoldOut
 										}>
 										<OIcon
@@ -1040,7 +1040,7 @@ export const ProductOptionsUI = (props: any) => {
 											color={
 												maxProductQuantity <= 0 ||
 													productCart.quantity >= maxProductQuantity ||
-													productCart.quantity >= product?.maximum_per_order ||
+													(productCart.quantity >= product?.maximum_per_order && product?.maximum_per_order) ||
 													isSoldOut
 													? theme.colors.backgroundGray
 													: theme.colors.backgroundDark

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -42,8 +42,6 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
-	const fadeAnim = useRef(new Animated.Value(enableIntersection ? 0 : 1)).current;
-
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
@@ -123,14 +121,6 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
-	
-	const fadeIn = () => {
-		Animated.timing(fadeAnim, {
-			toValue: 1,
-			duration: 500,
-			useNativeDriver: true
-		}).start();
-	};
 
 	const handleChangeFavorite = () => {
 		if (auth) {
@@ -143,14 +133,9 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const handleChangeIntersection = () => {
 		if (enableIntersection) {
 			setIsIntersectionObserver(true);
-			fadeIn();
 		}
 	}
 
-	useEffect(() => {
-		if (enableIntersection) fadeIn()
-	}, [enableIntersection])
-
 	return (
 		<InView style={{ minHeight: hideAddButton ? 125 : 165 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
@@ -238,23 +223,14 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</RibbonBox>
 							)}
 							{product?.images && (
-								<Animated.View
-									style={[
-										{
-											// Bind opacity to animated value
-											opacity: fadeAnim
-										}
-									]}
-								>
-									<FastImage
-										style={styles.productStyle}
-										source={{
-											uri: optimizeImage(product?.images, 'h_250,c_limit'),
-											priority: FastImage.priority.normal,
-										}}
-										resizeMode={FastImage.resizeMode.cover}
-									/>
-								</Animated.View>
+								<FastImage
+									style={styles.productStyle}
+									source={{
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
 							)}
 						</LogoWrapper>
 

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
 import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
@@ -21,6 +21,7 @@ import {
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const {
@@ -161,11 +162,14 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			<>
 				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
 					<OButton
-						imgLeftSrc={theme.images.general.arrow_left}
 						imgRightSrc={null}
 						style={styles.btnBackArrow}
 						onClick={() => onGoBack()}
-						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+						icon={AntDesignIcon}
+						iconProps={{
+							name: 'arrowleft',
+							size: 26
+						}}
 					/>
 				</View>
 				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>