Page MenuHomePhabricator
Differential D14397

[native] prevent leaving restore screen when falling back to v1
ClosedPublic
Actions

Authored by kamil on Feb 24 2025, 6:34 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 2, 10:05 AM
Unknown Object (File)
Wed, Apr 2, 9:09 AM
Unknown Object (File)
Tue, Apr 1, 11:07 PM
Unknown Object (File)
Tue, Apr 1, 7:25 PM
Unknown Object (File)
Tue, Apr 1, 3:20 PM
Unknown Object (File)
Tue, Apr 1, 12:01 PM
Unknown Object (File)
Mon, Mar 17, 11:26 AM
Unknown Object (File)
Fri, Mar 14, 5:34 PM
View All 32 Files
Subscribers
ashoat

Details

Reviewers
tomek
bartek
angelika
Commits
rCOMM1a052f58c459: [native] prevent leaving restore screen when falling back to v1
Summary

Part of ENG-10240.

Using the same approach as for Register account screen - moved this logic to a hook to avoid code duplication.

Depends on D14398

Test Plan

Same test plan as for D14398 but on RestorePasswordAccountScreen and RestorePromptScreen.

Tested on physical iOS and physical Android.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

kamil created this revision.Feb 24 2025, 6:34 AM
kamil held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptFeb 24 2025, 6:34 AM
kamil edited the summary of this revision. (Show Details)Feb 24 2025, 6:36 AM
kamil added a parent revision: D14398: [native] disable navigation in `RestoreBackupScreen`.
kamil edited the test plan for this revision. (Show Details)
kamil published this revision for review.Feb 24 2025, 6:48 AM
tomek accepted this revision.Feb 24 2025, 8:44 AM
tomek added inline comments.
native/account/restore-prompt-screen.react.js
102 ↗(On Diff #47231)

Will this action work after this diff? Won't it get blocked by the hook?

native/navigation/use-prevent-user-from-leaving-screen.js
17–26 ↗(On Diff #47231)

What's the difference between setting the header to null and to undefined?

This revision is now accepted and ready to land.Feb 24 2025, 8:44 AM
ashoat added inline comments.Feb 24 2025, 9:10 AM
native/navigation/use-prevent-user-from-leaving-screen.js
17–26 ↗(On Diff #47231)

I might be wrong, but I think undefined resets default behavior (the back button is present) and null disables the back button

kamil mentioned this in D14398: [native] disable navigation in `RestoreBackupScreen`.Feb 24 2025, 10:09 AM
kamil added inline comments.Feb 25 2025, 3:51 AM
native/account/restore-prompt-screen.react.js
102 ↗(On Diff #47231)

It works, but after looking at this we realize goBack here doesn't make much sense, we should just remove it, see the video below:

The user should still be on the same screen.

native/navigation/use-prevent-user-from-leaving-screen.js
17–26 ↗(On Diff #47231)

Yes, this code was copied so context in https://phab.comm.dev/D11849#inline-70733

kamil attached a referenced file: F4289967: ScreenRecording_02-25-2025 12-39-34_1.MP4. (Show Details)Feb 25 2025, 3:51 AM
kamil updated this revision to Diff 47267.Feb 25 2025, 4:00 AM

remove goBack from Alert

This revision was landed with ongoing or failed builds.Feb 25 2025, 4:34 AM
Closed by commit rCOMM1a052f58c459: [native] prevent leaving restore screen when falling back to v1 (authored by kamil). · Explain Why
This revision was automatically updated to reflect the committed changes.
kamil added a commit: rCOMM1a052f58c459: [native] prevent leaving restore screen when falling back to v1.

Revision Contents
Changeset List

Diff 47267

View Options

native/account/registration/registration-terms.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/account/restore-password-account-screen.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/account/restore-prompt-screen.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/navigation/use-prevent-user-from-leaving-screen.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines