Merge pull request #72 from RonasIT/PRD-2490-fix-bottom-sheet-keyboard-input

fix: fix bottom sheet keyboard input

Author: veliseev93

libs/mobile/shared/ui/ui-kit/src/action-buttons-modal/component.tsx

@@ -2,13 +2,11 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
 import { delay } from 'lodash-es';
 import { ForwardedRef, ReactElement, useImperativeHandle, useRef, useState } from 'react';
-import { TextInput } from 'react-native';
-import { AppKeyboardAvoidingView } from '@open-webui-react-native/mobile/shared/ui/keyboard-avoiding-view';
 import { ToastService } from '@open-webui-react-native/shared/utils/toast-service';
 import { AppBottomSheet } from '../bottom-sheet';
 import { AppButton } from '../button';
 import { AppText } from '../text';
-import { AppTextInput } from '../text-input';
+import { AppBottomSheetTextInput, AppBottomSheetTextInputRef } from '../text-input';
 import { View } from '../view';
 
 export type ActionButtonsModalMethods = {
@@ -39,7 +37,7 @@ export function ActionButtonsModal({
 }: ActionButtonsModalProps): ReactElement {
   const translate = useTranslation('SHARED.ACTION_BUTTONS_MODAL');
   const modalRef = useRef<BottomSheetModal>(null);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<AppBottomSheetTextInputRef>(null);
 
   const [value, setValue] = useState('');
 
@@ -74,40 +72,36 @@ export function ActionButtonsModal({
       onOpen={() => inputRef.current?.focus()}
       withoutKeyboardExtraPadding
       content={
-        <AppKeyboardAvoidingView
-          scrollEnabled={isScrollable}
-          contentContainerStyleKeyboardShown={{ paddingBottom: 16 }}>
-          <View className='gap-12 pt-20 pb-safe android:pb-24'>
-            <AppText className='text-h3-sm sm:text-h3 font-medium mb-4' numberOfLines={1}>
-              {title}
-            </AppText>
-            {description &&
-              (typeof description === 'string' ? (
-                <AppText className='text-text-secondary'>{description}</AppText>
-              ) : (
-                description
-              ))}
-            {withInput && <AppTextInput
-              ref={inputRef}
-              value={value}
-              onChangeText={setValue} />}
-            <View className='flex-row gap-8'>
-              <AppButton
-                variant='outline'
-                text={translate('BUTTON_CANCEL')}
-                onPress={closeModal}
-                disabled={isConfirming}
-                className='flex-1'
-              />
-              <AppButton
-                text={translate('BUTTON_CONFIRM')}
-                onPress={handleConfirm}
-                isLoading={isConfirming}
-                className='flex-1'
-              />
-            </View>
+        <View className='gap-12 pt-20 pb-safe android:pb-24'>
+          <AppText className='text-h3-sm sm:text-h3 font-medium mb-4' numberOfLines={1}>
+            {title}
+          </AppText>
+          {description &&
+            (typeof description === 'string' ? (
+              <AppText className='text-text-secondary'>{description}</AppText>
+            ) : (
+              description
+            ))}
+          {withInput && <AppBottomSheetTextInput
+            ref={inputRef}
+            value={value}
+            onChangeText={setValue} />}
+          <View className='flex-row gap-8'>
+            <AppButton
+              variant='outline'
+              text={translate('BUTTON_CANCEL')}
+              onPress={closeModal}
+              disabled={isConfirming}
+              className='flex-1'
+            />
+            <AppButton
+              text={translate('BUTTON_CONFIRM')}
+              onPress={handleConfirm}
+              isLoading={isConfirming}
+              className='flex-1'
+            />
           </View>
-        </AppKeyboardAvoidingView>
+        </View>
       }
     />
   );

libs/mobile/shared/ui/ui-kit/src/text-input/component.tsx

@@ -1,4 +1,5 @@
-import { ReactElement, Ref } from 'react';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { ComponentRef, ReactElement, Ref } from 'react';
 import { Platform, TextInput, TextInputProps, View } from 'react-native';
 import { cn, colors } from '@open-webui-react-native/mobile/shared/ui/styles';
 
@@ -53,3 +54,45 @@ export const AppTextInput = ({
     </View>
   );
 };
+
+export type AppBottomSheetTextInputRef = ComponentRef<typeof BottomSheetTextInput>;
+
+export type AppBottomSheetInputProps = Omit<AppInputProps, 'ref'> & {
+  ref?: Ref<AppBottomSheetTextInputRef>;
+};
+
+export const AppBottomSheetTextInput = ({
+  onFocus,
+  onBlur,
+  label,
+  accessoryLeft,
+  accessoryBottom,
+  accessoryTop,
+  maxHeight = 0,
+  className,
+  textClassName,
+  hitSlop,
+  ref,
+  ...inputProps
+}: AppBottomSheetInputProps): ReactElement => {
+  const isIos = Platform.OS === 'ios';
+
+  return (
+    <View className={cn(baseClasses.containerClasses, className)}>
+      {accessoryTop}
+      <View className={`flex-row gap-12 items-center max-h-[${maxHeight}]`}>
+        {accessoryLeft}
+        <BottomSheetTextInput
+          ref={ref}
+          className={cn(baseClasses.textClasses, isIos && '!leading-[0]', textClassName)}
+          placeholderTextColor={colors.textSecondary}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          hitSlop={typeof hitSlop === 'number' ? hitSlop : { top: 12, bottom: 12, ...hitSlop }}
+          {...inputProps}
+        />
+      </View>
+      {accessoryBottom}
+    </View>
+  );
+};