feat: action sheet bottom blank space

.maestro/tests/assorted/action-sheet-safe-area.yaml

@@ -0,0 +1,127 @@
+appId: ${APP_ID}
+name: Action Sheet Safe Area
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+onFlowComplete:
+  - evalScript: ${output.utils.deleteCreatedUsers()}
+tags:
+  - test-7
+
+# Regression for the action-sheet bottom safe-area spacing fix. The sheet
+# (TrueSheet / BottomSheetContent) owns the bottom safe-area inset; content must
+# not add its own bottom margin, which would either leave a blank band or push
+# the bottom-most row off-screen. Maestro can't measure a pixel gap, so the guard
+# is that each sheet opens and its bottom-most content stays fully visible.
+
+---
+- evalScript: ${output.user = output.utils.createUser()}
+- evalScript: ${output.actionSheetMessage = 'message-action-sheet'}
+- evalScript: ${output.room = output.utils.createRandomRoom(output.user.username, output.user.password)}
+- evalScript: ${output.utils.sendMessage(output.user.username, output.user.password, output.room.name, output.actionSheetMessage)}
+
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.user.username}
+      PASSWORD: ${output.user.password}
+
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view'
+    timeout: 60000
+
+# Message actions action sheet — bottom-most row (Delete) must stay reachable and visible.
+- runFlow:
+    file: '../../helpers/navigate-to-room.yaml'
+    env:
+      ROOM: ${output.room.name}
+- extendedWaitUntil:
+    visible:
+      id: 'message-content-${output.actionSheetMessage}'
+    timeout: 60000
+- longPressOn:
+    id: 'message-content-${output.actionSheetMessage}'
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- swipe:
+    from:
+      id: 'action-sheet-handle'
+    direction: UP
+- waitForAnimationToEnd:
+    timeout: 10000
+- scrollUntilVisible:
+    element:
+      id: 'message-actions-delete'
+    direction: DOWN
+    timeout: 20000
+- assertVisible:
+    id: 'message-actions-delete'
+
+# Dismiss the sheet and return to the rooms list for the remaining cases.
+- swipe:
+    direction: DOWN
+    duration: 500
+- waitForAnimationToEnd:
+    timeout: 10000
+- runFlow: '../../helpers/go-back.yaml'
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view'
+    timeout: 60000
+
+# Workspaces (servers list) action sheet — the bottom "Add server" row must be visible.
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-header-servers-list-button'
+    timeout: 60000
+- tapOn:
+    id: 'rooms-list-header-servers-list-button'
+- waitForAnimationToEnd:
+    timeout: 10000
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-header-servers-list'
+    timeout: 60000
+- assertVisible:
+    id: 'rooms-list-header-server-add'
+
+# Dismiss the sheet before moving on.
+- swipe:
+    direction: DOWN
+    duration: 500
+- waitForAnimationToEnd:
+    timeout: 10000
+
+# Directory filter action sheet — the bottom radio row must be visible.
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view-directory'
+    timeout: 60000
+- tapOn:
+    id: 'rooms-list-view-directory'
+- extendedWaitUntil:
+    visible:
+      id: 'directory-view'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: 'directory-view-filter'
+    timeout: 60000
+- tapOn:
+    id: 'directory-view-filter'
+- waitForAnimationToEnd:
+    timeout: 10000
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- assertVisible:
+    id: 'directory-switch-channels'
+- assertVisible:
+    id: 'directory-switch-teams'

app/containers/ActionSheet/ActionSheet.tsx

@@ -6,19 +6,20 @@ import {
 	findNodeHandle,
 	Keyboard,
 	type LayoutChangeEvent,
-	Platform,
 	useWindowDimensions,
 	type View
 } from 'react-native';
 import { TrueSheet } from '@lodev09/react-native-true-sheet';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../theme';
 import { isAndroid, isIOS } from '../../lib/methods/helpers';
 import { Handle } from './Handle';
 import { type TActionSheetOptions } from './Provider';
 import BottomSheetContent from './BottomSheetContent';
 import { HANDLE_HEIGHT, useActionSheetDetents } from './useActionSheetDetents';
+import { getActionSheetBottomInset } from './getActionSheetBottomInset';
 import styles from './styles';
 
 export const ACTION_SHEET_ANIMATION_DURATION = 250;
@@ -34,11 +35,9 @@ const ActionSheet = memo(
 		const [contentHeight, setContentHeight] = useState(0);
 		const onCloseSnapshotRef = useRef<TActionSheetOptions['onClose']>(undefined);
 
-		// TrueSheet detects the bottom inset for Android 16 and iOS
-		// To avoid content hiding behind navigation bar on older Android versions
-		const isNewAndroid = isAndroid && Number(Platform.Version) >= 36;
-		const bottom = isIOS || isNewAndroid ? 0 : windowHeight * 0.03;
+		const insets = useSafeAreaInsets();
 		const itemHeight = 48 * fontScale;
+		const bottomInset = getActionSheetBottomInset(insets);
 
 		const handleContentLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
 			setContentHeight(layout.height);
@@ -107,7 +106,7 @@ const ActionSheet = memo(
 
 		const { detents, maxHeight, scrollEnabled } = useActionSheetDetents({
 			windowHeight,
-			bottomInset: bottom,
+			bottomInset,
 			itemHeight,
 			optionsLength: data?.options?.length || 0,
 			snaps: effectiveSnaps,
@@ -156,6 +155,7 @@ const ActionSheet = memo(
 							fullContainer={data.fullContainer}
 							hugContent={data.hugContent}
 							contentMinHeight={isIOS ? contentMinHeight : undefined}
+							contentPaddingBottom={bottomInset}
 							scrollEnabled={scrollEnabled}>
 							{data?.children}
 						</BottomSheetContent>

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -1,6 +1,5 @@
 import { FlatList, Text, useWindowDimensions, View, type ViewProps } from 'react-native';
 import { memo, type ReactElement } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
@@ -20,6 +19,7 @@ interface IBottomSheetContentProps {
 	fullContainer?: boolean;
 	hugContent?: boolean;
 	contentMinHeight?: number;
+	contentPaddingBottom?: number;
 	scrollEnabled?: boolean;
 }
 
@@ -33,15 +33,15 @@ const BottomSheetContent = memo(
 		fullContainer,
 		hugContent,
 		contentMinHeight,
+		contentPaddingBottom,
 		scrollEnabled
 	}: IBottomSheetContentProps) => {
 		'use memo';
 
 		const { colors } = useTheme();
-		const { bottom } = useSafeAreaInsets();
 		const { fontScale } = useWindowDimensions();
 		const height = 48 * fontScale;
-		const paddingBottom = isAndroid ? bottom + height : bottom;
+		const paddingBottom = contentPaddingBottom || 0;
 		const minHeightStyle = isAndroid || !contentMinHeight ? undefined : { minHeight: contentMinHeight };
 
 		const renderFooter = () =>

app/containers/ActionSheet/getActionSheetBottomInset.ts

@@ -0,0 +1,16 @@
+import { Platform } from 'react-native';
+import { initialWindowMetrics, type EdgeInsets } from 'react-native-safe-area-context';
+
+import { isAndroid, isIOS } from '../../lib/methods/helpers';
+
+export function getActionSheetBottomInset(liveInsets: EdgeInsets): number {
+	const isNewAndroid = isAndroid && Number(Platform.Version) >= 36;
+	if (isIOS || isNewAndroid) {
+		return 0;
+	}
+
+	const capturedNavBarInset = initialWindowMetrics?.insets.bottom ?? 0;
+	const navBarInset = Math.max(liveInsets.bottom, capturedNavBarInset);
+
+	return navBarInset;
+}

app/views/DirectoryView/Options.tsx

@@ -1,5 +1,4 @@
 import { Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { CustomIcon, type TIconsName } from '../../containers/CustomIcon';
 import * as List from '../../containers/List';
@@ -24,7 +23,6 @@ const DirectoryOptions = ({
 	toggleWorkspace
 }: IDirectoryOptionsProps) => {
 	const { colors } = useTheme();
-	const insets = useSafeAreaInsets();
 
 	const renderItem = (itemType: string) => {
 		let text = 'Users';
@@ -52,7 +50,7 @@ const DirectoryOptions = ({
 	};
 
 	return (
-		<List.Container contentContainerStyle={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<List.Container contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}>
 			<List.Separator />
 			{renderItem('channels')}
 			<List.Separator />

app/views/MediaAutoDownloadView/ListPicker.tsx

@@ -1,6 +1,5 @@
 import { Fragment, type ReactElement } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useActionSheet } from '../../containers/ActionSheet';
 import * as List from '../../containers/List';
@@ -68,11 +67,10 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
-	const insets = useSafeAreaInsets();
 	const option = OPTIONS.find(option => option.value === value) || OPTIONS[2];
 
 	const getOptions = (): ReactElement => (
-		<View style={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<View style={{ backgroundColor: colors.surfaceRoom }}>
 			<List.Separator />
 			{OPTIONS.map(i => (
 				<Fragment key={i.value}>

app/views/RoomsListView/components/ServersList.tsx

@@ -1,6 +1,5 @@
 import { memo, useLayoutEffect, useRef, useState } from 'react';
-import { FlatList, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { FlatList, Text, useWindowDimensions, View } from 'react-native';
 import { batch, useDispatch } from 'react-redux';
 import { type Subscription } from 'rxjs';
 
@@ -24,9 +23,7 @@ import { events, logEvent } from '../../../lib/methods/helpers/log';
 import UserPreferences from '../../../lib/methods/userPreferences';
 import { useTheme } from '../../../theme';
 import styles from '../styles';
-
-const ROW_HEIGHT = 68;
-const MAX_ROWS = 4.5;
+import { getServersListMaxHeight } from './serversListLayout';
 
 const ServersList = () => {
 	'use memo';
@@ -37,7 +34,7 @@ const ServersList = () => {
 	const server = useAppSelector(state => state.server.server);
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 	const { colors } = useTheme();
-	const insets = useSafeAreaInsets();
+	const { height: windowHeight } = useWindowDimensions();
 
 	useLayoutEffect(() => {
 		const init = () => {
@@ -124,15 +121,14 @@ const ServersList = () => {
 		<View
 			style={{
 				backgroundColor: colors.surfaceLight,
-				borderColor: colors.strokeLight,
-				marginBottom: insets.bottom
+				borderColor: colors.strokeLight
 			}}
 			testID='rooms-list-header-servers-list'>
 			<View style={[styles.serversListContainerHeader, styles.serverHeader, { borderColor: colors.strokeLight }]}>
 				<Text style={[styles.serverHeaderText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Workspaces')}</Text>
 			</View>
 			<FlatList
-				style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
+				style={{ maxHeight: getServersListMaxHeight(windowHeight) }}
 				data={servers}
 				keyExtractor={item => item.id}
 				renderItem={renderItem}

app/views/RoomsListView/components/serversListLayout.ts

@@ -0,0 +1,27 @@
+// Layout math for the Workspaces (servers list) action sheet, kept dependency-free
+// so it can be unit-tested without the redux/database tree the component needs.
+
+export const SERVERS_LIST_ROW_HEIGHT = 68;
+export const SERVERS_LIST_MAX_ROWS = 4.5;
+
+// Vertical space the sheet needs for everything that is NOT the scrollable server
+// list: the "Workspaces" header, the separator, the Add Server button block, and
+// the sheet handle. Reserved so the button is never pushed off-screen.
+const SERVERS_LIST_CHROME_HEIGHT = 150;
+
+// Mirrors ACTION_SHEET_MAX_HEIGHT_FRACTION in useActionSheetDetents: a children
+// action sheet can grow to at most this fraction of the window height.
+const ACTION_SHEET_MAX_HEIGHT_FRACTION = 0.75;
+
+/**
+ * Max height for the servers FlatList. In portrait there is plenty of room, so it
+ * stays at the full MAX_ROWS cap (unchanged behaviour). In a short window
+ * (landscape, split-view) it shrinks so the header + Add Server button still fit
+ * inside the sheet's max height and the list scrolls instead of clipping the
+ * button — e.g. landscape with 3+ workspaces connected. Never smaller than one row.
+ */
+export const getServersListMaxHeight = (windowHeight: number): number => {
+	const fullHeight = SERVERS_LIST_MAX_ROWS * SERVERS_LIST_ROW_HEIGHT;
+	const availableForList = windowHeight * ACTION_SHEET_MAX_HEIGHT_FRACTION - SERVERS_LIST_CHROME_HEIGHT;
+	return Math.max(SERVERS_LIST_ROW_HEIGHT, Math.min(fullHeight, availableForList));
+};

app/views/UserNotificationPreferencesView/ListPicker.tsx

@@ -1,5 +1,4 @@
 import { StyleSheet, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Fragment, type ReactElement } from 'react';
 
 import * as List from '../../containers/List';
@@ -37,10 +36,9 @@ const ListPicker = ({
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
 	const option = value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0];
-	const insets = useSafeAreaInsets();
 
 	const getOptions = (): ReactElement => (
-		<View style={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<View style={{ backgroundColor: colors.surfaceRoom }}>
 			<List.Separator />
 			{OPTIONS[preference].map(i => (
 				<Fragment key={i.value}>