Merge pull request #24 from RonasIT/PRD-2110-Android-layout-fix

veliseev93 · web-flow · commit d58daf50a04b · 2025-12-29T14:57:32.000+06:00
PRD-2110: Edge-to-edge, 3-button-navigation bar bottom paddings fix
diff --git a/apps/mobile/app/(main)/chat/[id].tsx b/apps/mobile/app/(main)/chat/[id].tsx
@@ -10,6 +10,7 @@ import {
   AppText,
   Icon,
   FullScreenSearchModal,
+  AppKeyboardControllerView,
 } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
 import { ChatScreenParams, useInitialNavigation } from '@open-webui-react-native/mobile/shared/utils/navigation';
 import { modelsApi } from '@open-webui-react-native/shared/data-access/api';
@@ -48,34 +49,36 @@ export default function ChatScreen(): ReactElement {
   );
 
   return (
-    <AppScreen
-      className={cn(isOfflineMode && 'pt-20')}
-      noOutsideSpacing
-      header={
-        <AppHeader
-          title={
-            modelId || isLoading ? (
-              <FullScreenSearchModal
-                data={models || []}
-                renderTrigger={renderTrigger}
-                selectedItemId={modelId}
-                onSelectItem={onSelectModel}
-                searchPlaceholder={translate('TEXT_SELECT_A_MODEL')}
-              />
-            ) : (
-              translate('TEXT_LOADING')
-            )
-          }
-          onGoBack={handleGoBackPress}
-        />
-      }
-      scrollDisabled>
-      <NoConnectionBanner isVisible={isOfflineMode} />
-      <Chat
-        chatId={id}
-        isNewChat={!!isNewChat}
-        selectedModelId={modelId}
-        resetToChatsList={handleResetToChatsList} />
-    </AppScreen>
+    <AppKeyboardControllerView className='bg-background-primary'>
+      <AppScreen
+        className={cn(isOfflineMode && 'pt-20')}
+        noOutsideSpacing
+        header={
+          <AppHeader
+            title={
+              modelId || isLoading ? (
+                <FullScreenSearchModal
+                  data={models || []}
+                  renderTrigger={renderTrigger}
+                  selectedItemId={modelId}
+                  onSelectItem={onSelectModel}
+                  searchPlaceholder={translate('TEXT_SELECT_A_MODEL')}
+                />
+              ) : (
+                translate('TEXT_LOADING')
+              )
+            }
+            onGoBack={handleGoBackPress}
+          />
+        }
+        scrollDisabled>
+        <NoConnectionBanner isVisible={isOfflineMode} />
+        <Chat
+          chatId={id}
+          isNewChat={!!isNewChat}
+          selectedModelId={modelId}
+          resetToChatsList={handleResetToChatsList} />
+      </AppScreen>
+    </AppKeyboardControllerView>
   );
 }
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
@@ -73,7 +73,7 @@ function App(): ReactElement | null {
 
   return (
     <View className='bg-background-primary flex-1'>
-      <StatusBar className='bg-background-primary' />
+      <StatusBar className='bg-background-primary' translucent />
       <Stack>
         <Stack.Screen name='index' options={{ headerShown: false, contentStyle: { backgroundColor: 'transparent' } }} />
         <Stack.Screen name={navigationConfig.auth.root} options={{ headerShown: false }} />
diff --git a/libs/mobile/chat/features/archived-chats-list/src/lib/component.tsx b/libs/mobile/chat/features/archived-chats-list/src/lib/component.tsx
@@ -17,6 +17,7 @@ import {
   PressableSearchInput,
   View,
 } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+import { useBottomInset } from '@open-webui-react-native/mobile/shared/utils/use-bottom-inset';
 import { chatApi, ChatListItem } from '@open-webui-react-native/shared/data-access/api';
 import { formatDateTime } from '@open-webui-react-native/shared/utils/date';
 import { ArchivedChatsActionsSheet } from './components';
@@ -33,6 +34,7 @@ export function ArchivedChatsList({
   onSearchPress,
 }: ArchivedChatsListProps): ReactElement {
   const translate = useTranslation('CHAT.ARCHIVED_CHATS_LIST');
+  const bottomInset = useBottomInset();
 
   const { filters, selectedFilter, handleFilterPress, resetFilter } = useSearchFilters();
 
@@ -110,7 +112,7 @@ export function ArchivedChatsList({
               ListEmptyComponent={
                 <ListEmptyComponent containerClassName='mt-16' description={translate('TEXT_NO_CHATS')} />
               }
-              contentContainerClassName='pb-safe android:pb-16'
+              contentContainerStyle={{ paddingBottom: bottomInset }}
             />
           )}
         </View>
diff --git a/libs/mobile/chat/features/chat/src/lib/component.tsx b/libs/mobile/chat/features/chat/src/lib/component.tsx
@@ -1,8 +1,9 @@
 import { useSelector } from '@legendapp/state/react';
+import { useKeyboard } from '@react-native-community/hooks';
 import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
 import dayjs from 'dayjs';
 import { delay } from 'lodash-es';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { Fragment, ReactElement, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { InteractionManager } from 'react-native';
 import { EditMessageInput } from '@open-webui-react-native/mobile/chat/features/edit-message-input';
@@ -11,8 +12,9 @@ import { useEditMessage } from '@open-webui-react-native/mobile/chat/features/us
 import { useSendMessage } from '@open-webui-react-native/mobile/chat/features/use-send-message';
 import { useAttachedFiles } from '@open-webui-react-native/mobile/shared/features/use-attached-files';
 import { cn } from '@open-webui-react-native/mobile/shared/ui/styles';
-import { AppKeyboardControllerView, AppSpinner, View } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+import { AppSpinner, View } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
 import { FormValues } from '@open-webui-react-native/mobile/shared/utils/form';
+import { useBottomInset } from '@open-webui-react-native/mobile/shared/utils/use-bottom-inset';
 import { chatApi, ChatGenerationOption, chatQueriesKeys } from '@open-webui-react-native/shared/data-access/api';
 import { Role } from '@open-webui-react-native/shared/data-access/common';
 import { useSubscribeToQueryCache } from '@open-webui-react-native/shared/data-access/query-client';
@@ -32,6 +34,8 @@ interface ChatProps {
 
 export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: ChatProps): ReactElement {
   const translate = useTranslation('CHAT.CHAT');
+  const bottomInset = useBottomInset();
+  const { keyboardShown } = useKeyboard();
 
   const [isInputFocusing, setIsInputFocusing] = useState(false); //NOTE: Needs to avoid ChatBottomButton jumping when auto-scrolling after focus
 
@@ -126,7 +130,7 @@ export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: C
   }, [isNewChat, isSuccess, chatId]);
 
   return (
-    <AppKeyboardControllerView>
+    <Fragment>
       {shouldHideContent && (
         <View className='absolute w-full h-full z-50 bg-background-primary items-center justify-center'>
           <AppSpinner />
@@ -148,7 +152,9 @@ export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: C
           />
         </React.Suspense>
       )}
-      <View className={cn('pb-safe android:pb-16 pt-8 px-16', shouldHideContent && 'opacity-0')}>
+      <View
+        style={!keyboardShown && { paddingBottom: bottomInset }}
+        className={cn('pt-8 px-16', shouldHideContent && 'opacity-0')}>
         {editingMessageId ? (
           <EditMessageInput
             control={editMessageControl}
@@ -179,6 +185,6 @@ export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: C
           />
         )}
       </View>
-    </AppKeyboardControllerView>
+    </Fragment>
   );
 }
diff --git a/libs/mobile/chat/features/menu-list/src/lib/component.tsx b/libs/mobile/chat/features/menu-list/src/lib/component.tsx
@@ -13,6 +13,7 @@ import {
   PressableSearchInput,
   View,
 } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+import { useBottomInset } from '@open-webui-react-native/mobile/shared/utils/use-bottom-inset';
 import { chatApi, ChatListItem, FolderListItem, foldersApi } from '@open-webui-react-native/shared/data-access/api';
 import { formatDateTime } from '@open-webui-react-native/shared/utils/date';
 import { FeatureID, isFeatureEnabled } from '@open-webui-react-native/shared/utils/feature-flag';
@@ -37,6 +38,7 @@ export function ChatMenuList({
 }: ChatMenuListProps): ReactElement {
   const translate = useTranslation('CHAT.CHAT_MENU_LIST');
   const chatActionsSheetRef = useRef<ChatActionsMenuSheetMethods>(null);
+  const bottomInset = useBottomInset();
 
   const [isFirstLoading, setIsFirstLoading] = useState<boolean>(true);
 
@@ -119,7 +121,8 @@ export function ChatMenuList({
             />
           }
           ListFooterComponent={isFetchingNextPage ? <AppSpinner /> : null}
-          contentContainerClassName='mt-12 pb-safe android:pb-24'
+          contentContainerClassName='mt-12'
+          contentContainerStyle={{ paddingBottom: bottomInset }}
           showsVerticalScrollIndicator={false}
         />
       )}
diff --git a/libs/mobile/chat/features/search-archived-chats/src/lib/component.tsx b/libs/mobile/chat/features/search-archived-chats/src/lib/component.tsx
@@ -17,6 +17,7 @@ import {
   SearchInput,
   View,
 } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+import { useBottomInset } from '@open-webui-react-native/mobile/shared/utils/use-bottom-inset';
 import { chatApi, ChatListItem } from '@open-webui-react-native/shared/data-access/api';
 import { formatDateTime } from '@open-webui-react-native/shared/utils/date';
 import { useDebouncedQuery } from '@open-webui-react-native/shared/utils/use-debounced-query';
@@ -28,6 +29,7 @@ interface SearchArchivedChatsProps {
 
 export function SearchArchivedChats({ onArchivedChatPress, onGoBack }: SearchArchivedChatsProps): ReactElement {
   const translate = useTranslation('CHAT.ARCHIVED_CHATS_LIST');
+  const bottomInset = useBottomInset();
 
   const { filters, selectedFilter, handleFilterPress } = useSearchFilters();
 
@@ -85,7 +87,7 @@ export function SearchArchivedChats({ onArchivedChatPress, onGoBack }: SearchArc
                 {isLoading ? <AppSpinner /> : <ListEmptyComponent description={translate('TEXT_NO_CHATS')} />}
               </View>
             }
-            contentContainerClassName='pb-safe android:pb-16'
+            contentContainerStyle={{ paddingBottom: bottomInset }}
           />
         </AnimatedView>
       )}
diff --git a/libs/mobile/shared/ui/ui-kit/src/bottom-sheet/component.tsx b/libs/mobile/shared/ui/ui-kit/src/bottom-sheet/component.tsx
@@ -28,6 +28,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SetOptional } from 'type-fest';
 import { cn, screenHeight } from '@open-webui-react-native/mobile/shared/ui/styles';
 import { uiState$ } from '@open-webui-react-native/mobile/shared/ui/ui-state';
+import { useBottomInset } from '@open-webui-react-native/mobile/shared/utils/use-bottom-inset';
 import { View } from '../view';
 
 type NativeWindProps = {
@@ -94,7 +95,8 @@ export function AppBottomSheet({
   ...restProps
 }: AppBottomSheetPropsType): ReactElement {
   const { top } = useSafeAreaInsets();
-  const { keyboardHeight, keyboardShown } = useKeyboard();
+  const bottomInset = useBottomInset();
+  const { keyboardShown } = useKeyboard();
   const elementRef = useRef<BottomSheetModal>(null);
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 
@@ -132,9 +134,7 @@ export function AppBottomSheet({
     <View className='flex-1 px-content-offset pt-content-offset'>{content}</View>
   ) : (
     <BottomSheetView>
-      <View
-        className='px-content-offset pt-content-offset pb-safe android:pb-16'
-        style={keyboardShown && !withoutKeyboardExtraPadding ? { paddingBottom: keyboardHeight } : undefined}>
+      <View className='px-content-offset pt-content-offset' style={{ paddingBottom: bottomInset }}>
         {content}
       </View>
     </BottomSheetView>
diff --git a/libs/mobile/shared/ui/ui-kit/src/full-screen-search-modal/component.tsx b/libs/mobile/shared/ui/ui-kit/src/full-screen-search-modal/component.tsx
@@ -13,6 +13,7 @@ import React, {
 } from 'react';
 import { InteractionManager } from 'react-native';
 import { FadeIn } from 'react-native-reanimated';
+import { useBottomInset } from '@open-webui-react-native/mobile/shared/utils/use-bottom-inset';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { MockFolderItemIds } from '@open-webui-react-native/shared/data-access/api';
 import { useDebouncedQuery } from '@open-webui-react-native/shared/utils/use-debounced-query';
@@ -53,6 +54,7 @@ export function FullScreenSearchModal<Item extends FullScreenSearchListItem>({
   ref,
 }: FullScreenSearchModalProps<Item>): ReactElement {
   const listRef = useRef<React.ComponentRef<typeof FlashList<Item>>>(null);
+  const bottomInset = useBottomInset();
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isAnimationCompleted, setIsAnimationCompleted] = useState<boolean>(false);
@@ -153,7 +155,8 @@ export function FullScreenSearchModal<Item extends FullScreenSearchListItem>({
                 <AppFlashList
                   ref={listRef as Ref<React.ComponentRef<typeof FlashList<Item>>>}
                   extraData={query}
-                  contentContainerClassName='pt-24 pb-safe android:pb-16'
+                  contentContainerClassName='pt-24'
+                  contentContainerStyle={{ paddingBottom: bottomInset }}
                   showsVerticalScrollIndicator={false}
                   keyboardShouldPersistTaps='handled'
                   renderItem={renderItem}
diff --git a/libs/mobile/shared/ui/ui-kit/src/keyboard-controller-view/component.tsx b/libs/mobile/shared/ui/ui-kit/src/keyboard-controller-view/component.tsx
@@ -22,8 +22,8 @@ export function AppKeyboardControllerView({
 }: AppKeyboardControllerViewProps): ReactElement {
   const { top } = useSafeAreaInsets();
   const verticalOffset = Platform.select({
-    ios: isInBottomSheet ? top : top + 8,
-    android: isInBottomSheet ? 85 : 32,
+    ios: isInBottomSheet ? top : 16,
+    android: isInBottomSheet ? 85 : 16,
   });
 
   return (
diff --git a/libs/mobile/shared/utils/use-bottom-inset/.babelrc b/libs/mobile/shared/utils/use-bottom-inset/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/mobile/shared/utils/use-bottom-inset/README.md b/libs/mobile/shared/utils/use-bottom-inset/README.md
@@ -0,0 +1,7 @@
+# mobile/shared/utils/use-bottom-inset
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test mobile/shared/utils/use-bottom-inset` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/mobile/shared/utils/use-bottom-inset/eslint.config.cjs b/libs/mobile/shared/utils/use-bottom-inset/eslint.config.cjs
@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/libs/mobile/shared/utils/use-bottom-inset/project.json b/libs/mobile/shared/utils/use-bottom-inset/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "mobile/shared/utils/use-bottom-inset",
+  "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/mobile/shared/utils/use-bottom-inset/src",
+  "projectType": "library",
+  "tags": ["app:mobile", "scope:shared", "type:utils"],
+  "// targets": "to see all targets run: nx show project mobile/shared/utils/use-bottom-inset --web",
+  "targets": {}
+}
diff --git a/libs/mobile/shared/utils/use-bottom-inset/src/index.ts b/libs/mobile/shared/utils/use-bottom-inset/src/index.ts
@@ -0,0 +1 @@
+export * from './use-bottom-inset';
diff --git a/libs/mobile/shared/utils/use-bottom-inset/src/use-bottom-inset.ts b/libs/mobile/shared/utils/use-bottom-inset/src/use-bottom-inset.ts
@@ -0,0 +1,13 @@
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export function useBottomInset(minPadding = 24): number {
+  const { bottom } = useSafeAreaInsets();
+  const visualPadding = 16;
+
+  if (Platform.OS === 'android') {
+    return Math.max(bottom, minPadding) + visualPadding;
+  }
+
+  return bottom;
+}
diff --git a/libs/mobile/shared/utils/use-bottom-inset/tsconfig.json b/libs/mobile/shared/utils/use-bottom-inset/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../../../tsconfig.base.json"
+}
diff --git a/libs/mobile/shared/utils/use-bottom-inset/tsconfig.lib.json b/libs/mobile/shared/utils/use-bottom-inset/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../../dist/out-tsc",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -208,6 +208,9 @@
       "@open-webui-react-native/mobile/shared/utils/compressor": ["libs/mobile/shared/utils/compressor/src/index.ts"],
       "@open-webui-react-native/mobile/shared/utils/form": ["libs/mobile/shared/utils/form/src/index.ts"],
       "@open-webui-react-native/mobile/shared/utils/navigation": ["libs/mobile/shared/utils/navigation/src/index.ts"],
+      "@open-webui-react-native/mobile/shared/utils/use-bottom-inset": [
+        "libs/mobile/shared/utils/use-bottom-inset/src/index.ts"
+      ],
       "@open-webui-react-native/mobile/shared/utils/validation": ["libs/mobile/shared/utils/validation/src/index.ts"],
       "@open-webui-react-native/shared/data-access/api": ["libs/shared/data-access/api/src/index.ts"],
       "@open-webui-react-native/shared/data-access/api-client": ["libs/shared/data-access/api-client/src/index.ts"],
