From 7fd57494f97163b88e0eb4bf2de3ebee2f982fe8 Mon Sep 17 00:00:00 2001
From: Ashish Deo <ashish.deo@navi.com>
Date: Wed, 13 Mar 2024 18:45:50 +0530
Subject: [PATCH] TP-53746 | added animation on buttons (#716)

---
 RN-UI-LIB                                     |   2 +-
 android/app/build.gradle                      |   4 +-
 package.json                                  |   6 +-
 src/components/filters/Filters.tsx            |   2 +
 src/components/form/index.tsx                 |   2 +
 src/components/utlis/commonFunctions.ts       |  19 +-
 src/constants/screenTransitionAnimation.tsx   |  77 ++++++
 src/reducer/userSlice.ts                      |  10 +-
 src/screens/Dashboard/DashBoardScreens.tsx    |  43 +---
 src/screens/Dashboard/PerformanceCardV1.tsx   |  53 +++--
 src/screens/Profile/index.tsx                 |  41 ++--
 .../NewAddressContainer.tsx                   |   1 +
 src/screens/addressGeolocation/index.tsx      |   1 +
 src/screens/allCases/CaseItem.tsx             |   1 +
 src/screens/allCases/EmptyList.tsx            |   1 +
 src/screens/auth/ProtectedRouter.tsx          |  43 ++--
 src/screens/caseDetails/CaseDetailStack.tsx   |   6 +-
 .../caseDetails/CollectionCaseDetail.tsx      |  81 ++++---
 .../feedback/FeedbackDetailItem.tsx           | 222 ++++++++++--------
 .../caseDetails/feedback/FeedbackListItem.tsx |  60 +++--
 .../PhoneNumberSelectionBottomSheet.tsx       |   7 +
 .../DailyCommitmentBottomSheet.tsx            |   1 +
 src/screens/emiSchedule/EmiScheduleItem.tsx   |   4 +-
 src/screens/login/OtpInput.tsx                |   1 +
 src/screens/login/index.tsx                   |   1 +
 src/screens/registerPayements/Foreclosure.tsx |  25 +-
 .../registerPayements/OnlinePayment.tsx       |   1 +
 yarn.lock                                     |  38 +++
 28 files changed, 469 insertions(+), 284 deletions(-)
 create mode 100644 src/constants/screenTransitionAnimation.tsx

diff --git a/RN-UI-LIB b/RN-UI-LIB
index 2a76bdea..bbde5cc0 160000
--- a/RN-UI-LIB
+++ b/RN-UI-LIB
@@ -1 +1 @@
-Subproject commit 2a76bdead5cfcb17836d7259ffb7db4298615aa6
+Subproject commit bbde5cc0ed594494765a6af38f9ed576ef038fc4
diff --git a/android/app/build.gradle b/android/app/build.gradle
index c9d43c1a..c5c8d60d 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -134,8 +134,8 @@ def reactNativeArchitectures() {
     return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
 }
 
-def VERSION_CODE = 132
-def VERSION_NAME = "2.8.3"
+def VERSION_CODE = 133
+def VERSION_NAME = "2.8.4"
 
 android {
     ndkVersion rootProject.ext.ndkVersion
diff --git a/package.json b/package.json
index cb789ecb..bd7c42f8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "AV_APP",
-  "version": "2.8.3",
-  "buildNumber": "132",
+  "version": "2.8.4",
+  "buildNumber": "133",
   "private": true,
   "scripts": {
     "android:dev": "yarn move:dev && react-native run-android",
@@ -57,6 +57,7 @@
     "@react-navigation/bottom-tabs": "6.5.5",
     "@react-navigation/native": "6.1.4",
     "@react-navigation/native-stack": "6.9.4",
+    "@react-navigation/stack": "6.3.21",
     "@reduxjs/toolkit": "1.9.1",
     "@sentry/react-native": "5.5.0",
     "@shopify/flash-list": "1.4.3",
@@ -83,6 +84,7 @@
     "react-native-fs": "2.20.0",
     "react-native-geolocation-service": "5.3.1",
     "react-native-get-random-values": "^1.8.0",
+    "react-native-gesture-handler": "2.15.0",
     "react-native-get-sms-android": "2.1.0",
     "react-native-gzip": "1.0.0",
     "react-native-image-picker": "4.10.2",
diff --git a/src/components/filters/Filters.tsx b/src/components/filters/Filters.tsx
index 892284ee..918840fb 100644
--- a/src/components/filters/Filters.tsx
+++ b/src/components/filters/Filters.tsx
@@ -144,12 +144,14 @@ const Filters: React.FC<{
           onPress={handleClearAll}
           style={GenericStyles.fill}
           buttonStyle={styles.btn}
+          isAnimationEnabled={true}
         />
         <Button
           title="Apply"
           onPress={handleSubmit}
           style={GenericStyles.fill}
           buttonStyle={styles.btn}
+          isAnimationEnabled={true}
         />
       </View>
     </View>
diff --git a/src/components/form/index.tsx b/src/components/form/index.tsx
index 0ffba372..4c3e78f5 100644
--- a/src/components/form/index.tsx
+++ b/src/components/form/index.tsx
@@ -488,6 +488,7 @@ const Widget: React.FC<IWidget> = (props) => {
             disabled={isLeaf && isSubmitting}
             onPress={handleBackButton}
             leftIcon={<ArrowSolidIcon size={10} />}
+            isAnimationEnabled={true}
           />
           <Button
             style={[styles.autoFlex, styles.mH16]}
@@ -503,6 +504,7 @@ const Widget: React.FC<IWidget> = (props) => {
               !isLeaf && <ArrowSolidIcon size={10} fillColor={COLORS.TEXT.WHITE} rotateY={180} />
             }
             testID={isLeaf ? 'test_submit' : 'test_next'}
+            isAnimationEnabled={true}
           />
         </View>
         <NudgeSuspiciousFeedbackBottomSheet
diff --git a/src/components/utlis/commonFunctions.ts b/src/components/utlis/commonFunctions.ts
index b0682149..f0bd4f9a 100644
--- a/src/components/utlis/commonFunctions.ts
+++ b/src/components/utlis/commonFunctions.ts
@@ -26,7 +26,9 @@ import { IGeolocationCoordinate } from '../../types/addressGeolocation.types';
 import { toast } from '@rn-ui-lib/components/toast';
 import { sendContentToWhatsapp } from './DeviceUtils';
 import { ToastMessages } from '@screens/allCases/constants';
-import VersionNumber from 'react-native-version-number';  
+import VersionNumber from 'react-native-version-number';
+import store, { AppDispatch } from '../../store/store';
+import { setShowTransitionLoader } from '@reducers/userSlice';
 
 const fs = ReactNativeBlobUtil.fs;
 
@@ -244,12 +246,12 @@ export function getAppVersion(): string {
   return packageJson.version;
 }
 
-export const  getBuildVersion = (): string => {
+export const getBuildVersion = (): string => {
   return packageJson?.buildNumber || VersionNumber.buildVersion;
-}
+};
 
 export const getDocumentList = (caseDetails: CaseDetail) => {
-  if(!caseDetails) {
+  if (!caseDetails) {
     return [];
   }
   return caseDetails.caseType === CaseAllocationType.ADDRESS_VERIFICATION_CASE
@@ -335,6 +337,15 @@ export const getScreenFocusListenerObj = ({ route }: { route: RouteProp<GenericT
   focus: () => {
     crashlytics().log(JSON.stringify(route));
   },
+  transitionStart: () => {
+    store.dispatch(setShowTransitionLoader(true));
+    setTimeout(() => {
+      store.dispatch(setShowTransitionLoader(false));
+    }, 150);
+  },
+  transitionEnd: () => {
+    store.dispatch(setShowTransitionLoader(false));
+  },
 });
 
 export const convertTo24HourFormat = (time: string) => {
diff --git a/src/constants/screenTransitionAnimation.tsx b/src/constants/screenTransitionAnimation.tsx
new file mode 100644
index 00000000..a91e3b65
--- /dev/null
+++ b/src/constants/screenTransitionAnimation.tsx
@@ -0,0 +1,77 @@
+import {
+  StackCardInterpolatedStyle,
+  StackCardInterpolationProps,
+  StackNavigationOptions,
+} from '@react-navigation/stack';
+import { Animated } from 'react-native';
+
+function forHorizontalIOS({
+  current,
+  next,
+  inverted,
+  layouts: { screen },
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const translateFocused = Animated.multiply(
+    current.progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [screen.width, 0],
+      extrapolate: 'clamp',
+    }),
+    inverted
+  );
+
+  const translateUnfocused = next
+    ? Animated.multiply(
+        next.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, screen.width * -0.3],
+          extrapolate: 'clamp',
+        }),
+        inverted
+      )
+    : 0;
+
+  const overlayOpacity = current.progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.07],
+    extrapolate: 'clamp',
+  });
+
+  const shadowOpacity = current.progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.3],
+    extrapolate: 'clamp',
+  });
+
+  return {
+    cardStyle: {
+      transform: [
+        // Translation for the animation of the current card
+        { translateX: translateFocused },
+        // Translation for the animation of the card on top of this
+        { translateX: translateUnfocused },
+      ],
+    },
+    overlayStyle: { opacity: overlayOpacity },
+    shadowStyle: { shadowOpacity },
+  };
+}
+
+const transitionConfig = {
+  animation: 'spring',
+  config: {
+    stiffness: 500,
+    damping: 100,
+    mass: 0.1,
+    overshootClamping: true,
+    restDisplacementThreshold: 0.01,
+    restSpeedThreshold: 0.01,
+  },
+};
+
+export const DEFAULT_SCREEN_OPTIONS: StackNavigationOptions = {
+  headerShown: false,
+  freezeOnBlur: true,
+  transitionSpec: { open: transitionConfig, close: transitionConfig },
+  cardStyleInterpolator: forHorizontalIOS,
+};
diff --git a/src/reducer/userSlice.ts b/src/reducer/userSlice.ts
index f84be2af..b0eafabb 100644
--- a/src/reducer/userSlice.ts
+++ b/src/reducer/userSlice.ts
@@ -70,6 +70,7 @@ export interface IUserSlice extends IUser {
     attendanceDate: string;
   };
   isAgentPerformanceDashboardVisible: boolean;
+  showTransitionLoader: boolean;
 }
 
 const initialState: IUserSlice = {
@@ -92,6 +93,7 @@ const initialState: IUserSlice = {
     attendanceDate: '',
   },
   isAgentPerformanceDashboardVisible: false,
+  showTransitionLoader: false,
 };
 
 export const userSlice = createSlice({
@@ -146,7 +148,10 @@ export const userSlice = createSlice({
     },
     setIsAgentPerformanceDashboardVisible: (state, action) => {
       state.isAgentPerformanceDashboardVisible = action.payload;
-    }
+    },
+    setShowTransitionLoader: (state, action) => {
+      state.showTransitionLoader = action.payload;
+    },
   },
 });
 
@@ -159,7 +164,8 @@ export const {
   setIsExternalAgent,
   setCaseSyncLock,
   setAgentAttendance,
-  setIsAgentPerformanceDashboardVisible
+  setIsAgentPerformanceDashboardVisible,
+  setShowTransitionLoader,
 } = userSlice.actions;
 
 export default userSlice.reducer;
diff --git a/src/screens/Dashboard/DashBoardScreens.tsx b/src/screens/Dashboard/DashBoardScreens.tsx
index 5d41ee77..946de8ee 100644
--- a/src/screens/Dashboard/DashBoardScreens.tsx
+++ b/src/screens/Dashboard/DashBoardScreens.tsx
@@ -1,12 +1,11 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import Dashboard from '.';
-import { SCREEN_ANIMATION_DURATION } from '../../common/Constants';
 import CashCollected from '../cashCollected';
 import FilteredCases from '../filteredCases';
-import { Animation } from './interface';
+import { DEFAULT_SCREEN_OPTIONS } from '@constants/screenTransitionAnimation';
 
-const Stack = createNativeStackNavigator();
+const Stack = createStackNavigator();
 
 export enum DashBoardScreensEnum {
   DASHBOARD_MAIN = 'dashboardMain',
@@ -18,39 +17,11 @@ function DashBoardScreens() {
   return (
     <Stack.Navigator
       initialRouteName={DashBoardScreensEnum.DASHBOARD_MAIN}
-      screenOptions={{
-        header: () => null,
-        animation: 'none',
-        animationDuration: SCREEN_ANIMATION_DURATION,
-      }}
+      screenOptions={DEFAULT_SCREEN_OPTIONS}
     >
-      <Stack.Screen
-        name={DashBoardScreensEnum.DASHBOARD_MAIN}
-        component={Dashboard}
-        options={{
-          header: () => null,
-          animation: 'none',
-          animationDuration: SCREEN_ANIMATION_DURATION,
-        }}
-      />
-      <Stack.Screen
-        name={DashBoardScreensEnum.CASH_COLLECTED}
-        component={CashCollected}
-        options={{
-          header: () => null,
-          animationDuration: SCREEN_ANIMATION_DURATION,
-          animation: Animation.SLIDE_FROM_RIGHT,
-        }}
-      />
-      <Stack.Screen
-        name={DashBoardScreensEnum.FILTERED_CASES}
-        component={FilteredCases}
-        options={{
-          header: () => null,
-          animationDuration: SCREEN_ANIMATION_DURATION,
-          animation: Animation.SLIDE_FROM_RIGHT,
-        }}
-      />
+      <Stack.Screen name={DashBoardScreensEnum.DASHBOARD_MAIN} component={Dashboard} />
+      <Stack.Screen name={DashBoardScreensEnum.CASH_COLLECTED} component={CashCollected}/>
+      <Stack.Screen name={DashBoardScreensEnum.FILTERED_CASES} component={FilteredCases}/>
     </Stack.Navigator>
   );
 }
diff --git a/src/screens/Dashboard/PerformanceCardV1.tsx b/src/screens/Dashboard/PerformanceCardV1.tsx
index ce6bdd1e..70297bb4 100644
--- a/src/screens/Dashboard/PerformanceCardV1.tsx
+++ b/src/screens/Dashboard/PerformanceCardV1.tsx
@@ -1,37 +1,47 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { COLORS } from '@rn-ui-lib/colors';
 import Heading from '@rn-ui-lib/components/Heading';
 import Text from '@rn-ui-lib/components/Text';
 import Chevron from '@rn-ui-lib/icons/Chevron';
 import { GenericStyles, getShadowStyle } from '@rn-ui-lib/styles';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableHighlight, View } from 'react-native';
 import { PerformanceCardProps } from './interface';
 
 const PerformanceCardV1 = (props: PerformanceCardProps) => {
   const { item, handleActionItemClick } = props;
+
+
+
   return (
     <View key={item.convertedText} style={cardStyles.pressableCard}>
-      <Heading style={cardStyles.totalCount}>{item.totalConverted}</Heading>
-      <Text style={cardStyles.title}>{item.convertedText}</Text>
-      <TouchableOpacity onPress={() => handleActionItemClick(item)} activeOpacity={0.8}>
-        <View style={[GenericStyles.borderTop, GenericStyles.w100]} />
-        <View
-          style={[
-            GenericStyles.row,
-            GenericStyles.alignCenter,
-            GenericStyles.spaceBetween,
-            GenericStyles.pv12,
-          ]}
+      <Heading style={[cardStyles.totalCount, GenericStyles.ml4]}>{item.totalConverted}</Heading>
+      <Text style={[cardStyles.title, GenericStyles.ml8]}>{item.convertedText}</Text>
+      <View style={[GenericStyles.pv12, GenericStyles.justifyContentCenter]}>
+        <View style={[GenericStyles.borderTop, GenericStyles.w100, GenericStyles.mb8]} />
+        <TouchableHighlight
+          onPress={()=>handleActionItemClick(item)}
+          style={GenericStyles.br4}
+          underlayColor={COLORS.BACKGROUND.BLUE_LIGHT_3}
+          activeOpacity={0.8}
+          hitSlop={{ top: 16, bottom: 16, left: 4, right: 4 }}
         >
-          <View style={GenericStyles.row}>
-            <Text style={[cardStyles.subTitle, cardStyles.fw700]}>{item.totalNotConverted} </Text>
-            <Text style={cardStyles.subTitle}>{item.notConvertedText}</Text>
+          <View
+            style={[
+              GenericStyles.row,
+              GenericStyles.alignCenter,
+              GenericStyles.spaceBetween,
+            ]}
+          >
+            <View style={[GenericStyles.row, GenericStyles.ml8]}>
+              <Text style={[cardStyles.subTitle, cardStyles.fw700]}>{item.totalNotConverted} </Text>
+              <Text style={cardStyles.subTitle}>{item.notConvertedText}</Text>
+            </View>
+            <View style={[cardStyles.rightIcon, GenericStyles.mr8]}>
+              <Chevron fillColor={COLORS.TEXT.BLUE} />
+            </View>
           </View>
-          <View style={cardStyles.rightIcon}>
-            <Chevron fillColor={COLORS.TEXT.BLUE} />
-          </View>
-        </View>
-      </TouchableOpacity>
+        </TouchableHighlight>
+      </View>
     </View>
   );
 };
@@ -75,6 +85,7 @@ export const cardStyles = StyleSheet.create({
     borderRadius: 6,
     position: 'relative',
   },
+  
 });
 
 export default PerformanceCardV1;
diff --git a/src/screens/Profile/index.tsx b/src/screens/Profile/index.tsx
index f4546b2b..bb62135c 100644
--- a/src/screens/Profile/index.tsx
+++ b/src/screens/Profile/index.tsx
@@ -126,13 +126,10 @@ const Profile: React.FC = () => {
 
   const helpButtonClickHandler = () => Linking.openURL(supportLink);
 
-  
   const hideUploadImageBtn =
     approvalStatus === ImageApprovalStatus.PENDING ||
     approvalStatus === ImageApprovalStatus.APPROVED;
 
-  
-
   const showCompletedCases = !isTeamLead || selectedAgent?.referenceId === MY_CASE_ITEM.referenceId;
 
   const [showForm, setShowForm] = useState(false);
@@ -150,22 +147,22 @@ const Profile: React.FC = () => {
         showAvatarIcon
         bottomActionable={
           originalImageUri && pendingCases?.length ? (
-            <Pressable
+            <Button
+              title="View ID card"
+              variant="tertiaryText"
               onPress={() => {
                 addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ID_CARD_CLICKED);
                 navigateToScreen(PageRouteEnum.AGENT_ID_CARD);
               }}
-                style={styles.bottomActionable}
-            >
-                <View style={[GenericStyles.row, GenericStyles.alignStart]}>
-                  <Text small style={styles.whiteText}>
-                    View ID card
-                  </Text>
-                  <View style={{ transform: [{ rotate: '180deg' }] }}>
-                    <ArrowSolidIcon fillColor={COLORS.TEXT.WHITE} />
-                  </View>
+              style={styles.bottomActionable}
+              textStyle={[styles.whiteText, GenericStyles.fontSize12]}
+              isAnimationEnabled={true}
+              rightIcon={
+                <View style={styles.iconContainer}>
+                  <ArrowSolidIcon fillColor={COLORS.TEXT.WHITE} />
                 </View>
-            </Pressable>
+              }
+            />
           ) : null
         }
         rightActionable={
@@ -222,15 +219,15 @@ const Profile: React.FC = () => {
             {numberOfCompletedCases > 2 ? (
               <Button
                 title="View all completed cases"
-                variant="primaryText"
+                variant="secondaryText"
                 style={[
                   GenericStyles.w100,
                   GenericStyles.br8,
                   GenericStyles.mt6,
                   GenericStyles.mb12,
-                  GenericStyles.whiteBackground,
                 ]}
                 onPress={handleViewAllCases}
+                isAnimationEnabled={true}
               />
             ) : null}
           </View>
@@ -274,8 +271,6 @@ const Profile: React.FC = () => {
         />
       )}
       <GoogleFormModal showForm={showForm} setShowForm={setShowForm} />
-
-      
     </View>
   );
 };
@@ -302,15 +297,21 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   bottomActionable: {
-    padding: 2,
     borderRadius: 4,
-    alignSelf: 'flex-start',
+    right: 8,
   },
   whiteText: {
     color: COLORS.TEXT.WHITE,
+    marginRight: 2,
+    marginTop: 2,
+    marginBottom : 2,
   },
   attendanceContainer: {
     backgroundColor: COLORS.BACKGROUND.VIOLET,
     padding: 8,
   },
+  iconContainer: {
+    marginBottom: 4,
+    transform: [{ rotate: '180deg' }],
+  },
 });
diff --git a/src/screens/addressGeolocation/NewAddressContainer.tsx b/src/screens/addressGeolocation/NewAddressContainer.tsx
index 6c36528d..2e18ec12 100644
--- a/src/screens/addressGeolocation/NewAddressContainer.tsx
+++ b/src/screens/addressGeolocation/NewAddressContainer.tsx
@@ -209,6 +209,7 @@ const NewAddressContainer: React.FC<INewAddressContainer> = ({ route: routeParam
           showLoader={isLoading}
           disabled={!isValid || isLoading}
           onPress={handleSubmit}
+          isAnimationEnabled={true}
         />
       </View>
     </ScrollView>
diff --git a/src/screens/addressGeolocation/index.tsx b/src/screens/addressGeolocation/index.tsx
index f81cfac5..78aedb99 100644
--- a/src/screens/addressGeolocation/index.tsx
+++ b/src/screens/addressGeolocation/index.tsx
@@ -257,6 +257,7 @@ const AddressGeolocation: React.FC<IAddressGeolocation> = ({ route: routeParams
               title="New address"
               style={GenericStyles.w100}
               onPress={handleNewAddressCta}
+              isAnimationEnabled={true}
               leftIcon={
                 <View style={GenericStyles.mr10}>
                   <PlusIcon />
diff --git a/src/screens/allCases/CaseItem.tsx b/src/screens/allCases/CaseItem.tsx
index e18203f8..f3287059 100644
--- a/src/screens/allCases/CaseItem.tsx
+++ b/src/screens/allCases/CaseItem.tsx
@@ -79,6 +79,7 @@ const CaseItem: React.FC<ICaseItemProps> = ({
           title="Add more cases"
           style={[GenericStyles.w100, GenericStyles.mt4]}
           onPress={handleAddVisitPlan}
+          isAnimationEnabled={true}
         />
       );
     }
diff --git a/src/screens/allCases/EmptyList.tsx b/src/screens/allCases/EmptyList.tsx
index 01f48a5f..c735ea6e 100644
--- a/src/screens/allCases/EmptyList.tsx
+++ b/src/screens/allCases/EmptyList.tsx
@@ -158,6 +158,7 @@ const EmptyList: React.FC<IEmptyList> = (props) => {
               title={btnDetails.btnText}
               style={[GenericStyles.w100, GenericStyles.mt24]}
               onPress={btnDetails.btnHandler}
+              isAnimationEnabled={true}
             />
           ) : null}
         </View>
diff --git a/src/screens/auth/ProtectedRouter.tsx b/src/screens/auth/ProtectedRouter.tsx
index aacf075e..e58ea514 100644
--- a/src/screens/auth/ProtectedRouter.tsx
+++ b/src/screens/auth/ProtectedRouter.tsx
@@ -1,11 +1,7 @@
-import {
-  NativeStackNavigationOptions,
-  createNativeStackNavigator,
-} from '@react-navigation/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';
 import React, { useEffect, useState } from 'react';
 import { _map, MILLISECONDS_IN_A_MINUTE } from '../../../RN-UI-LIB/src/utlis/common';
 import { getNotifications, notificationAction } from '../../action/notificationActions';
-import { SCREEN_ANIMATION_DURATION } from '../../common/Constants';
 import { getScreenFocusListenerObj } from '../../components/utlis/commonFunctions';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import useFirestoreUpdates from '../../hooks/useFirestoreUpdates';
@@ -25,8 +21,9 @@ import useResyncFirebase from '@hooks/useResyncFirebase';
 import CaseDetailStack from '@screens/caseDetails/CaseDetailStack';
 import { getFirestoreResyncIntervalInMinutes } from '@common/AgentActivityConfigurableConstants';
 import AgentIdCard from '@screens/Profile/AgentIdCard';
+import { DEFAULT_SCREEN_OPTIONS } from '../../constants/screenTransitionAnimation';
 
-const Stack = createNativeStackNavigator();
+const Stack = createStackNavigator();
 
 export enum PageRouteEnum {
   HOME = 'Home',
@@ -39,12 +36,6 @@ export enum PageRouteEnum {
   AGENT_ID_CARD = 'AgentIdCard',
 }
 
-export const DEFAULT_SCREEN_OPTIONS: NativeStackNavigationOptions = {
-  headerShown: false,
-  animation: 'none',
-  animationDuration: SCREEN_ANIMATION_DURATION,
-  freezeOnBlur: true,
-};
 
 const ProtectedRouter = () => {
   const { notificationsWithActions } = useAppSelector((state) => state.notifications);
@@ -73,7 +64,7 @@ const ProtectedRouter = () => {
     }
   }, [isOnline, notificationsWithActions]);
 
-  // This checks for unsubmitted feedbacks in case of offline and retry submitting them
+  // This checks for un-submitted feedbacks in case of offline and retry submitting them
   interactionsHandler();
 
   // Firestore listener hook
@@ -81,6 +72,12 @@ const ProtectedRouter = () => {
 
   const resyncFirebase = useResyncFirebase();
 
+
+
+
+
+
+
   const stopLocationPolling = usePolling(() => {
     CaptureGeolocation.watchLocation((location: DeviceLocation) => {
       return dispatch(setDeviceGeolocation(location));
@@ -98,28 +95,22 @@ const ProtectedRouter = () => {
     };
   }, []);
 
-  // if (isLoading) return <FullScreenLoader loading={isLoading} />;
+  //if (isLoading) return <FullScreenLoader loading={isLoading} />;
+
+
 
   return (
-    <Stack.Navigator
-      screenOptions={DEFAULT_SCREEN_OPTIONS}
-      screenListeners={getScreenFocusListenerObj}
-    >
+    <Stack.Navigator screenOptions={DEFAULT_SCREEN_OPTIONS} screenListeners={getScreenFocusListenerObj} >
+
       <Stack.Screen name={PageRouteEnum.HOME} component={AllCasesMain} />
       <Stack.Screen name={PageRouteEnum.CASE_DETAIL_STACK} component={CaseDetailStack} />
-      <Stack.Screen
-        name={PageRouteEnum.NEARBY_CASES}
-        component={NearbyCases}
-        options={{
-          ...DEFAULT_SCREEN_OPTIONS,
-          animation: 'slide_from_right',
-        }}
-      />
+      <Stack.Screen name={PageRouteEnum.NEARBY_CASES} component={NearbyCases} />
       <Stack.Screen name={PageRouteEnum.TODO_LIST} component={TodoList} />
       <Stack.Screen name={PageRouteEnum.COMPLETED_CASES} component={CompletedCase} />
       <Stack.Screen name={PageRouteEnum.NOTIFICATIONS} component={Notifications} />
       <Stack.Screen name={PageRouteEnum.IMPERSONATED_LOGIN} component={ImpersonatedUser} />
       <Stack.Screen name={PageRouteEnum.AGENT_ID_CARD} component={AgentIdCard} />
+
     </Stack.Navigator>
   );
 };
diff --git a/src/screens/caseDetails/CaseDetailStack.tsx b/src/screens/caseDetails/CaseDetailStack.tsx
index e3466b8c..92004000 100644
--- a/src/screens/caseDetails/CaseDetailStack.tsx
+++ b/src/screens/caseDetails/CaseDetailStack.tsx
@@ -1,5 +1,5 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { DEFAULT_SCREEN_OPTIONS } from '@screens/auth/ProtectedRouter';
+import {createStackNavigator} from '@react-navigation/stack';
+import { DEFAULT_SCREEN_OPTIONS } from '@constants/screenTransitionAnimation';
 import CollectionCaseDetails from './CollectionCaseDetail';
 import CustomerProfile from './CustomerProfile';
 import { getScreenFocusListenerObj } from '@components/utlis/commonFunctions';
@@ -23,7 +23,7 @@ import AddNewNumber from '@screens/addNewNumber';
 import SimilarGeolocations from '@screens/addressGeolocation/SimilarGeolocations';
 import AdditionalGeolocations from '@screens/addressGeolocation/AdditionalGeolocations';
 
-const Stack = createNativeStackNavigator();
+const Stack = createStackNavigator();
 
 export enum CaseDetailStackEnum {
   COLLECTION_CASE_DETAIL = 'collectionCaseDetail',
diff --git a/src/screens/caseDetails/CollectionCaseDetail.tsx b/src/screens/caseDetails/CollectionCaseDetail.tsx
index 6c7d7706..7a9bb166 100644
--- a/src/screens/caseDetails/CollectionCaseDetail.tsx
+++ b/src/screens/caseDetails/CollectionCaseDetail.tsx
@@ -43,6 +43,8 @@ import ScreenshotBlocker from '../../components/utlis/ScreenshotBlocker';
 import { useIsFocused } from '@react-navigation/native';
 import { setSelectedCaseId } from '../../reducer/allCasesSlice';
 import { CaseDetailStackEnum } from './CaseDetailStack';
+import { PageRouteEnum } from '@screens/auth/ProtectedRouter';
+import FullScreenLoader from '@rn-ui-lib/components/FullScreenLoader';
 import ArrowSolidIcon from '@rn-ui-lib/icons/ArrowSolidIcon';
 
 interface ICaseDetails {
@@ -109,6 +111,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
   const dispatch = useAppDispatch();
   const isFocused = useIsFocused();
   const isOnline = useIsOnline();
+  const showTransitionLoader = useAppSelector((state) => state.user.showTransitionLoader);
 
   const caseDetail = useAppSelector((state) => state.allCases.caseDetails[caseId]!!);
   const preFilledFormData = useAppSelector(
@@ -235,7 +238,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
 
   const opacityAnimation = useRef(new Animated.Value(0.8)).current;
   const slideInUpJourney = useRef(new Animated.Value(5, { useNativeDriver: true })).current;
-  const duration = 300;
+  const duration = 0;
 
   useEffect(() => {
     Animated.timing(slideInUpJourney, {
@@ -280,6 +283,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
 
   return (
     <Layout>
+      <FullScreenLoader loading={showTransitionLoader} isTranslucent={true} />
       <SafeAreaView style={[GenericStyles.fill, GenericStyles.whiteBackground]}>
         <ScrollView
           style={styles.contentContainer}
@@ -309,12 +313,14 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                 GenericStyles.whiteBackground,
                 styles.firstSection,
                 getShadowStyle(2),
-                GenericStyles.pl24,
+                GenericStyles.pl16,
                 GenericStyles.pt12,
                 GenericStyles.pr16,
               ]}
             >
-              <Text style={[GenericStyles.fw500]}>{addressString}</Text>
+              <View style={[styles.addressString]}>
+                <Text style={[GenericStyles.fw500]}>{addressString}</Text>
+              </View>
               <Button
                 onPress={() => {
                   addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_VIEW_ADDRESSES_CLICKED, {
@@ -324,18 +330,14 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                 }}
                 title="View all addresses"
                 variant="primaryText"
-                textStyle={[GenericStyles.fontSize12, GenericStyles.fw500]}
-                style={{
-                  marginBottom: 5,
-                }}
+                textStyle={[GenericStyles.fontSize12, GenericStyles.fw500, GenericStyles.ml8]}
+                style={[GenericStyles.mt4, GenericStyles.mb8]}
                 rightIcon={
                   <View style={styles.chevronContainer}>
                     <Chevron />
                   </View>
                 }
-                underlayColor="transparent"
-                pressableWidthChange={false}
-                opacityChangeOnPress={true}
+                isAnimationEnabled={false}
               />
             </View>
             <View
@@ -466,7 +468,6 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                     <Chevron fillColor={COLORS.TEXT.BLUE} />
                   </View>
                 }
-                pressableWidthChange={false}
                 opacityChangeOnPress={true}
               />
             </View>
@@ -484,34 +485,29 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
                   GenericStyles.row,
                   GenericStyles.alignCenter,
                   GenericStyles.ph24,
-                  GenericStyles.pb16,
+                  !feedbackList?.length ? { paddingBottom: 16 } : null,
                 ]}
               >
                 <View style={GenericStyles.row}>
-                  <View style={{ flexBasis: '60%' }}>
+                  <View style={{ flexBasis: '50%' }}>
                     <Text style={[styles.textContainer, GenericStyles.fontSize14]}>Feedbacks</Text>
                   </View>
                   {feedbackList?.length ? (
-                    <View style={[{ flexBasis: '40%' }]}>
-                      <Pressable
-                        onTouchStart={() =>
+                    <View style={[{ flexBasis: '50%' }]}>
+                      <Button
+                        title="Open all feedbacks"
+                        variant="tertiary"
+                        onPress={() => {
                           addClickstreamEvent(
                             CLICKSTREAM_EVENT_NAMES.FA_VIEW_PAST_FEEDBACKS_CLICKED,
                             { lan: loanAccountNumber }
-                          )
-                        }
-                        onPress={() => {
+                          );
                           handleRouting(CaseDetailStackEnum.PAST_FEEDBACK_DETAIL);
                         }}
-                        style={({ pressed }) => [
-                          GenericStyles.flex20,
-                          { opacity: pressed ? 0.7 : 1 },
-                        ]}
-                      >
-                        <Text style={[styles.textContainer, styles.feedbackBtn]}>
-                          Open all feedbacks
-                        </Text>
-                      </Pressable>
+                        textStyle={styles.feedbackBtn}
+                        style={[styles.allFeedbackButton]}
+                        isAnimationEnabled={true}
+                      />
                     </View>
                   ) : null}
                 </View>
@@ -532,6 +528,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
             variant="secondary"
             onPress={handleCustomerCall}
             testID={'test_call_customer'}
+            isAnimationEnabled={true}
           />
           <Button
             style={[styles.feedbackButton]}
@@ -546,6 +543,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
             variant="primary"
             onPress={handleAddFeedback}
             testID={'test_add_feedback'}
+            isAnimationEnabled={true}
           />
         </View>
         <PhoneNumberSelectionBottomSheet
@@ -580,6 +578,9 @@ export const styles = StyleSheet.create({
     flex: 1,
     marginLeft: 6,
   },
+  addressString: {
+    marginLeft: 8,
+  },
   buttonContainer: {
     position: 'absolute',
     bottom: 0,
@@ -590,8 +591,13 @@ export const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: COLORS.BORDER.PRIMARY,
   },
+  breakupAndEmiContainer: {
+    height: 90,
+  },
   chevronContainer: {
     marginLeft: 14,
+    marginRight: 8,
+    marginTop: 2,
   },
   lightText: {
     color: COLORS.TEXT.LIGHT,
@@ -607,6 +613,14 @@ export const styles = StyleSheet.create({
     top: 92,
     left: 0,
   },
+  viewBreakupButton: {
+    right: 8,
+    bottom: 8,
+  },
+  viewEmiScheduleButton: {
+    right: 6,
+    bottom: 8,
+  },
   contentContainer: {
     backgroundColor: '#F5F5F5',
   },
@@ -670,14 +684,23 @@ export const styles = StyleSheet.create({
     color: COLORS.TEXT.LIGHT,
   },
   feedbackBtn: {
+    fontSize: 13,
+    lineHeight: 14,
     fontWeight: '500',
     color: COLORS.TEXT.BLUE,
+    marginLeft: 4,
+    marginRight: 4,
+  },
+  allFeedbackButton: {
+    bottom: 10,
+    left: 10,
   },
   emiCardCtas: {
     color: COLORS.TEXT.BLUE,
     fontSize: 12,
     lineHeight: 15,
-    marginRight: 10,
+    marginRight: 8,
+    marginLeft: 8,
   },
 });
 
diff --git a/src/screens/caseDetails/feedback/FeedbackDetailItem.tsx b/src/screens/caseDetails/feedback/FeedbackDetailItem.tsx
index 7926b635..582fe5c3 100644
--- a/src/screens/caseDetails/feedback/FeedbackDetailItem.tsx
+++ b/src/screens/caseDetails/feedback/FeedbackDetailItem.tsx
@@ -30,6 +30,7 @@ import IconLabel from '../../../common/IconLabel';
 import WhatsAppFeedbackShareIcon from '../../../assets/icons/WhatsAppIcon';
 import { useAppSelector } from '../../../hooks';
 import { shareToWhatsapp } from '../../../services/FeedbackWhatsApp';
+import Button from '@rn-ui-lib/components/Button';
 
 interface IFeedbackDetailItem {
   feedbackItem: IFeedback;
@@ -78,123 +79,128 @@ const FeedbackDetailItem = ({
 
   const throttledSendToWhatsapp = React.useRef(debounce(shareToWhatsapp, 500));
 
+  const handleOnPress = () => {
+    throttledSendToWhatsapp.current(
+      feedbackItem,
+      caseDetails,
+      agentId,
+      setIsWhatsappSendLoading
+    );
+  };
+
   return (
     <View style={[styles.addressItem]}>
-      <View style={[GenericStyles.row, GenericStyles.alignCenter]}>
-        {feedbackTypeIcon[feedbackItem.type] ? (
-          <View style={GenericStyles.mr8}>{feedbackTypeIcon[feedbackItem.type]}</View>
-        ) : null}
+      <View style={GenericStyles.ml4}>
+        <View style={[GenericStyles.row, GenericStyles.alignCenter]}>
+          {feedbackTypeIcon[feedbackItem.type] ? (
+            <View style={GenericStyles.mr8}>{feedbackTypeIcon[feedbackItem.type]}</View>
+          ) : null}
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              styles.textContainer,
+              styles.cardBoldTitle,
+              GenericStyles.pb4,
+              GenericStyles.mr16,
+            ]}
+          >
+            {sanitizeString(feedbackItem.interactionStatus)}
+          </Text>
+        </View>
         <Text
           numberOfLines={1}
           ellipsizeMode="tail"
           style={[
             styles.textContainer,
-            styles.cardBoldTitle,
-            GenericStyles.pb4,
-            GenericStyles.mr16,
+            styles.cardFooterText,
+            GenericStyles.fontSize12,
+            GenericStyles.mb12,
           ]}
         >
-          {sanitizeString(feedbackItem.interactionStatus)}
+          {sanitizeString(dateFormat(new Date(feedbackItem.createdAt), BUSINESS_DATE_FORMAT))}
+          <Text style={styles.bullet}> ● </Text>
+          {sanitizeString(dateFormat(new Date(feedbackItem.createdAt), BUSINESS_TIME_FORMAT))}
         </Text>
-      </View>
-      <Text
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        style={[
-          styles.textContainer,
-          styles.cardFooterText,
-          GenericStyles.fontSize12,
-          GenericStyles.mb12,
-        ]}
-      >
-        {sanitizeString(dateFormat(new Date(feedbackItem.createdAt), BUSINESS_DATE_FORMAT))}
-        <Text style={styles.bullet}> ● </Text>
-        {sanitizeString(dateFormat(new Date(feedbackItem.createdAt), BUSINESS_TIME_FORMAT))}
-      </Text>
-      {isGeolocation ? (
-        !hideAddress ? (
-          <View
-            style={[
-              GenericStyles.mt12,
-              GenericStyles.pt12,
-              GenericStyles.fill,
-              GenericStyles.borderTop,
-            ]}
+        {isGeolocation ? (
+          !hideAddress ? (
+            <View
+              style={[
+                GenericStyles.mt12,
+                GenericStyles.pt12,
+                GenericStyles.fill,
+                GenericStyles.borderTop,
+              ]}
+            >
+              <GeolocationAddress
+                address={feedbackItem.source as IGeolocation}
+                showOpenMap={false}
+                isFeedbackView
+              />
+            </View>
+          ) : null
+        ) : (
+          <Text
+            numberOfLines={isExpanded ? 100 : 3}
+            ellipsizeMode="tail"
+            style={[styles.textContainer, styles.cardLightTitle, GenericStyles.w100]}
           >
-            <GeolocationAddress
-              address={feedbackItem.source as IGeolocation}
-              showOpenMap={false}
-              isFeedbackView
-            />
-          </View>
-        ) : null
-      ) : (
-        <Text
-          numberOfLines={isExpanded ? 100 : 3}
-          ellipsizeMode="tail"
-          style={[styles.textContainer, styles.cardLightTitle, GenericStyles.w100]}
-        >
-          {FIELD_FEEDBACKS.includes(feedbackItem.type)
-            ? sanitizeString(getAddress(feedbackItem?.source as unknown as Address))
-            : sanitizeString(
-                [
-                  (feedbackItem.source as ICallingFeedback)?.recipientNumber,
-                  feedbackItem.sourceText ? `(${feedbackItem.sourceText})` : '',
-                ].join(' ')
-              )}
-        </Text>
-      )}
+            {FIELD_FEEDBACKS.includes(feedbackItem.type)
+              ? sanitizeString(getAddress(feedbackItem?.source as unknown as Address))
+              : sanitizeString(
+                  [
+                    (feedbackItem.source as ICallingFeedback)?.recipientNumber,
+                    feedbackItem.sourceText ? `(${feedbackItem.sourceText})` : '',
+                  ].join(' ')
+                )}
+          </Text>
+        )}
+      </View>
 
-      {feedbackItem.metadata?.interactionLatitude && FIELD_FEEDBACKS.includes(feedbackItem.type) ? (
-        <>
-          <View style={styles.container}>
-            
-              <TouchableOpacity
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                activeOpacity={0.7}
-                onPress={() =>{
+      <View>
+        {feedbackItem.metadata?.interactionLatitude &&
+        FIELD_FEEDBACKS.includes(feedbackItem.type) ? (
+          <>
+            <View style={styles.container}>
+              <Button
+                title="Open map"
+                variant="primaryText"
+                style={[GenericStyles.row, styles.BtnPadding, styles.geolocationBtn]}
+                hitSlopEnabled={true}
+                isAnimationEnabled={false}
+                onPress={() => {
                   openGeolocation(
                     feedbackItem.metadata?.interactionLatitude,
                     feedbackItem.metadata?.interactionLongitude
-                  )}
-                }
-                style={[GenericStyles.row, styles.BtnPadding]}
-              >
-                <Text style={[styles.textContainer, styles.geolocationBtn]}>Open map</Text>
-              </TouchableOpacity>
-            <TouchableOpacity
-              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-              activeOpacity={0.7}
-              onPress={(e) => {
-                e.stopPropagation();
-                throttledSendToWhatsapp.current(
-                  feedbackItem,
-                  caseDetails,
-                  agentId,
-                  setIsWhatsappSendLoading
-                );
-              }}
-              style={[GenericStyles.row, styles.BtnPadding]}
-              disabled={isWhastappSendLoading}
-            >
-              <IconLabel
-                text="Share"
-                icon={<WhatsAppFeedbackShareIcon />}
-                textStyle={{ color: COLORS.BASE.BLUE }}
+                  );
+                }}
+                textStyle={[styles.bottomContainer]}
               />
-            </TouchableOpacity>
-          </View>
-        </>
-      ) : null}
+
+              <Button
+                title="Share"
+                variant="primaryText"
+                hitSlopEnabled={true}
+                isAnimationEnabled={false}
+                onPress={handleOnPress}
+                style={[GenericStyles.row, styles.BtnPadding, styles.whatsappBtn]}
+                disabled={isWhastappSendLoading}
+                leftIcon={
+                  <View style={[GenericStyles.mr4, GenericStyles.ml4]}>
+                    <WhatsAppFeedbackShareIcon />
+                  </View>
+                }
+                textStyle={[styles.bottomContainer]}
+              />
+            </View>
+          </>
+        ) : null}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  textContainer: {
-    fontSize: 14,
-    lineHeight: 20,
-  },
   cardBoldTitle: {
     fontWeight: '600',
     color: COLORS.TEXT.DARK,
@@ -207,10 +213,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: COLORS.TEXT.LIGHT,
   },
-  geolocationBtn: {
-    color: COLORS.BASE.BLUE,
-    marginRight: 20,
-  },
+
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -223,6 +226,25 @@ const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 8,
   },
+  whatsappBtn: {
+    marginTop: 1,
+  },
+  geolocationBtn: {
+    marginRight: 20,
+  },
+  textContainer: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: COLORS.BASE.BLUE,
+    marginLeft: 4,
+    marginRight: 4,
+  },
+  bottomContainer: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginLeft: 8,
+    marginRight: 8,
+  },
   addressItem: {
     paddingHorizontal: 0,
   },
diff --git a/src/screens/caseDetails/feedback/FeedbackListItem.tsx b/src/screens/caseDetails/feedback/FeedbackListItem.tsx
index aa1c6eb4..c64df7bf 100644
--- a/src/screens/caseDetails/feedback/FeedbackListItem.tsx
+++ b/src/screens/caseDetails/feedback/FeedbackListItem.tsx
@@ -14,6 +14,7 @@ import WhatsAppFeedbackShareIcon from '@assets/icons/WhatsAppFeedbackShareIcon';
 import { useAppSelector } from '@hooks';
 import { shareToWhatsapp } from '../../../services/FeedbackWhatsApp';
 import { CaseDetailStackEnum } from '../CaseDetailStack';
+import Button from '../../../../RN-UI-LIB/src/components/Button';
 
 interface IFeedbackListItem {
   feedbackItem: IFeedback | IUnSyncedFeedbackItem;
@@ -44,6 +45,16 @@ const FeedbackListItem: React.FC<IFeedbackListItem> = ({
   }));
   const throttledSendToWhatsapp = React.useRef(debounce(shareToWhatsapp, 500));
 
+  const handleOnPress = (e:Event) => {
+    e.stopPropagation();
+    throttledSendToWhatsapp.current(
+      feedbackItem,
+      caseDetails,
+      agentId,
+      setIsWhatsappSendLoading
+    );
+  };
+
   return (
     <View style={[GenericStyles.ph16]}>
       <TouchableOpacity
@@ -71,28 +82,28 @@ const FeedbackListItem: React.FC<IFeedbackListItem> = ({
             </Text>
           </View>
           {feedbackItem?.type === 'FIELD_VISIT' ? (
-            <View style={styles.ShareButton}>
-              <TouchableOpacity
-                hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-                activeOpacity={0.7}
-                onPress={(e) => {
-                  e.stopPropagation();
-                  throttledSendToWhatsapp.current(
-                    feedbackItem,
-                    caseDetails,
-                    agentId,
-                    setIsWhatsappSendLoading
-                  );
-                }}
+            <>
+              <Button
+                title="Share"
+                variant="primaryText"
+                hitSlopEnabled={true}
+                isAnimationEnabled={false}
+                onPress={handleOnPress}
+                style={styles.ShareButton}
                 disabled={isWhastappSendLoading}
-              >
-                <IconLabel
-                  text="Share"
-                  icon={<WhatsAppFeedbackShareIcon width={15} height={15} />}
-                  textStyle={styles.ButtonText}
-                />
-              </TouchableOpacity>
-            </View>
+                leftIcon={
+                  <View style={[GenericStyles.mr4, GenericStyles.ml4]}>
+                    <WhatsAppFeedbackShareIcon width={15} height={15} />
+                  </View>
+                }
+                textStyle={[
+                  styles.ButtonText,
+                  GenericStyles.fontSize14,
+                  GenericStyles.fw500,
+                  GenericStyles.mr4,
+                ]}
+              />
+            </>
           ) : null}
         </View>
         {!(feedbackItem.isSynced === false) ? <Chevron /> : null}
@@ -122,11 +133,8 @@ const styles = StyleSheet.create({
     marginTop: 5,
   },
   ShareButton: {
-    width: 75,
-    height: 35,
-    padding: 5,
-    justifyContent: 'flex-start',
-    marginLeft: 5,
+    marginLeft: 4,
+    marginRight: 4,
   },
   ButtonText: {
     color: COLORS.BASE.BLUE,
diff --git a/src/screens/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx b/src/screens/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx
index 80bf4447..02b36041 100644
--- a/src/screens/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx
+++ b/src/screens/caseDetails/journeyStepper/PhoneNumberSelectionBottomSheet.tsx
@@ -20,6 +20,7 @@ import {useSelector} from "react-redux";
 import {RootState} from "@store";
 import {fetchTelephoneNumber} from "@actions/fetchTelephoneNumber";
 import TaskLoader from "@screens/caseDetails/TaskLoader";
+import { COLORS } from '@rn-ui-lib/colors';
 
 interface PhoneNumberSelectionBottomSheetProps {
   showPhoneNumberBottomSheet: boolean;
@@ -75,6 +76,8 @@ const PhoneNumberSelectionBottomSheet: React.FC<PhoneNumberSelectionBottomSheetP
             onPress={handleAddNewNumberCta}
             variant="primaryText"
             buttonStyle={phoneNumberSelectionBottomSheet.addNewNumber}
+            textStyle={phoneNumberSelectionBottomSheet.addNewNumberTextStyle}
+            isAnimationEnabled={false}
           />
         </View>
       )}
@@ -113,6 +116,10 @@ const phoneNumberSelectionBottomSheet = StyleSheet.create({
     addNewNumber: {
         padding:0,
     },
+    addNewNumberTextStyle: {
+      marginLeft: 8,
+      marginRight: 8,
+    }
 
 
 });
diff --git a/src/screens/dailyCommitment/DailyCommitmentBottomSheet.tsx b/src/screens/dailyCommitment/DailyCommitmentBottomSheet.tsx
index c52a75f7..5a82af9d 100644
--- a/src/screens/dailyCommitment/DailyCommitmentBottomSheet.tsx
+++ b/src/screens/dailyCommitment/DailyCommitmentBottomSheet.tsx
@@ -178,6 +178,7 @@ const DailyCommitmentBottomSheet: React.FC<IAddCommitmentProps> = (
               (data) => handleError(data)
             )}
             showLoader={loading}
+            isAnimationEnabled={true}
           />
         </View>
       </SafeAreaView>
diff --git a/src/screens/emiSchedule/EmiScheduleItem.tsx b/src/screens/emiSchedule/EmiScheduleItem.tsx
index f297f077..5c9ea09f 100644
--- a/src/screens/emiSchedule/EmiScheduleItem.tsx
+++ b/src/screens/emiSchedule/EmiScheduleItem.tsx
@@ -80,9 +80,9 @@ const EmiScheduleItem: React.FC<IEmiScheduleItem> = ({
                     fontSize: 12,
                     fontWeight: '500',
                   }}
-                  underlayColor='transparent'
-                  pressableWidthChange={false}
+                  underlayColor="transparent"
                   opacityChangeOnPress={true}
+                  isAnimationEnabled={true}
                 />
               )}
             </>
diff --git a/src/screens/login/OtpInput.tsx b/src/screens/login/OtpInput.tsx
index dc68f6c8..5d31bf04 100644
--- a/src/screens/login/OtpInput.tsx
+++ b/src/screens/login/OtpInput.tsx
@@ -108,6 +108,7 @@ const OtpInput = () => {
           disabled={!isValid || isLoading}
           showLoader={isLoading}
           testID={'test_verify_otp'}
+          isAnimationEnabled={true}
         />
       </SafeAreaView>
     </Layout>
diff --git a/src/screens/login/index.tsx b/src/screens/login/index.tsx
index 3730bb91..02114012 100644
--- a/src/screens/login/index.tsx
+++ b/src/screens/login/index.tsx
@@ -143,6 +143,7 @@ function Login() {
           showLoader={isLoading}
           testID="test_get_otp"
           textStyle={GenericStyles.fontSize16}
+          isAnimationEnabled={true}
         />
         {IS_SSO_ENABLED && GOOGLE_SSO_CLIENT_ID ? (
           <>
diff --git a/src/screens/registerPayements/Foreclosure.tsx b/src/screens/registerPayements/Foreclosure.tsx
index 60fbf49e..a31b633a 100644
--- a/src/screens/registerPayements/Foreclosure.tsx
+++ b/src/screens/registerPayements/Foreclosure.tsx
@@ -213,23 +213,24 @@ const Foreclosure: React.FC<IForeclosure> = ({ caseId, numbers, primaryPhoneNumb
           )}`}
           foreclosureBreakup={foreclosureBreakup}
         />
-        <TouchableOpacity
+        <Button
+          title="Check amount for future date"
           style={[
             GenericStyles.row,
             GenericStyles.alignCenter,
             GenericStyles.pv10,
             GenericStyles.mt4,
           ]}
-          activeOpacity={0.7}
           onPress={toggleForeclosureBottomSheet}
-        >
-          <Text style={styles.futureText} bold>
-            Check amount for future date
-          </Text>
-          <View style={styles.mt3}>
-            <Chevron fillColor={COLORS.TEXT.BLUE} />
-          </View>
-        </TouchableOpacity>
+          variant="tertiary"
+          textStyle={styles.futureText}
+          rightIcon={
+            <View style={styles.chevronContainer}>
+              <Chevron fillColor={COLORS.TEXT.BLUE} />
+            </View>
+          }
+          isAnimationEnabled={true}
+        />
       </ScrollView>
       <FloatingInfoText
         visible={showForeclosureInfoText}
@@ -253,6 +254,7 @@ const Foreclosure: React.FC<IForeclosure> = ({ caseId, numbers, primaryPhoneNumb
           disabled={isPaymentButtonDisabled}
           showLoader={isLoading}
           onPress={generatePaymentLink}
+          isAnimationEnabled={true}
         />
       </View>
       <ModalWrapper
@@ -293,4 +295,7 @@ const styles = StyleSheet.create({
   mt3: {
     marginTop: 3,
   },
+  chevronContainer: {
+    top: 2,
+  },
 });
diff --git a/src/screens/registerPayements/OnlinePayment.tsx b/src/screens/registerPayements/OnlinePayment.tsx
index 977a29f1..dcb8e441 100644
--- a/src/screens/registerPayements/OnlinePayment.tsx
+++ b/src/screens/registerPayements/OnlinePayment.tsx
@@ -241,6 +241,7 @@ const OnlinePayment: React.FC<IOnlinePayment> = ({
           disabled={isPaymentButtonDisabled}
           showLoader={isLoading}
           onPress={generatePaymentLink}
+          isAnimationEnabled={true}
         />
       </View>
       <ModalWrapper
diff --git a/yarn.lock b/yarn.lock
index 4f1be80a..706d32b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -992,6 +992,13 @@
     "@cobo/apm-rum-react-native-core" "^0.5.0"
     opentracing "^0.14.3"
 
+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@elastic/apm-rum-core@^5.17.0":
   version "5.17.0"
   resolved "https://registry.yarnpkg.com/@elastic/apm-rum-core/-/apm-rum-core-5.17.0.tgz#660b02b46cb2e98063f2438b1b41350d88f28489"
@@ -1716,6 +1723,11 @@
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.15.tgz#b8aebf101080057508b98cb5da4173c72c095db0"
   integrity sha512-CR4CEYJVY0OLyeLQi9N3Z2o4K47gXctvFxfZizDuW1xFtCJbA0eGvpjSLXEWHoY0hFjrlC6KinpdepGHVxhYIg==
 
+"@react-navigation/elements@^1.3.22":
+  version "1.3.22"
+  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.22.tgz#37e25e46ca4715049795471056a9e7e58ac4a14e"
+  integrity sha512-HYKucs0TwQT8zMvgoZbJsY/3sZfzeP8Dk9IDv4agst3zlA7ReTx4+SROCG6VGC7JKqBCyQykHIwkSwxhapoc+Q==
+
 "@react-navigation/elements@^1.3.9":
   version "1.3.9"
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.9.tgz#33e26d7ad655b012e024ef0a005a3f66201287f8"
@@ -1746,6 +1758,15 @@
   dependencies:
     nanoid "^3.1.23"
 
+"@react-navigation/stack@^6.3.21":
+  version "6.3.21"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.21.tgz#beec1a384969d10c8ddab9978f382fa441182760"
+  integrity sha512-oh059bD9w6Q7YbcK3POXRHK+bfoafPU9gvunD0MHJGmPVe9bazn5OMNzRYextvB6BfwQy+v3dy76Opf0vIGcNg==
+  dependencies:
+    "@react-navigation/elements" "^1.3.22"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@reduxjs/toolkit@1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.1.tgz#4c34dc4ddcec161535288c60da5c19c3ef15180e"
@@ -1983,6 +2004,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hammerjs@^2.0.36":
+  version "2.0.45"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.45.tgz#ffa764bb68a66c08db6efb9c816eb7be850577b1"
+  integrity sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==
+
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -7867,6 +7893,18 @@ react-native-geolocation-service@5.3.1:
   resolved "https://registry.yarnpkg.com/react-native-geolocation-service/-/react-native-geolocation-service-5.3.1.tgz#4ce1017789da6fdfcf7576eb6f59435622af4289"
   integrity sha512-LTXPtPNmrdhx+yeWG47sAaCgQc3nG1z+HLLHlhK/5YfOgfLcAb9HAkhREPjQKPZOUx8pKZMIpdGFUGfJYtimXQ==
 
+react-native-gesture-handler@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz#f8e6c0451a7bdf065edb7b9be605480db402baa0"
+  integrity sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
+
 react-native-get-random-values@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.8.0.tgz#1cb4bd4bd3966a356e59697b8f372999fe97cb16"