React-native-ui-kitten: Input does not detect press around the edges.

[renanBritz]

🐛 Bug Report

The Input component has a lot of space which does not detect a press event. This is really annoying especially because we don't have granular control of where our finger presses at the screen, and the Input component doesn't feel "Native" because of this issue. Image below should make it very clear:

To Reproduce

Steps to reproduce the behavior:
Try pressing around the edges of the Input. Focusing on the input may be difficult.

Expected behavior

Pressing anywhere on the Input should be detected.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.0.0 |
| @ui-kitten/components | 5.0.0 |

Environment information

 System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
  Binaries:
    Node: 12.7.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 

[matulef]

I noticed this too. Ideally, the touchable area would automatically adjust for small, medium, and large inputs. As a workaround, you can set the hitSlop prop on the Input component to something like {top: 15, bottom: 15} and it will feel more natural.

[renanBritz]

@matulef That helps, but the area at the side of the input still does not detect.

As a workaround I have created a wrapper component like this:

import React, { useRef } from 'react';
import { TouchableWithoutFeedback, View } from 'react-native';
import { Input as KittenInput } from '@ui-kitten/components';

function Input(props) {
  const inputRef = useRef();
  return (
    <TouchableWithoutFeedback onPress={() => inputRef.current.focus()}>
      <View>
        <KittenInput ref={inputRef} {...props} />
      </View>
    </TouchableWithoutFeedback>
  );
}

export default Input;

[manuelmhtr]

Thanks for the solution @renanBritz it works great.
I hope this problem is fixed soon, it's quite annoying.

[artyorsh]

Duplicates #1206