fix: disable ScreenWrapper scroll when isKeyboardAvoiding is true, custom bottom offset added

Author: tfomkin

apps/mobile/app/(main)/chat/create.tsx

@@ -47,7 +47,7 @@ export default function CreateChatScreen(): ReactElement {
         header: <AppHeader title={translate('TEXT_NEW_CHAT')} onGoBack={handleBackPress} />,
       }}
       safeAreaProps={{ edges: [] }}
-      keyBoardAvoidingProps={{ enabled: !isBottomSheetInputFocused }}>
+      keyBoardAvoidingProps={{ enabled: !isBottomSheetInputFocused, bottomOffset: 60 }}>
       <NoConnectionBanner isVisible={isOfflineMode} />
       <CreateChat
         onChatCreated={handleChatCreated}

libs/mobile/shared/ui/keyboard-avoiding-view/src/lib/component.tsx

@@ -1,23 +1,24 @@
 import { ComponentType } from 'react';
 import { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
-import { commonStyle } from '@open-webui-react-native/mobile/shared/ui/styles';
 
 export type AppKeyboardAvoidingViewProps = Omit<ScrollViewProps, 'onFocus'> & {
   onFocus?: ((event: any) => void) | null;
   contentContainerStyleKeyboardShown?: StyleProp<ViewStyle>;
   enabled?: boolean;
+  bottomOffset?: number;
 };
 
 // TODO: Research how use nativewind here
 export const AppKeyboardAvoidingView: ComponentType<AppKeyboardAvoidingViewProps> = ({ children, ...props }) => {
-  const { onFocus, ...restProps } = props;
+  const { onFocus, contentContainerStyle, bottomOffset, ...restProps } = props;
 
   return (
     <KeyboardAwareScrollView
       keyboardShouldPersistTaps='handled'
       showsVerticalScrollIndicator={false}
-      contentContainerStyle={commonStyle.fullFlex}
+      contentContainerStyle={[{ flexGrow: 1 }, contentContainerStyle]}
+      bottomOffset={bottomOffset}
       onFocus={onFocus ?? undefined}
       {...restProps}>
       {children}

libs/mobile/shared/ui/screen-wrapper/src/lib/component.tsx

@@ -25,13 +25,20 @@ export function ScreenWrapper({
   isKeyboardAvoiding,
   keyBoardAvoidingProps,
 }: PropsWithChildren<ScreenWrapperProps>): ReactElement {
-  const { header, ...restScreenProps } = screenProps || {};
+  const { header, scrollDisabled, ...restScreenProps } = screenProps || {};
+
+  const effectiveScrollDisabled = isKeyboardAvoiding ? true : scrollDisabled;
+
   const content = isKeyboardAvoiding ? (
     <AppKeyboardAvoidingView {...keyBoardAvoidingProps}>
-      <AppScreen {...restScreenProps}>{children}</AppScreen>
+      <AppScreen scrollDisabled={effectiveScrollDisabled as boolean} {...(restScreenProps as AppScreenProps)}>
+        {children}
+      </AppScreen>
     </AppKeyboardAvoidingView>
   ) : (
-    <AppScreen {...restScreenProps}>{children}</AppScreen>
+    <AppScreen scrollDisabled={scrollDisabled as boolean} {...(restScreenProps as AppScreenProps)}>
+      {children}
+    </AppScreen>
   );
 
   return (