fix: use entire input box as touch area for focus

src/components/Input.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
-import { Platform, TextInputProps } from 'react-native';
+import { Platform, TextInput, TextInputProps } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import useDefaultStyles from './Colors';
 import { Gap } from './Utility';
@@ -8,7 +8,7 @@ export interface InputProps extends TextInputProps {
     icon?: React.ReactNode
 }
 
-const Container = styled.View`
+const Container = styled.Pressable`
     margin: 6px 0;
     border-radius: 8px;
     display: flex;
@@ -28,16 +28,19 @@ const InputWrapper = styled.TextInput`
 
 function Input({ icon = null, style, ...rest }: InputProps) {
     const defaultStyles = useDefaultStyles();
+    const inputRef = useRef<TextInput | null>(null);
+
+    const handlePress = useCallback(() => inputRef.current?.focus(), []);
 
     return (
-        <Container style={[defaultStyles.input, style]}>
+        <Container style={[defaultStyles.input, style]} onPress={handlePress}>
             {icon && (
                 <>
                     {icon}
                     <Gap size={8} />
                 </>
             )}
-            <InputWrapper {...rest} />
+            <InputWrapper {...rest} ref={inputRef} />
         </Container>
     );
 }