REF: Single stack for the app and all devices

This commit is contained in:
Marcos Rodriguez Velez 2024-11-15 21:29:20 -04:00
parent 95ab408605
commit 17474a6268
2 changed files with 43 additions and 38 deletions

View File

@ -1,12 +1,15 @@
// DrawerRoot.tsx
import { createDrawerNavigator, DrawerNavigationOptions } from '@react-navigation/drawer';
import React, { useLayoutEffect, useMemo } from 'react';
import { I18nManager, LayoutAnimation } from 'react-native';
import React, { useLayoutEffect, useMemo, useEffect } from 'react';
import { I18nManager, LayoutAnimation, AppState, NativeEventSubscription } from 'react-native';
import { useIsLargeScreen } from '../hooks/useIsLargeScreen';
import DrawerList from '../screen/wallets/DrawerList';
import DetailViewStackScreensStack from './DetailViewScreensStack';
import { useSettings } from '../hooks/context/useSettings';
import { useStorage } from '../hooks/context/useStorage';
import UnlockWith from '../screen/UnlockWith';
import { useBiometrics } from '../hooks/useBiometrics';
const Drawer = createDrawerNavigator();
@ -17,22 +20,55 @@ const DrawerListContent = (props: any) => {
const DrawerRoot = () => {
const { isLargeScreen } = useIsLargeScreen();
const { isDrawerShouldHide } = useSettings();
const { walletsInitialized, setWalletsInitialized, isStorageEncrypted } = useStorage();
const { biometricEnabled } = useBiometrics();
const drawerStyle: DrawerNavigationOptions = useMemo(
() => ({
drawerPosition: I18nManager.isRTL ? 'right' : 'left',
drawerStyle: { width: isLargeScreen && !isDrawerShouldHide ? 320 : '0%' },
drawerType: isLargeScreen ? 'permanent' : 'back',
drawerStyle: { width: isLargeScreen && !isDrawerShouldHide && walletsInitialized ? 320 : '0%' },
drawerType: isLargeScreen && walletsInitialized ? 'permanent' : 'back',
}),
[isDrawerShouldHide, isLargeScreen],
[isDrawerShouldHide, isLargeScreen, walletsInitialized],
);
useLayoutEffect(() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}, [isDrawerShouldHide]);
useEffect(() => {
let subscription: NativeEventSubscription | undefined;
const checkStorageEncryption = async () => {
const encrypted = await isStorageEncrypted();
if (encrypted || biometricEnabled) {
const handleAppStateChange = (nextAppState: string) => {
if (nextAppState === 'active') {
console.log('App has come to the foreground, setting walletsInitialized to false');
setWalletsInitialized(false);
}
};
handleAppStateChange('active');
subscription = AppState.addEventListener('change', handleAppStateChange);
}
};
checkStorageEncryption();
return () => {
subscription?.remove();
};
}, [setWalletsInitialized, isStorageEncrypted, biometricEnabled]);
return (
<Drawer.Navigator screenOptions={drawerStyle} drawerContent={DrawerListContent}>
{!walletsInitialized && (
<Drawer.Screen
name="UnlockWithScreen"
component={UnlockWith}
options={{ gestureHandlerProps: { enabled: false }, headerShown: false }}
/>
)}
<Drawer.Screen
name="DetailViewStackScreensStack"
component={DetailViewStackScreensStack}

View File

@ -1,13 +1,6 @@
import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack';
import React, { lazy, Suspense } from 'react';
import { isHandset } from '../blue_modules/environment';
import UnlockWith from '../screen/UnlockWith';
import { LazyLoadingIndicator } from './LazyLoadingIndicator';
import { DetailViewStackParamList } from './DetailViewStackParamList';
import { useStorage } from '../hooks/context/useStorage';
const DetailViewScreensStack = lazy(() => import('./DetailViewScreensStack'));
const DrawerRoot = lazy(() => import('./DrawerRoot'));
import DrawerRoot from './DrawerRoot';
export const NavigationDefaultOptions: NativeStackNavigationOptions = {
headerShown: false,
@ -22,32 +15,8 @@ export const StatusBarLightOptions: NativeStackNavigationOptions = { statusBarSt
const DetailViewStack = createNativeStackNavigator<DetailViewStackParamList>();
const UnlockRoot = () => {
return (
<DetailViewStack.Navigator screenOptions={{ headerShown: false, animationTypeForReplace: 'push' }}>
<DetailViewStack.Screen name="UnlockWithScreen" component={UnlockWith} />
</DetailViewStack.Navigator>
);
};
const MainRoot = () => {
const { walletsInitialized } = useStorage();
const renderRoot = () => {
if (!walletsInitialized) {
return <UnlockRoot />;
} else {
// Conditional rendering based on the environment
const Component = isHandset ? DetailViewScreensStack : DrawerRoot;
return (
<Suspense fallback={<LazyLoadingIndicator />}>
<Component />
</Suspense>
);
}
};
return renderRoot();
return DrawerRoot();
};
export default MainRoot;