ordering-ui-react-native 0.16.66 → 0.16.67

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -59,6 +59,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -144,8 +146,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+		fadeIn()
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
 					{business?.ribbon?.enabled && (
@@ -167,6 +186,13 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
+					<Animated.View
+						style={[
+							{
+								opacity: fadeAnim
+							}
+						]}
+					>
 						<FastImage
 							style={{ height: 120 }}
 							source={{
@@ -175,6 +201,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
+					</Animated.View>
 						{(businessFeatured ?? business?.featured) && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -11,7 +11,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Image, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OText } from '../shared';
@@ -43,6 +43,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [orderingTheme] = useOrderingTheme()
 	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
@@ -122,6 +124,14 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductInventory,
 	);
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
 	const handleChangeFavorite = () => {
 		if (auth) {
 			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
@@ -130,8 +140,17 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		}
 	}
 
+	const handleChangeIntersection = () => {
+		setIsIntersectionObserver(true);
+		fadeIn();
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}
@@ -205,14 +224,23 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</RibbonBox>
 							)}
 							{product?.images && (
-								<FastImage
-									style={styles.productStyle}
-									source={{
-										uri: optimizeImage(product?.images, 'h_250,c_limit'),
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
+								<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>
 							)}
 						</LogoWrapper>