fix: fix issues related to web support

Author: ElenaBitire

src/app/(app)/_layout.tsx

@@ -67,8 +67,8 @@ export default function TabLayout() {
 const CreateNewPostLink = () => {
   return (
     <Link href="/feed/add-post" asChild>
-      <Pressable className="px-3">
-        <Text className="text-primary-300">Create</Text>
+      <Pressable>
+        <Text className="px-3 text-primary-300">Create</Text>
       </Pressable>
     </Link>
   );

src/components/card.tsx

@@ -17,20 +17,22 @@ const images = [
 export const Card = ({ title, body, id }: Props) => {
   return (
     <Link href={`/feed/${id}`} asChild>
-      <Pressable className="m-2 overflow-hidden rounded-xl  border border-neutral-300 bg-white  dark:bg-neutral-900">
-        <Image
-          className="h-56 w-full overflow-hidden rounded-t-xl"
-          contentFit="cover"
-          source={{
-            uri: images[Math.floor(Math.random() * images.length)],
-          }}
-        />
+      <Pressable>
+        <View className="m-2 overflow-hidden rounded-xl  border border-neutral-300 bg-white  dark:bg-neutral-900">
+          <Image
+            className="h-56 w-full overflow-hidden rounded-t-xl"
+            contentFit="cover"
+            source={{
+              uri: images[Math.floor(Math.random() * images.length)],
+            }}
+          />
 
-        <View className="p-2">
-          <Text className="py-3 text-2xl ">{title}</Text>
-          <Text numberOfLines={3} className="leading-snug text-gray-600">
-            {body}
-          </Text>
+          <View className="p-2">
+            <Text className="py-3 text-2xl ">{title}</Text>
+            <Text numberOfLines={3} className="leading-snug text-gray-600">
+              {body}
+            </Text>
+          </View>
         </View>
       </Pressable>
     </Link>

src/ui/input.tsx

@@ -132,7 +132,7 @@ export function ControlledInput<T extends FieldValues>(
       ref={field.ref}
       autoCapitalize="none"
       onChangeText={field.onChange}
-      value={field.value as string}
+      value={(field.value as string) || ''}
       {...inputProps}
       error={fieldState.error?.message}
     />

src/ui/select.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable max-lines-per-function */
-import type { BottomSheetModal } from '@gorhom/bottom-sheet';
-import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
+import { type BottomSheetModal } from '@gorhom/bottom-sheet';
 import { useColorScheme } from 'nativewind';
 import * as React from 'react';
 import type { FieldValues } from 'react-hook-form';
@@ -15,6 +14,7 @@ import colors from '@/ui/colors';
 import { CaretDown } from '@/ui/icons';
 
 import type { InputControllerType } from './input';
+import { List } from './list';
 import { useModal } from './modal';
 import { Modal } from './modal';
 import { Text } from './text';
@@ -94,11 +94,12 @@ export const Options = React.forwardRef<BottomSheetModal, OptionsProps>(
           backgroundColor: isDark ? colors.charcoal[800] : colors.white,
         }}
       >
-        <BottomSheetFlatList
+        <List
           data={options}
           keyExtractor={keyExtractor}
           renderItem={renderSelectItem}
           testID={testID ? `${testID}-modal` : undefined}
+          estimatedItemSize={52}
         />
       </Modal>
     );