[PB-6742] bugfix/Login screen navigation

android/app/build.gradle

@@ -93,8 +93,8 @@ android {
         applicationId 'com.internxt.cloud'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 127
-        versionName "1.10.1"
+        versionCode 129
+        versionName "1.10.2"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }

android/app/src/main/res/values/strings.xml

@@ -1,7 +1,7 @@
 <resources>
   <string name="app_name">Internxt</string>
   <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
-  <string name="expo_runtime_version">1.10.1</string>
+  <string name="expo_runtime_version">1.10.2</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
 </resources>

ios/Internxt/Info.plist

@@ -23,7 +23,7 @@
     <key>CFBundlePackageType</key>
     <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
     <key>CFBundleShortVersionString</key>
-    <string>1.10.1</string>
+    <string>1.10.2</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleURLTypes</key>

ios/Internxt/Supporting/Expo.plist

@@ -9,7 +9,7 @@
     <key>EXUpdatesLaunchWaitMs</key>
     <integer>0</integer>
     <key>EXUpdatesRuntimeVersion</key>
-    <string>1.10.1</string>
+    <string>1.10.2</string>
     <key>EXUpdatesURL</key>
     <string>https://u.expo.dev/680f4feb-6315-4a50-93ec-36dcd0b831d2</string>
   </dict>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drive-mobile",
-  "version": "v1.10.1",
+  "version": "v1.10.2",
   "private": true,
   "license": "GNU",
   "scripts": {

src/App.tsx

@@ -249,13 +249,7 @@ function AppContent(): JSX.Element {
                     onClose={onChangeProfilePictureModalClosed}
                   />
                   <LanguageModal isOpen={isLanguageModalOpen} onClose={onLanguageModalClosed} />
-                  <SignOutModal
-                    onSignedOut={() => {
-                      if (navigationRef.isReady()) {
-                        navigationRef.reset({ index: 0, routes: [{ name: 'SignIn' }] });
-                      }
-                    }}
-                  />
+                  <SignOutModal />
                 </Portal.Host>
               </DriveContextProvider>
             ) : (

src/components/SearchInput/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { MagnifyingGlass, XCircle } from 'phosphor-react-native';
+import { MagnifyingGlassIcon, XCircleIcon } from 'phosphor-react-native';
 import { createRef, useState } from 'react';
 import { StyleProp, TextInput, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
@@ -50,7 +50,7 @@ export function SearchInput(props: SearchInputProps): JSX.Element {
           <View style={tailwind('flex-row items-center')}>
             {!isFocused && (
               <View style={tailwind('pl-3')}>
-                <MagnifyingGlass color={getColor('text-gray-40')} size={18} />
+                <MagnifyingGlassIcon color={getColor('text-gray-40')} size={18} />
               </View>
             )}
 
@@ -62,8 +62,14 @@ export function SearchInput(props: SearchInputProps): JSX.Element {
               value={props.value}
               style={[
                 styles.fontWeight.regular,
-                tailwind('text-base pl-3 h-9 flex-1'),
-                { marginBottom: 2, color: getColor('text-gray-100') },
+                tailwind('pl-3 h-9 flex-1'),
+                {
+                  fontSize: 16,
+                  color: getColor('text-gray-100'),
+                  paddingVertical: 0,
+                  textAlignVertical: 'center',
+                  includeFontPadding: false,
+                },
               ]}
               placeholder={props.placeholder || ''}
               placeholderTextColor={getColor('text-gray-80')}
@@ -72,7 +78,7 @@ export function SearchInput(props: SearchInputProps): JSX.Element {
             {!!props.value && (
               <TouchableOpacity onPress={onClearButtonPressed}>
                 <View style={tailwind('py-1.5 px-3 items-center justify-center')}>
-                  <XCircle weight="fill" color={getColor('text-gray-40')} size={24} />
+                  <XCircleIcon weight="fill" color={getColor('text-gray-40')} size={24} />
                 </View>
               </TouchableOpacity>
             )}

src/components/modals/SignOutModal/index.tsx

@@ -13,11 +13,7 @@ import LoadingSpinner from '../../LoadingSpinner';
 import UserProfilePicture from '../../UserProfilePicture';
 import CenterModal from '../CenterModal';
 
-interface SignOutModalProps {
-  readonly onSignedOut: () => void;
-}
-
-function SignOutModal({ onSignedOut }: SignOutModalProps): JSX.Element {
+function SignOutModal(): JSX.Element {
   const tailwind = useTailwind();
   const dispatch = useAppDispatch();
   const userFullName = useAppSelector(authSelectors.userFullName);
@@ -41,7 +37,6 @@ function SignOutModal({ onSignedOut }: SignOutModalProps): JSX.Element {
     await dispatch(authThunks.signOutThunk({ reason: 'manual' }));
     isSigningOutRef.current = false;
     setIsSigningOut(false);
-    onSignedOut();
     onClosed();
   };
 

src/navigation/AppStackNavigator.tsx

@@ -0,0 +1,51 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Platform } from 'react-native';
+
+import { LargeShareUploadScreen } from '../screens/LargeShareUpload/LargeShareUploadScreen';
+import { DeactivatedAccountScreen } from '../screens/DeactivatedAccountScreen';
+import DebugScreen from '../screens/DebugScreen';
+import { TrashScreen } from '../screens/common/TrashScreen';
+import { DrivePreviewScreen } from '../screens/drive/DrivePreviewScreen';
+import { PhotoPreviewScreen } from '../screens/PhotoPreviewScreen';
+import { SettingsNavigator } from './SettingsNavigator';
+import AuthenticatedNavigator from './TabExplorerNavigator';
+import ShareExtensionView from '../shareExtension/ShareExtensionView.android';
+import { RootStackParamList } from '../types/navigation';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export default function AppStackNavigator(): JSX.Element {
+  return (
+    <Stack.Navigator initialRouteName="TabExplorer" screenOptions={{ headerShown: false, gestureEnabled: true }}>
+      <Stack.Screen name="Debug" component={DebugScreen} />
+      <Stack.Screen name="DeactivatedAccount" component={DeactivatedAccountScreen} />
+      <Stack.Screen name="TabExplorer" component={AuthenticatedNavigator} />
+      <Stack.Screen name="Trash" component={TrashScreen} />
+      <Stack.Screen name="Settings" component={SettingsNavigator} />
+      <Stack.Screen
+        name="DrivePreview"
+        component={DrivePreviewScreen}
+        options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+      />
+      <Stack.Screen
+        name="PhotoPreview"
+        component={PhotoPreviewScreen}
+        options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+      />
+      {Platform.OS === 'android' && (
+        <Stack.Screen
+          name="AndroidShare"
+          component={ShareExtensionView}
+          options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+        />
+      )}
+      {Platform.OS === 'ios' && (
+        <Stack.Screen
+          name="LargeShareUpload"
+          component={LargeShareUploadScreen}
+          options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+        />
+      )}
+    </Stack.Navigator>
+  );
+}

src/navigation/AuthStackNavigator.tsx

@@ -0,0 +1,27 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Platform } from 'react-native';
+
+import SignInScreen from '../screens/SignInScreen';
+import WebLoginScreen from '../screens/WebLoginScreen';
+import DebugScreen from '../screens/DebugScreen';
+import ShareExtensionView from '../shareExtension/ShareExtensionView.android';
+import { RootStackParamList } from '../types/navigation';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export default function AuthStackNavigator(): JSX.Element {
+  return (
+    <Stack.Navigator initialRouteName="SignIn" screenOptions={{ headerShown: false, gestureEnabled: true }}>
+      <Stack.Screen name="Debug" component={DebugScreen} />
+      <Stack.Screen name="SignIn" component={SignInScreen} />
+      <Stack.Screen name="WebLogin" component={WebLoginScreen} />
+      {Platform.OS === 'android' && (
+        <Stack.Screen
+          name="AndroidShare"
+          component={ShareExtensionView}
+          options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+        />
+      )}
+    </Stack.Navigator>
+  );
+}

src/navigation/RootNavigator.tsx

@@ -1,26 +1,14 @@
 import { NavigationContainerRef } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { Platform, View } from 'react-native';
-import { LargeShareUploadScreen } from '../screens/LargeShareUpload/LargeShareUploadScreen';
+import { View } from 'react-native';
 
-import SignInScreen from '../screens/SignInScreen';
-import WebLoginScreen from '../screens/WebLoginScreen';
 import { useAppSelector } from '../store/hooks';
 import { RootStackParamList } from '../types/navigation';
-import AuthenticatedNavigator from './TabExplorerNavigator';
 
 import { useDeepLinks } from '../hooks/useDeepLinks';
-import { DeactivatedAccountScreen } from '../screens/DeactivatedAccountScreen';
-import DebugScreen from '../screens/DebugScreen';
-import { TrashScreen } from '../screens/common/TrashScreen';
-import { DrivePreviewScreen } from '../screens/drive/DrivePreviewScreen';
-import { PhotoPreviewScreen } from '../screens/PhotoPreviewScreen';
-import { SettingsNavigator } from './SettingsNavigator';
-import ShareExtensionView from '../shareExtension/ShareExtensionView.android';
 import { useIosPendingShareHandoff } from '../shareExtension/hooks/useIosPendingShareHandoff';
 import { useAndroidShareIntent } from '../shareExtension/useAndroidShareIntent';
-
-const Stack = createNativeStackNavigator<RootStackParamList>();
+import AppStackNavigator from './AppStackNavigator';
+import AuthStackNavigator from './AuthStackNavigator';
 
 type Props = {
   navigationContainerRef?: NavigationContainerRef<RootStackParamList>;
@@ -35,43 +23,7 @@ function AppNavigator({ navigationContainerRef }: Readonly<Props>): JSX.Element
 
   if (isLoggedIn == null) return <View />;
 
-  const initialRouteName: keyof RootStackParamList = isLoggedIn ? 'TabExplorer' : 'SignIn';
-
-  return (
-    <Stack.Navigator initialRouteName={initialRouteName} screenOptions={{ headerShown: false, gestureEnabled: true }}>
-      <Stack.Screen name="Debug" component={DebugScreen} />
-      <Stack.Screen name="SignIn" component={SignInScreen} />
-      <Stack.Screen name="WebLogin" component={WebLoginScreen} />
-      <Stack.Screen name="DeactivatedAccount" component={DeactivatedAccountScreen} />
-      <Stack.Screen name="TabExplorer" component={AuthenticatedNavigator} />
-      <Stack.Screen name="Trash" component={TrashScreen} />
-      <Stack.Screen name="Settings" component={SettingsNavigator} />
-      <Stack.Screen
-        name="DrivePreview"
-        component={DrivePreviewScreen}
-        options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
-      />
-      <Stack.Screen
-        name="PhotoPreview"
-        component={PhotoPreviewScreen}
-        options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
-      />
-      {Platform.OS === 'android' && (
-        <Stack.Screen
-          name="AndroidShare"
-          component={ShareExtensionView}
-          options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
-        />
-      )}
-      {Platform.OS === 'ios' && (
-        <Stack.Screen
-          name="LargeShareUpload"
-          component={LargeShareUploadScreen}
-          options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
-        />
-      )}
-    </Stack.Navigator>
-  );
+  return isLoggedIn ? <AppStackNavigator /> : <AuthStackNavigator />;
 }
 
 export default AppNavigator;

src/navigation/TabExplorerNavigator.tsx

@@ -5,7 +5,6 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs/lib/typescript/
 import { useEffect } from 'react';
 import { AppState, AppStateStatus, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { authThunks } from 'src/store/slices/auth';
 import { runBackupCycleThunk } from 'src/store/slices/photos';
 import { storageThunks } from 'src/store/slices/storage';
 import { useTailwind } from 'tailwind-rn';
@@ -60,7 +59,6 @@ export default function TabExplorerNavigator(props: RootStackScreenProps<'TabExp
       } catch {
         const isDeletingAccount = await asyncStorageService.getItem(AsyncStorageKey.IsDeletingAccount);
         if (isDeletingAccount) {
-          dispatch(authThunks.signOutThunk({ reason: 'manual' }));
           props.navigation.replace('DeactivatedAccount');
         }
       }

src/screens/DeactivatedAccountScreen/DeactivatedAccountScreen.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { RootStackScreenProps } from '../../types/navigation';
 import InternxtLogo from '../../../assets/logo.svg';
 import AppScreen from '../../components/AppScreen';
 import AppButton from '../../components/AppButton';
@@ -12,12 +11,15 @@ import { Dimensions, Linking, View } from 'react-native';
 import AppVersionWidget from 'src/components/AppVersionWidget';
 import { LinearGradient } from 'expo-linear-gradient';
 import appService from 'src/services/AppService';
+import { useAppDispatch } from 'src/store/hooks';
+import { authThunks } from 'src/store/slices/auth';
 
-export function DeactivatedAccountScreen({ navigation }: RootStackScreenProps<'DeactivatedAccount'>): JSX.Element {
+export function DeactivatedAccountScreen(): JSX.Element {
   const tailwind = useTailwind();
+  const dispatch = useAppDispatch();
 
   const handleGoToSignIn = () => {
-    navigation.replace('SignIn');
+    dispatch(authThunks.signOutThunk({ reason: 'manual' }));
   };
   const handleGoToSignUp = async () => {
     const webAuthUrl = appService.urls.webAuth.signup;

src/screens/PhotoPreviewScreen/index.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import strings from 'assets/lang/strings';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { StatusBar, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
@@ -53,27 +53,32 @@ export const PhotoPreviewScreen = ({ route }: Props): JSX.Element => {
     }
   }, []);
 
-  const handleSwipeDown = useCallback(() => {
+  const hasClosedRef = useRef(false);
+  const closePreview = useCallback(() => {
+    if (hasClosedRef.current) {
+      return;
+    }
+    hasClosedRef.current = true;
     navigation.goBack();
   }, [navigation]);
 
+  const handleSwipeDown = useCallback(() => {
+    closePreview();
+  }, [closePreview]);
+
   const exitVideoMode = useCallback(() => {
     setHasVideoStarted(false);
     resetVideoPlayer();
     setIsUiVisible(true);
   }, [resetVideoPlayer]);
 
-  const closePreviewScreen = useCallback(() => {
-    navigation.goBack();
-  }, [navigation]);
-
   const handleClose = useCallback(() => {
     if (hasVideoStarted) {
       exitVideoMode();
     } else {
-      closePreviewScreen();
+      closePreview();
     }
-  }, [hasVideoStarted, exitVideoMode, closePreviewScreen]);
+  }, [hasVideoStarted, exitVideoMode, closePreview]);
 
   const handleVideoPlay = useCallback(() => {
     setHasVideoStarted(true);
@@ -132,8 +137,8 @@ export const PhotoPreviewScreen = ({ route }: Props): JSX.Element => {
     }, [onItemChanged]),
     onAfterTrash: useCallback(async () => {
       await onItemChanged?.();
-      navigation.goBack();
-    }, [onItemChanged, navigation]),
+      closePreview();
+    }, [onItemChanged, closePreview]),
     onAfterRestore: useCallback(
       async (restoredItems: TimelinePhotoItem[]) => {
         for (const restoredItem of restoredItems) {