From fd3ada6252c9ef4b05efafd39e9500a0fe967437 Mon Sep 17 00:00:00 2001
From: mhawryluk <marcinhawrylukxx@gmail.com>
Date: Tue, 8 Jul 2025 10:18:42 +0200
Subject: [PATCH 1/2] Migrate more right-docked modals

---
 src/components/CategorySelector/CategorySelectorModal.tsx        | 1 +
 src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx        | 1 +
 .../ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx   | 1 +
 .../workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx   | 1 +
 4 files changed, 4 insertions(+)

diff --git a/src/components/CategorySelector/CategorySelectorModal.tsx b/src/components/CategorySelector/CategorySelectorModal.tsx
index 6f2637eeb8e9..21885dc59875 100644
--- a/src/components/CategorySelector/CategorySelectorModal.tsx
+++ b/src/components/CategorySelector/CategorySelectorModal.tsx
@@ -39,6 +39,7 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
             hideModalContentWhileAnimating
             useNativeDriver
             enableEdgeToEdgeBottomSafeAreaPadding
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}
diff --git a/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx b/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx
index 6dac5bd4b267..da7ba0921110 100644
--- a/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx
+++ b/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx
@@ -45,6 +45,7 @@ function WorkspaceMemberDetailsRoleSelectionModal({isVisible, items, onRoleChang
             hideModalContentWhileAnimating
             useNativeDriver
             enableEdgeToEdgeBottomSafeAreaPadding
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 testID={WorkspaceMemberDetailsRoleSelectionModal.displayName}
diff --git a/src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx b/src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx
index 509fbeb97c7f..634bfdfb6ee1 100644
--- a/src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx
+++ b/src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx
@@ -47,6 +47,7 @@ function ExpenseLimitTypeSelectorModal({isVisible, currentExpenseLimitType, onEx
             hideModalContentWhileAnimating
             useNativeDriver
             enableEdgeToEdgeBottomSafeAreaPadding
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}
diff --git a/src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx b/src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx
index 999f6e47edf2..e24a1e35090a 100644
--- a/src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx
+++ b/src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx
@@ -36,6 +36,7 @@ function UnitSelectorModal({isVisible, currentUnit, onUnitSelected, onClose, lab
             onModalHide={onClose}
             hideModalContentWhileAnimating
             useNativeDriver
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

From 12d871a24d1d1db4ef7507c90805f0dace91ce34 Mon Sep 17 00:00:00 2001
From: mhawryluk <marcinhawrylukxx@gmail.com>
Date: Tue, 8 Jul 2025 14:55:52 +0200
Subject: [PATCH 2/2] Import easing from utils

---
 src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx | 5 ++---
 .../Modal/ReanimatedModal/Container/index.web.tsx           | 6 ++----
 src/components/Modal/ReanimatedModal/utils.ts               | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx b/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx
index 8990b5c584cd..059bd1f1f4f5 100644
--- a/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx
+++ b/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx
@@ -1,15 +1,14 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import Animated, {Easing, Keyframe} from 'react-native-reanimated';
+import Animated, {Keyframe} from 'react-native-reanimated';
 import type {BackdropProps} from '@components/Modal/ReanimatedModal/types';
+import {easing} from '@components/Modal/ReanimatedModal/utils';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
-const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
-
 function Backdrop({
     style,
     customBackdrop,
diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx
index 7fc90f0aa702..0d57c2af8755 100644
--- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx
+++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx
@@ -1,13 +1,11 @@
 import React, {useEffect, useMemo, useRef} from 'react';
-import Animated, {Easing, Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types';
 import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
-import {getModalInAnimationStyle, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils';
+import {easing, getModalInAnimationStyle, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
-
 function Container({
     style,
     animationIn,
diff --git a/src/components/Modal/ReanimatedModal/utils.ts b/src/components/Modal/ReanimatedModal/utils.ts
index e6949beb1213..8077feab14da 100644
--- a/src/components/Modal/ReanimatedModal/utils.ts
+++ b/src/components/Modal/ReanimatedModal/utils.ts
@@ -84,4 +84,4 @@ function getModalOutAnimation(animationType: AnimationOutType): ValidKeyframePro
     }
 }
 
-export {getModalInAnimation, getModalOutAnimation, getModalInAnimationStyle};
+export {getModalInAnimation, getModalOutAnimation, getModalInAnimationStyle, easing};