entry animation added| Aman Singh (#673)

src/screens/Dashboard/CashCollectedGraph.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import React from 'react';
+import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Text from '../../../RN-UI-LIB/src/components/Text';
 import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
@@ -63,4 +63,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CashCollectedGraph;
+export default memo(CashCollectedGraph);

src/screens/Dashboard/PerformanceLevelGraph.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Heading from '../../../RN-UI-LIB/src/components/Heading';
 import Text from '../../../RN-UI-LIB/src/components/Text';
@@ -200,4 +200,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PerformanceLevelGraph;
+export default memo(PerformanceLevelGraph);

src/screens/Dashboard/PerformanceMeter.tsx

@@ -1,5 +1,11 @@
-import React, { useRef, useState } from 'react';
-import { View, StyleSheet, Pressable, Animated, LayoutChangeEvent, Easing } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  LayoutAnimation,
+  UIManager,
+} from 'react-native';
 import Text from '../../../RN-UI-LIB/src/components/Text';
 import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
 import { GenericStyles, getShadowStyle } from '../../../RN-UI-LIB/src/styles';
@@ -12,61 +18,41 @@ import { getPerformanceLevel } from './utils';
 import { addClickstreamEvent } from '@services/clickstreamEventService';
 import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 const PerformanceMeter = () => {
   const performanceData = useAppSelector((state) => state.agentPerformance.performanceData);
   const agentId = useAppSelector((state) => state?.user?.user?.referenceId);
   const { performanceLevel } = performanceData || {};
   const { isGraphExpanded } = useAppSelector((state) => state.agentPerformance);
-  const [isGraphCompletelyExpanded, setIsGraphCompletelyExpanded] = useState(false);
   const dispatch = useAppDispatch();
-
-  const [bodySectionHeight, setBodySectionHeight] = useState(0);
-  const animatedController = useRef(new Animated.Value(isGraphExpanded ? 1 : 0)).current;
-
-  const bodyHeight = animatedController.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, bodySectionHeight],
-  });
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    setBodySectionHeight(event.nativeEvent.layout.height);
-  };
+  const [isGraphCompletelyExpanded, setIsGraphCompletelyExpanded] = useState(false);
 
   const showGraphHandler = () => {
-    const sharedAnimationConfig = {
-      duration: 500,
-      useNativeDriver: false,
-    };
-    if (isGraphExpanded) {
-      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED, {
-        agentId,
-        action: 'collapse'
-      });
-      Animated.timing(animatedController, {
-        ...sharedAnimationConfig,
-        toValue: 0,
-        easing: Easing.bezier(0.4, 0.0, 0.2, 1),
-      }).start(() => setIsGraphCompletelyExpanded(false));
-    } else {
-      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED, {
-        agentId,
-        action: 'expand'
-      });
-      Animated.timing(animatedController, {
-        ...sharedAnimationConfig,
-        toValue: 1,
-        easing: Easing.bezier(0.4, 0.0, 0.2, 1),
-      }).start(() => setIsGraphCompletelyExpanded(true));
-    }
+    const action = isGraphExpanded ? 'collapse' : 'expand';
+
+    addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED, {
+      agentId,
+      action,
+    });
+
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     dispatch(setIsGraphExpanded(!isGraphExpanded));
   };
 
+  useEffect(() => {
+    setIsGraphCompletelyExpanded(isGraphExpanded);
+  }, [isGraphExpanded]);
+
   return (
     <View style={styles.container}>
       <View style={GenericStyles.plr16}>
-        <View
-          style={[GenericStyles.row, GenericStyles.justifyContentSpaceBetween, GenericStyles.pv12]}
-        >
+        <View style={[GenericStyles.row, GenericStyles.justifyContentSpaceBetween, GenericStyles.pv12]}>
           <Text style={[GenericStyles.fontSize13]}>Current Performance level</Text>
           <View
             style={[
@@ -84,19 +70,12 @@ const PerformanceMeter = () => {
 
       <View style={[GenericStyles.borderTop, GenericStyles.w100]} />
 
-      <Animated.View style={[GenericStyles.overflowHidden, { height: bodyHeight }]}>
-        <View style={styles.content} onLayout={handleLayout}>
-          {isGraphCompletelyExpanded ? <CashCollectedGraph /> : null}
-        </View>
-      </Animated.View>
+      <View style={{ height: isGraphCompletelyExpanded ? undefined : 0, overflow: 'hidden' }}>
+        <CashCollectedGraph />
+      </View>
 
-      <Pressable
-        onPress={showGraphHandler}
-        style={[GenericStyles.centerAlignedRow, GenericStyles.p12]}
-      >
-        <Text style={{ color: COLORS.TEXT.BLUE, fontWeight: '600' }}>
-          Cash collected over the month
-        </Text>
+      <Pressable onPress={showGraphHandler} style={[GenericStyles.centerAlignedRow, GenericStyles.p12]}>
+        <Text style={{ color: COLORS.TEXT.BLUE, fontWeight: '600' }}>Cash collected over the month</Text>
         <View style={[styles.arrowIcon, isGraphExpanded && styles.expanded]}>
           <ArrowDownOutlineIcon fillColor={COLORS.BASE.BLUE} />
         </View>
@@ -137,11 +116,6 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     color: COLORS.TEXT.DARK,
   },
-  content: {
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-  },
 });
 
 export default PerformanceMeter;