Merge pull request #57536 from software-mansion-labs/@BartoszGrajdek/FAB-invisible-view-fix

Author: mountiny

src/components/Modal/BottomDockedModal/index.tsx

@@ -1,7 +1,7 @@
 import noop from 'lodash/noop';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ViewStyle} from 'react-native';
-import {BackHandler, DeviceEventEmitter, Dimensions, KeyboardAvoidingView, Modal, View} from 'react-native';
+import {BackHandler, DeviceEventEmitter, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, View} from 'react-native';
 import {LayoutAnimationConfig} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
@@ -41,6 +41,7 @@ function BottomDockedModal({
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [deviceWidth, setDeviceWidth] = useState(() => Dimensions.get('window').width);
     const [deviceHeight, setDeviceHeight] = useState(() => Dimensions.get('window').height);
+    const handleRef = useRef<number>();
 
     const styles = useThemeStyles();
 
@@ -108,11 +109,13 @@ function BottomDockedModal({
 
     useEffect(() => {
         if (isVisible && !isContainerOpen && !isTransitioning) {
+            handleRef.current = InteractionManager.createInteractionHandle();
             onModalWillShow();
 
             setIsVisibleState(true);
             setIsTransitioning(true);
         } else if (!isVisible && isContainerOpen && !isTransitioning) {
+            handleRef.current = InteractionManager.createInteractionHandle();
             onModalWillHide();
 
             setIsVisibleState(false);
@@ -133,12 +136,18 @@ function BottomDockedModal({
     const onOpenCallBack = useCallback(() => {
         setIsTransitioning(false);
         setIsContainerOpen(true);
+        if (handleRef.current) {
+            InteractionManager.clearInteractionHandle(handleRef.current);
+        }
         onModalShow();
     }, [onModalShow]);
 
     const onCloseCallBack = useCallback(() => {
         setIsTransitioning(false);
         setIsContainerOpen(false);
+        if (handleRef.current) {
+            InteractionManager.clearInteractionHandle(handleRef.current);
+        }
         if (getPlatform() !== CONST.PLATFORM.IOS) {
             onModalHide();
         }

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

@@ -547,6 +547,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
                 fromSidebarMediumScreen={!shouldUseNarrowLayout}
                 animationInTiming={CONST.MODAL.ANIMATION_TIMING.FAB_IN}
                 animationOutTiming={CONST.MODAL.ANIMATION_TIMING.FAB_OUT}
+                shouldUseNewModal
                 menuItems={menuItems.map((item) => {
                     return {
                         ...item,