Mobile: Fixes #11130: Fix regression: Search screen not hidden when cached for search result navigation (#11131)

packages/app-mobile/components/global-style.ts

@@ -30,6 +30,7 @@ export type ThemeStyle = BaseTheme & typeof baseStyle & {
 	headerStyle: TextStyle;
 	headerWrapperStyle: ViewStyle;
 	rootStyle: ViewStyle;
+	hiddenRootStyle: ViewStyle;
 	keyboardAppearance: 'light'|'dark';
 };
 
@@ -87,6 +88,11 @@ function extraStyles(theme: BaseTheme) {
 		backgroundColor: theme.backgroundColor,
 	};
 
+	const hiddenRootStyle: ViewStyle = {
+		...rootStyle,
+		flex: 0.001, // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it
+	};
+
 	return {
 		marginRight: baseStyle.margin,
 		marginLeft: baseStyle.margin,
@@ -101,6 +107,7 @@ function extraStyles(theme: BaseTheme) {
 		headerStyle,
 		headerWrapperStyle,
 		rootStyle,
+		hiddenRootStyle,
 
 		keyboardAppearance: theme.appearance,
 		color5: theme.color5 ?? theme.backgroundColor4,

packages/app-mobile/components/screens/Notes.tsx

@@ -234,14 +234,7 @@ class NotesScreenComponent extends BaseScreenComponent<Props, State> {
 		const parent = this.parentItem();
 		const theme = themeStyle(this.props.themeId);
 
-		const rootStyle = {
-			flex: 1,
-			backgroundColor: theme.backgroundColor,
-		};
-
-		if (!this.props.visible) {
-			rootStyle.flex = 0.001; // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it
-		}
+		const rootStyle = this.props.visible ? theme.rootStyle : theme.hiddenRootStyle;
 
 		const title = parent ? parent.title : null;
 		if (!parent) {

packages/app-mobile/components/screens/SearchScreen/index.tsx

@@ -10,6 +10,7 @@ import { Dispatch } from 'redux';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import IconButton from '../../IconButton';
 import SearchResults from './SearchResults';
+import AccessibleView from '../../accessibility/AccessibleView';
 
 interface Props {
 	themeId: number;
@@ -21,7 +22,7 @@ interface Props {
 	ftsEnabled: number;
 }
 
-const useStyles = (theme: ThemeStyle) => {
+const useStyles = (theme: ThemeStyle, visible: boolean) => {
 	return useMemo(() => {
 		return StyleSheet.create({
 			body: {
@@ -46,13 +47,14 @@ const useStyles = (theme: ThemeStyle) => {
 				paddingRight: theme.marginRight,
 				backgroundColor: theme.backgroundColor,
 			},
+			rootStyle: visible ? theme.rootStyle : theme.hiddenRootStyle,
 		});
-	}, [theme]);
+	}, [theme, visible]);
 };
 
 const SearchScreenComponent: React.FC<Props> = props => {
 	const theme = themeStyle(props.themeId);
-	const styles = useStyles(theme);
+	const styles = useStyles(theme, props.visible);
 
 	const [query, setQuery] = useState(props.query);
 
@@ -79,7 +81,7 @@ const SearchScreenComponent: React.FC<Props> = props => {
 	}, [props.dispatch]);
 
 	return (
-		<View style={theme.rootStyle}>
+		<AccessibleView style={styles.rootStyle} inert={!props.visible}>
 			<ScreenHeader
 				title={_('Search')}
 				folderPickerOptions={{
@@ -115,7 +117,7 @@ const SearchScreenComponent: React.FC<Props> = props => {
 					onHighlightedWordsChange={onHighlightedWordsChange}
 				/>
 			</View>
-		</View>
+		</AccessibleView>
 	);
 };