Merge pull request #7040 from BlueWallet/drawertoggle

FIX: Use full screen display on specific screens

components/Context/SettingsProvider.tsx

@@ -83,6 +83,8 @@ interface SettingsContextType {
   setIsTotalBalanceEnabledStorage: (value: boolean) => Promise<void>;
   totalBalancePreferredUnit: BitcoinUnit;
   setTotalBalancePreferredUnitStorage: (unit: BitcoinUnit) => Promise<void>;
+  isDrawerShouldHide: boolean;
+  setIsDrawerShouldHide: (value: boolean) => void;
 }
 
 const defaultSettingsContext: SettingsContextType = {
@@ -108,6 +110,8 @@ const defaultSettingsContext: SettingsContextType = {
   setIsTotalBalanceEnabledStorage: async () => {},
   totalBalancePreferredUnit: BitcoinUnit.BTC,
   setTotalBalancePreferredUnitStorage: async (unit: BitcoinUnit) => {},
+  isDrawerShouldHide: false,
+  setIsDrawerShouldHide: () => {},
 };
 
 export const SettingsContext = createContext<SettingsContextType>(defaultSettingsContext);
@@ -135,6 +139,9 @@ export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   const [isTotalBalanceEnabled, setIsTotalBalanceEnabled] = useState<boolean>(true);
   const [totalBalancePreferredUnit, setTotalBalancePreferredUnitState] = useState<BitcoinUnit>(BitcoinUnit.BTC);
 
+  // Toggle Drawer (for screens like Manage Wallets or ScanQRCode)
+  const [isDrawerShouldHide, setIsDrawerShouldHide] = useState<boolean>(false);
+
   const languageStorage = useAsyncStorage(STORAGE_KEY);
   const { walletsInitialized } = useStorage();
 
@@ -312,6 +319,8 @@ export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({ chil
       setIsTotalBalanceEnabledStorage,
       totalBalancePreferredUnit,
       setTotalBalancePreferredUnitStorage,
+      isDrawerShouldHide,
+      setIsDrawerShouldHide,
     }),
     [
       preferredFiatCurrency,
@@ -336,6 +345,8 @@ export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({ chil
       setIsTotalBalanceEnabledStorage,
       totalBalancePreferredUnit,
       setTotalBalancePreferredUnitStorage,
+      isDrawerShouldHide,
+      setIsDrawerShouldHide,
     ],
   );
 

navigation/DrawerRoot.tsx

@@ -1,11 +1,12 @@
 // DrawerRoot.tsx
 import { createDrawerNavigator, DrawerNavigationOptions } from '@react-navigation/drawer';
-import React, { useMemo } from 'react';
-import { I18nManager } from 'react-native';
+import React, { useLayoutEffect, useMemo } from 'react';
+import { I18nManager, LayoutAnimation } from 'react-native';
 
 import { useIsLargeScreen } from '../hooks/useIsLargeScreen';
 import DrawerList from '../screen/wallets/DrawerList';
 import DetailViewStackScreensStack from './DetailViewScreensStack';
+import { useSettings } from '../hooks/context/useSettings';
 
 const Drawer = createDrawerNavigator();
 
@@ -15,16 +16,21 @@ const DrawerListContent = (props: any) => {
 
 const DrawerRoot = () => {
   const { isLargeScreen } = useIsLargeScreen();
+  const { isDrawerShouldHide } = useSettings();
 
   const drawerStyle: DrawerNavigationOptions = useMemo(
     () => ({
       drawerPosition: I18nManager.isRTL ? 'right' : 'left',
-      drawerStyle: { width: isLargeScreen ? 320 : '0%' },
+      drawerStyle: { width: isLargeScreen && !isDrawerShouldHide ? 320 : '0%' },
       drawerType: isLargeScreen ? 'permanent' : 'back',
     }),
-    [isLargeScreen],
+    [isDrawerShouldHide, isLargeScreen],
   );
 
+  useLayoutEffect(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  }, [isDrawerShouldHide]);
+
   return (
     <Drawer.Navigator screenOptions={drawerStyle} drawerContent={DrawerListContent}>
       <Drawer.Screen

screen/send/ScanQRCode.js

@@ -1,8 +1,8 @@
-import { useIsFocused, useNavigation, useRoute } from '@react-navigation/native';
+import { useFocusEffect, useIsFocused, useNavigation, useRoute } from '@react-navigation/native';
 import LocalQRCode from '@remobile/react-native-qrcode-local-image';
 import * as bitcoin from 'bitcoinjs-lib';
 import createHash from 'create-hash';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Alert, Image, Platform, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { CameraScreen } from 'react-native-camera-kit';
 import { Icon } from '@rneui/themed';
@@ -18,6 +18,7 @@ import Button from '../../components/Button';
 import { useTheme } from '../../components/themes';
 import { isCameraAuthorizationStatusGranted } from '../../helpers/scan-qr';
 import loc from '../../loc';
+import { useSettings } from '../../hooks/context/useSettings';
 
 let decoder = false;
 
@@ -85,6 +86,7 @@ const styles = StyleSheet.create({
 
 const ScanQRCode = () => {
   const [isLoading, setIsLoading] = useState(false);
+  const { setIsDrawerShouldHide } = useSettings();
   const navigation = useNavigation();
   const route = useRoute();
   const { launchedBy, onBarScanned, onDismiss, showFileImportButton } = route.params;
@@ -119,6 +121,16 @@ const ScanQRCode = () => {
     return createHash('sha256').update(s).digest().toString('hex');
   };
 
+  useFocusEffect(
+    useCallback(() => {
+      setIsDrawerShouldHide(true);
+
+      return () => {
+        setIsDrawerShouldHide(false);
+      };
+    }, [setIsDrawerShouldHide]),
+  );
+
   const _onReadUniformResourceV2 = part => {
     if (!decoder) decoder = new BlueURDecoder();
     try {

screen/wallets/ManageWallets.tsx

@@ -24,6 +24,7 @@ import presentAlert from '../../components/Alert';
 import prompt from '../../helpers/prompt';
 import HeaderRightButton from '../../components/HeaderRightButton';
 import { ManageWalletsListItem } from '../../components/ManageWalletsListItem';
+import { useSettings } from '../../hooks/context/useSettings';
 
 enum ItemType {
   WalletSection = 'wallet',
@@ -188,6 +189,7 @@ const reducer = (state: State, action: Action): State => {
 const ManageWallets: React.FC = () => {
   const { colors, closeImage } = useTheme();
   const { wallets: storedWallets, setWalletsWithNewOrder, txMetadata } = useStorage();
+  const { setIsDrawerShouldHide } = useSettings();
   const walletsRef = useRef<TWallet[]>(deepCopyWallets(storedWallets)); // Create a deep copy of wallets for the DraggableFlatList
   const { navigate, setOptions, goBack } = useExtendedNavigation();
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -285,6 +287,7 @@ const ManageWallets: React.FC = () => {
 
   useFocusEffect(
     useCallback(() => {
+      setIsDrawerShouldHide(true);
       const beforeRemoveListener = (e: { preventDefault: () => void; data: { action: any } }) => {
         if (!hasUnsavedChanges) {
           return;
@@ -311,8 +314,9 @@ const ManageWallets: React.FC = () => {
         if (beforeRemoveListenerRef.current) {
           navigation.removeListener('beforeRemove', beforeRemoveListenerRef.current);
         }
+        setIsDrawerShouldHide(false);
       };
-    }, [hasUnsavedChanges, navigation]),
+    }, [hasUnsavedChanges, navigation, setIsDrawerShouldHide]),
   );
 
   const renderHighlightedText = useCallback(