chore: enable edge to edge on android

.github/actions/build-android/action.yml

@@ -52,6 +52,7 @@ runs:
         echo -e "reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64" >> ./gradle.properties
         echo -e "newArchEnabled=true" >> ./gradle.properties
         echo -e "hermesEnabled=true" >> ./gradle.properties
+        echo -e "edgeToEdgeEnabled=true" >> ./gradle.properties
         echo -e "VERSIONCODE=${{ inputs.BUILD_VERSION }}" >> ./gradle.properties
         echo -e "APPLICATION_ID=chat.rocket.android" >> ./gradle.properties
         echo -e "BugsnagAPIKey=${{ inputs.BUGSNAG_KEY_OFFICIAL }}" >> ./gradle.properties

.github/workflows/e2e-build-android.yml

@@ -105,6 +105,7 @@ jobs:
           echo -e "APPLICATION_ID=chat.rocket.android" >> ./gradle.properties
           echo -e "newArchEnabled=true" >> ./gradle.properties
           echo -e "hermesEnabled=true" >> ./gradle.properties
+          echo -e "edgeToEdgeEnabled=true" >> ./gradle.properties
           echo -e "VERSIONCODE=999999" >> ./gradle.properties
           echo -e "KEYSTORE=release.keystore" >> ./gradle.properties
           echo -e 'KEYSTORE_PASSWORD=${{ secrets.KEYSTORE_OFFICIAL_PASSWORD }}' >> ./gradle.properties

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

@@ -3,6 +3,7 @@
         <item name="android:colorEdgeEffect">#aaaaaa</item>
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item> 
+        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
      <style name="BootTheme" parent="Theme.BootSplash">
@@ -11,6 +12,7 @@
         <item name="postBootSplashTheme">@style/AppTheme</item>
         <item name="android:statusBarColor">@android:color/transparent</item>
         <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!--  https://github.com/facebook/react-native/blob/d1ab03235cb4b93304150878d2b9057ab45bba77/ReactAndroid/src/main/res/views/modal/values/themes.xml#L5  -->

android/gradle.properties

@@ -48,4 +48,4 @@ hermesEnabled=true
 # Use this property to enable edge-to-edge display support.
 # This allows your app to draw behind system bars for an immersive UI.
 # Note: Only works with ReactActivity and should not be used with custom Activity.
-edgeToEdgeEnabled=false
+edgeToEdgeEnabled=true

app/containers/ActionSheet/ActionSheet.tsx

@@ -6,7 +6,6 @@ import {
 	findNodeHandle,
 	Keyboard,
 	type LayoutChangeEvent,
-	Platform,
 	useWindowDimensions,
 	type View
 } from 'react-native';
@@ -34,10 +33,6 @@ 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 itemHeight = 48 * fontScale;
 
 		const handleContentLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
@@ -107,7 +102,6 @@ const ActionSheet = memo(
 
 		const { detents, maxHeight, scrollEnabled } = useActionSheetDetents({
 			windowHeight,
-			bottomInset: bottom,
 			itemHeight,
 			optionsLength: data?.options?.length || 0,
 			snaps: effectiveSnaps,
@@ -118,7 +112,7 @@ const ActionSheet = memo(
 
 		const hasOptions = !!data?.options?.length;
 		const hasSnaps = !!effectiveSnaps?.length;
-		const disableContentPanning = data?.enableContentPanningGesture === false || (!scrollEnabled && isAndroid);
+		const disableContentPanning = data?.enableContentPanningGesture === false;
 		const isScrollable = hasOptions || (hasSnaps && !disableContentPanning);
 
 		const contentMinHeight =

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -41,7 +41,6 @@ const BottomSheetContent = memo(
 		const { bottom } = useSafeAreaInsets();
 		const { fontScale } = useWindowDimensions();
 		const height = 48 * fontScale;
-		const paddingBottom = isAndroid ? bottom + height : bottom;
 		const minHeightStyle = isAndroid || !contentMinHeight ? undefined : { minHeight: contentMinHeight };
 
 		const renderFooter = () =>
@@ -68,7 +67,7 @@ const BottomSheetContent = memo(
 					style={{ backgroundColor: colors.strokeExtraDark }}
 					keyboardDismissMode='interactive'
 					indicatorStyle='black'
-					contentContainerStyle={{ paddingBottom, backgroundColor: colors.surfaceLight }}
+					contentContainerStyle={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}
 					ItemSeparatorComponent={List.Separator}
 					ListHeaderComponent={List.Separator}
 					ListFooterComponent={renderFooter}

app/containers/ActionSheet/useActionSheetDetents.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-native';
 
-import { HANDLE_HEIGHT, useActionSheetDetents } from './useActionSheetDetents';
+import { useActionSheetDetents } from './useActionSheetDetents';
 
 describe('useActionSheetDetents', () => {
 	const windowHeight = 1000;
@@ -9,7 +9,6 @@ describe('useActionSheetDetents', () => {
 		const { result } = renderHook(() =>
 			useActionSheetDetents({
 				windowHeight,
-				bottomInset: 0,
 				itemHeight: 0,
 				optionsLength: 0,
 				snaps: [0.3, '80%', 2],
@@ -26,7 +25,6 @@ describe('useActionSheetDetents', () => {
 		const { result } = renderHook(() =>
 			useActionSheetDetents({
 				windowHeight,
-				bottomInset: 16,
 				itemHeight: 50,
 				optionsLength: 20,
 				snaps: undefined,
@@ -44,7 +42,6 @@ describe('useActionSheetDetents', () => {
 		const { result } = renderHook(() =>
 			useActionSheetDetents({
 				windowHeight,
-				bottomInset: 10,
 				itemHeight: 20,
 				optionsLength: 3,
 				snaps: undefined,
@@ -54,14 +51,13 @@ describe('useActionSheetDetents', () => {
 			})
 		);
 
-		expect(result.current.detents).toEqual([0.108]);
+		expect(result.current.detents).toEqual([0.098]);
 	});
 
 	it('computes detent from content height when there are no options', () => {
 		const { result } = renderHook(() =>
 			useActionSheetDetents({
 				windowHeight,
-				bottomInset: 50,
 				itemHeight: 0,
 				optionsLength: 0,
 				snaps: undefined,
@@ -71,14 +67,13 @@ describe('useActionSheetDetents', () => {
 			})
 		);
 
-		expect(result.current.detents).toEqual([(300 + 50 + HANDLE_HEIGHT) / windowHeight]);
+		expect(result.current.detents).toEqual([300 / windowHeight]);
 	});
 
 	it('falls back to minimum height when no content or options', () => {
 		const { result } = renderHook(() =>
 			useActionSheetDetents({
 				windowHeight,
-				bottomInset: 0,
 				itemHeight: 0,
 				optionsLength: 0,
 				snaps: undefined,

app/containers/ActionSheet/useActionSheetDetents.ts

@@ -24,7 +24,6 @@ function normalizeSnapsToDetents(snaps: (string | number)[]): number[] {
 
 type UseActionSheetDetentsParams = {
 	windowHeight: number;
-	bottomInset: number;
 	itemHeight: number;
 	optionsLength?: number;
 	snaps?: (string | number)[];
@@ -39,7 +38,6 @@ function heightToDetent(height: number, screenHeight: number): number {
 
 export function useActionSheetDetents({
 	windowHeight,
-	bottomInset,
 	itemHeight,
 	optionsLength = 0,
 	snaps,
@@ -48,17 +46,14 @@ export function useActionSheetDetents({
 	contentHeight
 }: UseActionSheetDetentsParams): { detents: SheetDetent[]; maxHeight: number; scrollEnabled: boolean } {
 	const { fontScale } = useWindowDimensions();
-	const CANCEL_HEIGHT = 48 * fontScale;
 
 	return useMemo(() => {
+		const CANCEL_HEIGHT = 48 * fontScale;
 		const maxHeight = windowHeight * ACTION_SHEET_MAX_HEIGHT_FRACTION;
 		const hasOptions = optionsLength > 0;
 
 		const maxSnap = hasOptions
-			? Math.min(
-					(itemHeight + 0.5) * optionsLength + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? CANCEL_HEIGHT : 0),
-					maxHeight
-			  )
+			? Math.min((itemHeight + 0.5) * optionsLength + HANDLE_HEIGHT + headerHeight + (hasCancel ? CANCEL_HEIGHT : 0), maxHeight)
 			: 0;
 
 		let detents: SheetDetent[];
@@ -71,14 +66,13 @@ export function useActionSheetDetents({
 				detents = [0.5, ACTION_SHEET_MAX_HEIGHT_FRACTION];
 				scrollEnabled = true;
 			} else {
-				const measuredHeight =
-					optionsLength * itemHeight + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? CANCEL_HEIGHT : 0);
+				const measuredHeight = optionsLength * itemHeight + HANDLE_HEIGHT + headerHeight + (hasCancel ? CANCEL_HEIGHT : 0);
 
 				scrollEnabled = false;
 				detents = [heightToDetent(Math.round(measuredHeight), windowHeight)];
 			}
 		} else if (contentHeight > 0) {
-			const rawContentDetent = (contentHeight + bottomInset + HANDLE_HEIGHT) / windowHeight;
+			const rawContentDetent = contentHeight / windowHeight;
 			const contentDetent = Math.min(
 				ACTION_SHEET_MAX_HEIGHT_FRACTION,
 				Math.max(ACTION_SHEET_MIN_HEIGHT_FRACTION, rawContentDetent)
@@ -90,5 +84,5 @@ export function useActionSheetDetents({
 		}
 
 		return { detents, maxHeight, scrollEnabled };
-	}, [bottomInset, contentHeight, hasCancel, headerHeight, itemHeight, optionsLength, snaps, windowHeight]);
+	}, [contentHeight, fontScale, hasCancel, headerHeight, itemHeight, optionsLength, snaps, windowHeight]);
 }

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -1,6 +1,5 @@
 import { memo, type ReactElement } from 'react';
 import { FlatList } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { type ICustomEmojis, type IEmoji } from '../../definitions/IEmoji';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
@@ -55,15 +54,14 @@ const EmojiCategory = ({
 	bottomSheet = false
 }: IEmojiCategoryProps): ReactElement | null => {
 	const items = useEmojis(category);
-	const { bottom } = useSafeAreaInsets();
 
 	if (!parentWidth) {
 		return null;
 	}
 
 	const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
 	const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
-	const contentPaddingBottom = bottomSheet ? Math.max(0, MIN_BOTTOM_SHEET_BREATHING_ROOM - bottom) : undefined;
+	const contentPaddingBottom = bottomSheet ? Math.max(0, MIN_BOTTOM_SHEET_BREATHING_ROOM) : undefined;
 
 	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
 

app/containers/FormContainer.tsx

@@ -1,6 +1,7 @@
 import { type ReactElement } from 'react';
 import { type ScrollViewProps, StyleSheet, View } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import sharedStyles from '../views/Styles';
 import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
@@ -17,7 +18,7 @@ interface IFormContainer extends ScrollViewProps {
 
 const styles = StyleSheet.create({
 	scrollView: {
-		minHeight: '100%'
+		flexGrow: 1
 	}
 });
 
@@ -27,19 +28,20 @@ export const FormContainerInner = ({
 }: {
 	children: (ReactElement | null)[];
 	accessibilityLabel?: string;
-}) => (
+}): ReactElement => (
 	<View accessibilityLabel={accessibilityLabel} style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
 		{children}
 	</View>
 );
 
-const FormContainer = ({ children, testID, showAppVersion = true, ...props }: IFormContainer) => {
+const FormContainer = ({ children, testID, showAppVersion = true, ...props }: IFormContainer): ReactElement => {
 	const { colors } = useTheme();
+	const { bottom } = useSafeAreaInsets();
 
 	return (
 		<KeyboardAwareScrollView
 			style={[sharedStyles.container, { backgroundColor: colors.surfaceRoom }]}
-			contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
+			contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView, { paddingBottom: Math.max(24, bottom) }]}
 			bottomOffset={20}
 			{...scrollPersistTaps}
 			{...props}>

app/containers/List/ListContainer.tsx

@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
 import { ScrollView, type ScrollViewProps, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 
@@ -13,12 +14,14 @@ interface IListContainer extends ScrollViewProps {
 	children: (ReactElement | null)[] | ReactElement | null;
 	testID?: string;
 }
-const ListContainer = ({ children, ...props }: IListContainer) => {
+const ListContainer = ({ children, contentContainerStyle, ...props }: IListContainer) => {
 	'use memo';
 
+	const { bottom } = useSafeAreaInsets();
+
 	return (
 		<ScrollView
-			contentContainerStyle={styles.container}
+			contentContainerStyle={[contentContainerStyle || styles.container, { paddingBottom: bottom }]}
 			scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
 			{...scrollPersistTaps}
 			{...props}>