Fix backdrop flashes on Android

Expensify · Jan 24, 2024 · 27846dd · 27846dd
1 parent c33a4ee
commit 27846dd
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
@@ -31,6 +31,7 @@ function BaseModal(
         animationIn,
         animationOut,
         useNativeDriver: useNativeDriverProp,
+        useNativeDriverForBackdrop,
         hideModalContentWhileAnimating = false,
         animationInTiming,
         animationOutTiming,
@@ -200,6 +201,7 @@ function BaseModal(
                 animationIn={animationIn ?? modalStyleAnimationIn}
                 animationOut={animationOut ?? modalStyleAnimationOut}
                 useNativeDriver={useNativeDriverProp && useNativeDriver}
+                useNativeDriverForBackdrop={useNativeDriverForBackdrop && useNativeDriver}
                 hideModalContentWhileAnimating={hideModalContentWhileAnimating}
                 animationInTiming={animationInTiming}
                 animationOutTiming={animationOutTiming}

diff --git a/src/components/Modal/index.android.tsx b/src/components/Modal/index.android.tsx
@@ -12,12 +12,13 @@ AppState.addEventListener('blur', () => {
     ComposerFocusManager.resetReadyToFocus();
 });
 
-// Only want to use useNativeDriver on Android. It has strange flashes issue on IOS
+// Only want to use useNativeDriver for backdrop on iOS. It has strange flashes issue on IOS
 // https://github.com/react-native-modal/react-native-modal#the-modal-flashes-in-a-weird-way-when-animating
 function Modal({useNativeDriver = true, ...rest}: BaseModalProps) {
     return (
         <BaseModal
             useNativeDriver={useNativeDriver}
+            useNativeDriverForBackdrop={false}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
         >

diff --git a/src/components/Modal/index.ios.tsx b/src/components/Modal/index.ios.tsx
@@ -6,7 +6,6 @@ function Modal({children, ...rest}: BaseModalProps) {
     return (
         <BaseModal
             useNativeDriver
-            useNativeDriverForBackdrop={false}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
         >