Description
I wanted to create an Input component with a specif appearance, but the pressable area of the input is smaller than expected. I can't press the button, but if I press the textArea, the it works (more details bellow)
Steps to reproduce the behaviour:
The first screenshot here is supposed to be the Input usable (we can see a bit of padding inside it)

The actual pressable Area can be seen in the second Screenshot. For now, there's no way to customize this part.

Here's the code of the component (the attributes here match the ones of ForwardRef in the React Native Inspector) :
import React from 'react';
import { Input as MagnusInput } from 'react-native-magnus';
const Input = React.forwardRef(({ ...otherProps }, ref) => {
return (
<MagnusInput
ref={ref}
pl={20}
focusBorderColor="blue700"
bg="gray100"
rounded="circle"
fontSize={18}
fontWeight="400"
h={57}
w="100%"
borderWidth={0}
{...otherProps}
/>
);
});
export default Input;
Important Details
- OS: Android and iOS (not matter the version)
Description
I wanted to create an Input component with a specif appearance, but the pressable area of the input is smaller than expected. I can't press the button, but if I press the textArea, the it works (more details bellow)
Steps to reproduce the behaviour:
The first screenshot here is supposed to be the Input usable (we can see a bit of padding inside it)
The actual pressable Area can be seen in the second Screenshot. For now, there's no way to customize this part.
Here's the code of the component (the attributes here match the ones of
ForwardRefin the React Native Inspector) :Important Details