🐛 Fix keyboard covering input in add server sheet

Author: aaronleopold

apps/expo/app/(tabs)/index.tsx

@@ -38,7 +38,7 @@ export default function Screen() {
 
 			if (defaultServer) {
 				router.push({
-					pathname: defaultServer.kind === 'stump' ? '/server/[id]' : '/opds/[id]',
+					pathname: defaultServer.kind === 'stump' ? '/server/[id]/(tabs)/index' : '/opds/[id]',
 					params: { id: defaultServer.id },
 				})
 			}

apps/expo/app/opds/[id]/index.tsx

@@ -15,7 +15,7 @@ import {
 	OPDSPublicationGroup,
 } from '~/components/opds'
 import RefreshControl from '~/components/RefreshControl'
-import { Heading, icons } from '~/components/ui'
+import { icons } from '~/components/ui'
 import { useDynamicHeader } from '~/lib/hooks/useDynamicHeader'
 
 const { ChevronLeft } = icons

apps/expo/components/savedServer/AddOrEditServerForm.tsx

@@ -21,7 +21,7 @@ import { cn } from '~/lib/utils'
 import { usePreferencesStore, useSavedServers } from '~/stores'
 import { SavedServerWithConfig } from '~/stores/savedServer'
 
-import { Button, Heading, Input, Label, Switch, Tabs, Text } from '../ui'
+import { BottomSheet, Button, Heading, Label, Switch, Tabs, Text } from '../ui'
 
 type Props = {
 	editingServer?: SavedServerWithConfig | null
@@ -126,10 +126,10 @@ export default function AddOrEditServerForm({ editingServer, onSubmit, onClose }
 					<Controller
 						control={control}
 						render={({ field: { onChange, onBlur, value } }) => (
-							<Input
-								label="Username"
+							<BottomSheet.Input
 								autoCorrect={false}
 								autoCapitalize="none"
+								label="Username"
 								placeholder="oromei"
 								onBlur={onBlur}
 								onChangeText={onChange}
@@ -143,7 +143,7 @@ export default function AddOrEditServerForm({ editingServer, onSubmit, onClose }
 					<Controller
 						control={control}
 						render={({ field: { onChange, onBlur, value } }) => (
-							<Input
+							<BottomSheet.Input
 								label="Password"
 								autoCorrect={false}
 								autoCapitalize="none"
@@ -164,7 +164,7 @@ export default function AddOrEditServerForm({ editingServer, onSubmit, onClose }
 				<Controller
 					control={control}
 					render={({ field: { onChange, onBlur, value } }) => (
-						<Input
+						<BottomSheet.Input
 							label="Token"
 							autoCorrect={false}
 							autoCapitalize="none"
@@ -291,7 +291,7 @@ export default function AddOrEditServerForm({ editingServer, onSubmit, onClose }
 					required: true,
 				}}
 				render={({ field: { onChange, onBlur, value } }) => (
-					<Input
+					<BottomSheet.Input
 						label="Name"
 						autoCorrect={false}
 						autoCapitalize="none"
@@ -311,7 +311,7 @@ export default function AddOrEditServerForm({ editingServer, onSubmit, onClose }
 					required: true,
 				}}
 				render={({ field: { onChange, onBlur, value } }) => (
-					<Input
+					<BottomSheet.Input
 						label={kind === 'stump' ? 'URL' : 'Catalog URL'}
 						autoCorrect={false}
 						autoCapitalize="none"

apps/expo/components/ui/bottom-sheet/index.tsx

@@ -4,11 +4,17 @@ import BottomSheet, {
 	BottomSheetModal as BSModal,
 	BottomSheetModalProvider,
 	BottomSheetScrollView as BSScrollView,
+	BottomSheetTextInput as BSTextInput,
 	BottomSheetView as BSView,
 } from '@gorhom/bottom-sheet'
+import { BottomSheetTextInputProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetTextInput'
 import { cssInterop } from 'nativewind'
 import React, { forwardRef, Fragment } from 'react'
+import { View } from 'react-native'
 
+import { cn } from '~/lib/utils'
+
+import { Text } from '../text'
 import { BottomSheetProps, BSHandleProps } from './types'
 
 const BottomSheetTrigger = Fragment
@@ -38,13 +44,46 @@ const BottomSheetScrollView = cssInterop(BSScrollView, {
 
 const BottomSheetHandle: React.FC<BSHandleProps> = BSHandle
 
+const BottomSheetTextInput = forwardRef<
+	React.ComponentRef<typeof BSTextInput>,
+	BottomSheetTextInputProps & { label?: string; errorMessage?: string }
+>(({ label, errorMessage, ...rest }, ref) => {
+	const InputComponent = cssInterop(BSTextInput, {
+		className: 'style',
+	})
+
+	return (
+		<View className="w-full gap-1.5">
+			{label && <Text className="text-base font-medium text-foreground-muted">{label}</Text>}
+			<InputComponent
+				ref={ref}
+				{...rest}
+				className={cn(
+					'native:h-12 native:text-lg native:leading-[1.25] h-10 rounded-lg border border-edge bg-background px-3 text-base text-foreground file:border-0 file:bg-transparent file:font-medium lg:text-sm',
+					rest.editable === false && 'opacity-50',
+					{ 'border-edge-danger': !!errorMessage },
+					rest.className,
+				)}
+				placeholderClassName={cn(
+					'text-foreground-muted',
+					{ 'text-fill-danger': !!errorMessage },
+					rest.placeholderClassName,
+				)}
+			/>
+			{errorMessage && <Text className="text-sm text-fill-danger">{errorMessage}</Text>}
+		</View>
+	)
+})
+BottomSheetTextInput.displayName = 'BottomSheetTextInput'
+
 type TypedBottomSheet = typeof BottomSheet & {
 	Provider: typeof BottomSheetModalProvider
 	Modal: typeof BottomSheetModal
 	Handle: typeof BottomSheetHandle
 	ScrollView: typeof BottomSheetScrollView
 	View: typeof BottomSheetView
 	Trigger: typeof BottomSheetTrigger
+	Input: typeof BottomSheetTextInput
 }
 
 const TypedBottomSheet = BottomSheet as TypedBottomSheet
@@ -54,5 +93,6 @@ TypedBottomSheet.Handle = BottomSheetHandle
 TypedBottomSheet.ScrollView = BottomSheetScrollView
 TypedBottomSheet.View = BottomSheetView
 TypedBottomSheet.Trigger = BottomSheetTrigger
+TypedBottomSheet.Input = BottomSheetTextInput
 
 export { TypedBottomSheet as BottomSheet }

apps/expo/components/ui/input/input.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { TextInput, type TextInputProps, View } from 'react-native'
 
-import { cn } from '~/lib/utils'
-
 import { Text } from '../text'
 import { RawInput } from './raw-input'