The Input component is a customizable text input field designed for use in React Native applications. It supports various features such as icons, error handling, and animated styles, making it a versatile choice for user input.

​
Usage

To use the Input component, import it into your file and include it in your JSX. You can customize it with various props to fit your design needs.

import Input from '@/components/common/input';
const MyComponent = () => {
    return (
        <Input
            leftIcon={<MyLeftIcon />}
            rightIcon={<MyRightIcon />}
            placeholder="Enter text"
            error="This field is required"
            onFocus={() => console.log('Input focused')}
            onBlur={() => console.log('Input blurred')}
        />
    );
};

​
Props

The Input component accepts the following props:

PropTypeDescription
leftIconReact.ReactNodeAn optional icon to display on the left side of the input.
rightIconReact.ReactNodeAn optional icon to display on the right side of the input.
errorstringAn optional error message to display below the input.
containerStyleViewStyleCustom styles for the container of the input.
inputStyleViewStyleCustom styles for the text input itself.
leftIconStyleViewStyleCustom styles for the left icon.
rightIconStyleViewStyleCustom styles for the right icon.
fontSizenumberThe font size of the input text. Defaults to FONT_SIZE.md.
fontFamilystringThe font family of the input text.
heightnumberThe height of the input field. Defaults to INPUT_HEIGHT.md.
borderColorstringThe color of the input border.
borderWidthnumberThe width of the input border. Defaults to BORDER_WIDTH.sm.
borderRadiusnumberThe border radius of the input. Defaults to BORDER_RADIUS.sm.
placeholderTextColorstringThe color of the placeholder text.
selectionColorstringThe color of the text selection.
cursorColorstringThe color of the text cursor.
...restPropsTextInputPropsAny additional props that can be passed to the underlying TextInput component.

​
Example

Here’s a complete example of how to use the Input component with various props:

import React from 'react';
import Input from '@/components/common/input';
const Example = () => {
    return (
        <Input
            leftIcon={<MyLeftIcon />}       
            rightIcon={<MyRightIcon />}
            placeholder="Type here..."
            error="Invalid input"
            fontSize={16}
            borderColor="#000"
            onFocus={() => console.log('Focused')}  
            onBlur={() => console.log('Blurred')}
        />
    );
};
export default Example;

Was this page helpful?

SearchbarForm Field