From 282431ce821bb7939d26e0ed1e7f1b8ea0c24841 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 12 Mar 2025 12:27:59 +0100 Subject: [PATCH 1/7] Split code into platform specific implementations --- src/components/SidePane/Help/HelpContent.tsx | 60 ++++++++++++++++ src/components/SidePane/Help/index.native.tsx | 28 ++++++++ src/components/SidePane/Help/index.tsx | 19 +++++ src/components/SidePane/index.tsx | 70 ++----------------- src/hooks/useSidePane.ts | 15 +++- 5 files changed, 127 insertions(+), 65 deletions(-) create mode 100644 src/components/SidePane/Help/HelpContent.tsx create mode 100644 src/components/SidePane/Help/index.native.tsx create mode 100644 src/components/SidePane/Help/index.tsx diff --git a/src/components/SidePane/Help/HelpContent.tsx b/src/components/SidePane/Help/HelpContent.tsx new file mode 100644 index 0000000000000..0565afadefa75 --- /dev/null +++ b/src/components/SidePane/Help/HelpContent.tsx @@ -0,0 +1,60 @@ +import {findFocusedRoute} from '@react-navigation/native'; +import React, {useEffect, useRef} from 'react'; +import HeaderGap from '@components/HeaderGap'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import getHelpContent from '@components/SidePane/getHelpContent'; +import useEnvironment from '@hooks/useEnvironment'; +import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useRootNavigationState from '@hooks/useRootNavigationState'; +import useSidePane from '@hooks/useSidePane'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; +import {substituteRouteParameters} from '@libs/SidePaneUtils'; + +function HelpContent() { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const {isProduction} = useEnvironment(); + const {isExtraLargeScreenWidth} = useResponsiveLayout(); + const {closeSidePane} = useSidePane(); + const route = useRootNavigationState((state) => { + const params = (findFocusedRoute(state)?.params as Record) ?? {}; + const activeRoute = Navigation.getActiveRouteWithoutParams(); + return substituteRouteParameters(activeRoute, params); + }); + + const sizeChangedFromLargeToNarrow = useRef(!isExtraLargeScreenWidth); + useEffect(() => { + // Close the side pane when the screen size changes from large to small + if (!isExtraLargeScreenWidth && !sizeChangedFromLargeToNarrow.current) { + closeSidePane(true); + sizeChangedFromLargeToNarrow.current = true; + } + + // Reset the trigger when the screen size changes back to large + if (isExtraLargeScreenWidth) { + sizeChangedFromLargeToNarrow.current = false; + } + }, [isExtraLargeScreenWidth, closeSidePane]); + + return ( + <> + + closeSidePane(false)} + onCloseButtonPress={() => closeSidePane(false)} + shouldShowBackButton={!isExtraLargeScreenWidth} + shouldShowCloseButton={isExtraLargeScreenWidth} + shouldDisplayHelpButton={false} + /> + {getHelpContent(styles, route, isProduction)} + + ); +} + +HelpContent.displayName = 'HelpContent'; + +export default HelpContent; diff --git a/src/components/SidePane/Help/index.native.tsx b/src/components/SidePane/Help/index.native.tsx new file mode 100644 index 0000000000000..e23c7d55d03b3 --- /dev/null +++ b/src/components/SidePane/Help/index.native.tsx @@ -0,0 +1,28 @@ +import {useFocusEffect} from '@react-navigation/native'; +import React, {useCallback} from 'react'; +import {BackHandler} from 'react-native'; +import useSidePane from '@hooks/useSidePane'; +import HelpContent from './HelpContent'; + +function Help() { + const {closeSidePane} = useSidePane(); + + // To block android native back button behavior + useFocusEffect( + useCallback(() => { + const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { + closeSidePane(); + // Return true to indicate that the back button press is handled here + return true; + }); + + return () => backHandler.remove(); + }, [closeSidePane]), + ); + + return ; +} + +Help.displayName = 'Help'; + +export default Help; diff --git a/src/components/SidePane/Help/index.tsx b/src/components/SidePane/Help/index.tsx new file mode 100644 index 0000000000000..bb954ac6a9444 --- /dev/null +++ b/src/components/SidePane/Help/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useSidePane from '@hooks/useSidePane'; +import CONST from '@src/CONST'; +import HelpContent from './HelpContent'; + +function Help() { + const {isExtraLargeScreenWidth} = useResponsiveLayout(); + const {closeSidePane} = useSidePane(); + + useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => closeSidePane(), {isActive: !isExtraLargeScreenWidth}); + + return ; +} + +Help.displayName = 'Help'; + +export default Help; diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx index 1b7e6b59fe5e4..78b6134ee2e38 100644 --- a/src/components/SidePane/index.tsx +++ b/src/components/SidePane/index.tsx @@ -1,69 +1,21 @@ -import {findFocusedRoute} from '@react-navigation/native'; -import React, {useCallback, useEffect, useRef} from 'react'; +import React from 'react'; // eslint-disable-next-line no-restricted-imports import {Animated, View} from 'react-native'; -import HeaderGap from '@components/HeaderGap'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import useEnvironment from '@hooks/useEnvironment'; -import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; -import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useRootNavigationState from '@hooks/useRootNavigationState'; import useSidePane from '@hooks/useSidePane'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; -import {triggerSidePane} from '@libs/actions/SidePane'; -import Navigation from '@libs/Navigation/Navigation'; -import {substituteRouteParameters} from '@libs/SidePaneUtils'; -import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; -import getHelpContent from './getHelpContent'; +import Help from './Help'; import SidePaneOverlay from './SidePaneOverlay'; function SidePane() { const styles = useThemeStyles(); - const {translate} = useLocalize(); - const {isProduction} = useEnvironment(); - const {route, isInNarrowPaneModal} = useRootNavigationState((state) => { - const params = (findFocusedRoute(state)?.params as Record) ?? {}; - const activeRoute = Navigation.getActiveRouteWithoutParams(); - - return { - route: substituteRouteParameters(activeRoute, params), - isInNarrowPaneModal: state?.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR, - }; - }); - const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); - const {sidePaneTranslateX, shouldHideSidePane, shouldHideSidePaneBackdrop, sidePane} = useSidePane(); + const {sidePaneTranslateX, shouldHideSidePane, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); const {paddingTop} = useStyledSafeAreaInsets(); - - const onClose = useCallback( - (shouldUpdateNarrow = false) => { - if (!sidePane) { - return; - } - - triggerSidePane(false, {shouldOnlyUpdateNarrowLayout: !isExtraLargeScreenWidth || shouldUpdateNarrow}); - }, - [isExtraLargeScreenWidth, sidePane], - ); - - const sizeChangedFromLargeToNarrow = useRef(!isExtraLargeScreenWidth); - useEffect(() => { - // Close the side pane when the screen size changes from large to small - if (!isExtraLargeScreenWidth && !sizeChangedFromLargeToNarrow.current) { - onClose(true); - sizeChangedFromLargeToNarrow.current = true; - } - - // Reset the trigger when the screen size changes back to large - if (isExtraLargeScreenWidth) { - sizeChangedFromLargeToNarrow.current = false; - } - }, [isExtraLargeScreenWidth, onClose]); - - useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => onClose(), {shouldBubble: shouldHideSidePane, isActive: !isExtraLargeScreenWidth}); + const isInNarrowPaneModal = useRootNavigationState((state) => state?.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); if (shouldHideSidePane) { return null; @@ -74,23 +26,13 @@ function SidePane() { {!shouldHideSidePaneBackdrop && ( )} - - onClose(false)} - onCloseButtonPress={() => onClose(false)} - shouldShowBackButton={!isExtraLargeScreenWidth} - shouldShowCloseButton={isExtraLargeScreenWidth} - shouldDisplayHelpButton={false} - /> - {getHelpContent(styles, route, isProduction)} + ); diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 73e1f24a16ca6..5e5075364943f 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -1,9 +1,10 @@ -import {useEffect, useRef, useState} from 'react'; +import {useCallback, useEffect, useRef, useState} from 'react'; // Import Animated directly from 'react-native' as animations are used with navigation. // eslint-disable-next-line no-restricted-imports import {Animated} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; +import {triggerSidePane} from '@libs/actions/SidePane'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -69,6 +70,17 @@ function useSidePane() { }); }, [isPaneHidden, shouldApplySidePaneOffset, shouldUseNarrowLayout, sidePaneWidth]); + const closeSidePane = useCallback( + (shouldUpdateNarrow = false) => { + if (!sidePaneNVP) { + return; + } + + triggerSidePane(false, {shouldOnlyUpdateNarrowLayout: !isExtraLargeScreenWidth || shouldUpdateNarrow}); + }, + [isExtraLargeScreenWidth, sidePaneNVP], + ); + return { sidePane: sidePaneNVP, shouldHideSidePane, @@ -76,6 +88,7 @@ function useSidePane() { shouldHideHelpButton, sidePaneOffset, sidePaneTranslateX, + closeSidePane, }; } From bd7ece856e68f63b66bfe425920e02ced5845eef Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 12 Mar 2025 12:28:17 +0100 Subject: [PATCH 2/7] Split native into ios and android implementations --- .../SidePane/Help/index.android.tsx | 39 +++++++++++++ src/components/SidePane/Help/index.ios.tsx | 58 +++++++++++++++++++ src/components/SidePane/Help/index.native.tsx | 28 --------- 3 files changed, 97 insertions(+), 28 deletions(-) create mode 100644 src/components/SidePane/Help/index.android.tsx create mode 100644 src/components/SidePane/Help/index.ios.tsx delete mode 100644 src/components/SidePane/Help/index.native.tsx diff --git a/src/components/SidePane/Help/index.android.tsx b/src/components/SidePane/Help/index.android.tsx new file mode 100644 index 0000000000000..acab5f4933292 --- /dev/null +++ b/src/components/SidePane/Help/index.android.tsx @@ -0,0 +1,39 @@ +import {useFocusEffect} from '@react-navigation/native'; +import React, {useCallback} from 'react'; +// eslint-disable-next-line no-restricted-imports +import {Animated, BackHandler} from 'react-native'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useSidePane from '@hooks/useSidePane'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; +import useThemeStyles from '@hooks/useThemeStyles'; +import HelpContent from './HelpContent'; + +function Help() { + const styles = useThemeStyles(); + const {sidePaneTranslateX, closeSidePane} = useSidePane(); + const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); + + // SidePane isn't a native screen, this handles the back button press on Android + useFocusEffect( + useCallback(() => { + const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { + closeSidePane(); + // Return true to indicate that the back button press is handled here + return true; + }); + + return () => backHandler.remove(); + }, [closeSidePane]), + ); + + return ( + + + + ); +} + +Help.displayName = 'Help'; + +export default Help; diff --git a/src/components/SidePane/Help/index.ios.tsx b/src/components/SidePane/Help/index.ios.tsx new file mode 100644 index 0000000000000..4d1cb96547719 --- /dev/null +++ b/src/components/SidePane/Help/index.ios.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +// eslint-disable-next-line no-restricted-imports +import {Animated, Dimensions} from 'react-native'; +import {Gesture, GestureDetector} from 'react-native-gesture-handler'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useSidePane from '@hooks/useSidePane'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import HelpContent from './HelpContent'; + +const SCREEN_WIDTH = Dimensions.get('window').width; + +function Help() { + const styles = useThemeStyles(); + const {sidePaneTranslateX, closeSidePane} = useSidePane(); + const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); + + // SidePane isn't a native screen, this simulates the 'close swipe gesture' on iOS + const panGesture = Gesture.Pan() + .hitSlop({left: 0, width: 20}) + .onUpdate((event) => { + if (event.translationX <= 0) { + return; + } + sidePaneTranslateX.current.setValue(event.translationX); + }) + .onEnd((event) => { + if (event.translationX > 100) { + // If swiped far enough, animate out and close + Animated.timing(sidePaneTranslateX.current, { + toValue: SCREEN_WIDTH, + duration: CONST.ANIMATED_TRANSITION, + useNativeDriver: false, + }).start(() => closeSidePane()); + } else { + // Otherwise, animate back to original position + Animated.spring(sidePaneTranslateX.current, { + toValue: 0, + useNativeDriver: false, + }).start(); + } + }); + + return ( + + + + + + ); +} + +Help.displayName = 'Help'; +export default Help; diff --git a/src/components/SidePane/Help/index.native.tsx b/src/components/SidePane/Help/index.native.tsx deleted file mode 100644 index e23c7d55d03b3..0000000000000 --- a/src/components/SidePane/Help/index.native.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback} from 'react'; -import {BackHandler} from 'react-native'; -import useSidePane from '@hooks/useSidePane'; -import HelpContent from './HelpContent'; - -function Help() { - const {closeSidePane} = useSidePane(); - - // To block android native back button behavior - useFocusEffect( - useCallback(() => { - const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { - closeSidePane(); - // Return true to indicate that the back button press is handled here - return true; - }); - - return () => backHandler.remove(); - }, [closeSidePane]), - ); - - return ; -} - -Help.displayName = 'Help'; - -export default Help; From 7429818d479a59d88ab0564ee99fb3bcb93e40e4 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 12 Mar 2025 12:28:33 +0100 Subject: [PATCH 3/7] Move animated stylings deeper into the component tree --- src/components/SidePane/Help/index.tsx | 16 +++++++++++++--- src/components/SidePane/index.tsx | 15 +++------------ 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/SidePane/Help/index.tsx b/src/components/SidePane/Help/index.tsx index bb954ac6a9444..379019ae25689 100644 --- a/src/components/SidePane/Help/index.tsx +++ b/src/components/SidePane/Help/index.tsx @@ -1,17 +1,27 @@ import React from 'react'; +// eslint-disable-next-line no-restricted-imports +import {Animated} from 'react-native'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSidePane from '@hooks/useSidePane'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import HelpContent from './HelpContent'; function Help() { - const {isExtraLargeScreenWidth} = useResponsiveLayout(); - const {closeSidePane} = useSidePane(); + const styles = useThemeStyles(); + const {sidePaneTranslateX, closeSidePane} = useSidePane(); + const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => closeSidePane(), {isActive: !isExtraLargeScreenWidth}); - return ; + return ( + + + + ); } Help.displayName = 'Help'; diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx index 78b6134ee2e38..814261908aac3 100644 --- a/src/components/SidePane/index.tsx +++ b/src/components/SidePane/index.tsx @@ -1,20 +1,13 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {Animated, View} from 'react-native'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import {View} from 'react-native'; import useRootNavigationState from '@hooks/useRootNavigationState'; import useSidePane from '@hooks/useSidePane'; -import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; -import useThemeStyles from '@hooks/useThemeStyles'; import NAVIGATORS from '@src/NAVIGATORS'; import Help from './Help'; import SidePaneOverlay from './SidePaneOverlay'; function SidePane() { - const styles = useThemeStyles(); - const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); - const {sidePaneTranslateX, shouldHideSidePane, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); - const {paddingTop} = useStyledSafeAreaInsets(); + const {shouldHideSidePane, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); const isInNarrowPaneModal = useRootNavigationState((state) => state?.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); if (shouldHideSidePane) { @@ -31,9 +24,7 @@ function SidePane() { /> )} - - - + ); } From 90d9dc8271edc986ed78cf69d79c86917eb99a5c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 12 Mar 2025 13:40:13 +0100 Subject: [PATCH 4/7] Fix slide in animation on all platforms --- src/components/SidePane/Help/index.android.tsx | 5 ++--- src/components/SidePane/Help/index.ios.tsx | 5 ++--- src/components/SidePane/Help/index.tsx | 5 ++--- src/components/SidePane/Help/types.ts | 10 ++++++++++ src/components/SidePane/index.tsx | 7 +++++-- 5 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 src/components/SidePane/Help/types.ts diff --git a/src/components/SidePane/Help/index.android.tsx b/src/components/SidePane/Help/index.android.tsx index acab5f4933292..e907643f66974 100644 --- a/src/components/SidePane/Help/index.android.tsx +++ b/src/components/SidePane/Help/index.android.tsx @@ -3,14 +3,13 @@ import React, {useCallback} from 'react'; // eslint-disable-next-line no-restricted-imports import {Animated, BackHandler} from 'react-native'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSidePane from '@hooks/useSidePane'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import HelpContent from './HelpContent'; +import type HelpProps from './types'; -function Help() { +function Help({sidePaneTranslateX, closeSidePane}: HelpProps) { const styles = useThemeStyles(); - const {sidePaneTranslateX, closeSidePane} = useSidePane(); const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); diff --git a/src/components/SidePane/Help/index.ios.tsx b/src/components/SidePane/Help/index.ios.tsx index 4d1cb96547719..26122135a6944 100644 --- a/src/components/SidePane/Help/index.ios.tsx +++ b/src/components/SidePane/Help/index.ios.tsx @@ -3,17 +3,16 @@ import React from 'react'; import {Animated, Dimensions} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSidePane from '@hooks/useSidePane'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import HelpContent from './HelpContent'; +import type HelpProps from './types'; const SCREEN_WIDTH = Dimensions.get('window').width; -function Help() { +function Help({sidePaneTranslateX, closeSidePane}: HelpProps) { const styles = useThemeStyles(); - const {sidePaneTranslateX, closeSidePane} = useSidePane(); const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); diff --git a/src/components/SidePane/Help/index.tsx b/src/components/SidePane/Help/index.tsx index 379019ae25689..08567e2f1fab0 100644 --- a/src/components/SidePane/Help/index.tsx +++ b/src/components/SidePane/Help/index.tsx @@ -3,15 +3,14 @@ import React from 'react'; import {Animated} from 'react-native'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSidePane from '@hooks/useSidePane'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import HelpContent from './HelpContent'; +import type HelpProps from './types'; -function Help() { +function Help({sidePaneTranslateX, closeSidePane}: HelpProps) { const styles = useThemeStyles(); - const {sidePaneTranslateX, closeSidePane} = useSidePane(); const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); diff --git a/src/components/SidePane/Help/types.ts b/src/components/SidePane/Help/types.ts new file mode 100644 index 0000000000000..8054cc6cd43d6 --- /dev/null +++ b/src/components/SidePane/Help/types.ts @@ -0,0 +1,10 @@ +import type {MutableRefObject} from 'react'; +// eslint-disable-next-line no-restricted-imports +import type {Animated} from 'react-native'; + +type HelpProps = { + sidePaneTranslateX: MutableRefObject; + closeSidePane: (shouldUpdateNarrow?: boolean) => void; +}; + +export default HelpProps; diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx index 814261908aac3..4a2f7adba8d34 100644 --- a/src/components/SidePane/index.tsx +++ b/src/components/SidePane/index.tsx @@ -7,7 +7,7 @@ import Help from './Help'; import SidePaneOverlay from './SidePaneOverlay'; function SidePane() { - const {shouldHideSidePane, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); + const {shouldHideSidePane, sidePaneTranslateX, shouldHideSidePaneBackdrop, closeSidePane} = useSidePane(); const isInNarrowPaneModal = useRootNavigationState((state) => state?.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); if (shouldHideSidePane) { @@ -24,7 +24,10 @@ function SidePane() { /> )} - + ); } From 06036a3b48273fc63e5bb6926535840a053e8326 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 12 Mar 2025 13:53:53 +0100 Subject: [PATCH 5/7] Enable JS execution for pan gesture in iOS --- src/components/SidePane/Help/index.ios.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SidePane/Help/index.ios.tsx b/src/components/SidePane/Help/index.ios.tsx index 26122135a6944..7b9e5b65849fe 100644 --- a/src/components/SidePane/Help/index.ios.tsx +++ b/src/components/SidePane/Help/index.ios.tsx @@ -18,6 +18,7 @@ function Help({sidePaneTranslateX, closeSidePane}: HelpProps) { // SidePane isn't a native screen, this simulates the 'close swipe gesture' on iOS const panGesture = Gesture.Pan() + .runOnJS(true) .hitSlop({left: 0, width: 20}) .onUpdate((event) => { if (event.translationX <= 0) { From 6c9ff902ee04fb24cb6751c2d3b4f36f12a69e57 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 12 Mar 2025 16:02:20 +0100 Subject: [PATCH 6/7] Rename to wasPreviousNarrowScreen --- src/components/SidePane/Help/HelpContent.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SidePane/Help/HelpContent.tsx b/src/components/SidePane/Help/HelpContent.tsx index 0565afadefa75..94e6b3dba809b 100644 --- a/src/components/SidePane/Help/HelpContent.tsx +++ b/src/components/SidePane/Help/HelpContent.tsx @@ -24,17 +24,17 @@ function HelpContent() { return substituteRouteParameters(activeRoute, params); }); - const sizeChangedFromLargeToNarrow = useRef(!isExtraLargeScreenWidth); + const wasPreviousNarrowScreen = useRef(!isExtraLargeScreenWidth); useEffect(() => { // Close the side pane when the screen size changes from large to small - if (!isExtraLargeScreenWidth && !sizeChangedFromLargeToNarrow.current) { + if (!isExtraLargeScreenWidth && !wasPreviousNarrowScreen.current) { closeSidePane(true); - sizeChangedFromLargeToNarrow.current = true; + wasPreviousNarrowScreen.current = true; } // Reset the trigger when the screen size changes back to large if (isExtraLargeScreenWidth) { - sizeChangedFromLargeToNarrow.current = false; + wasPreviousNarrowScreen.current = false; } }, [isExtraLargeScreenWidth, closeSidePane]); From f719d1d3fd21bcc24ec9b5a8fd28b6cb44087763 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 13 Mar 2025 12:25:10 +0100 Subject: [PATCH 7/7] Fix lint --- src/components/SidePane/Help/HelpContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SidePane/Help/HelpContent.tsx b/src/components/SidePane/Help/HelpContent.tsx index ac7f43794992b..9080dd84cc320 100644 --- a/src/components/SidePane/Help/HelpContent.tsx +++ b/src/components/SidePane/Help/HelpContent.tsx @@ -1,8 +1,8 @@ import {findFocusedRoute} from '@react-navigation/native'; import React, {useEffect, useRef} from 'react'; -import {ScrollView} from 'react-native'; import HeaderGap from '@components/HeaderGap'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScrollView from '@components/ScrollView'; import getHelpContent from '@components/SidePane/getHelpContent'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize';