Input
Use the Input component to get user input.
Props
onFocus
This is a callback that is called when the input is focused.
| Type | Default | Description |
|---|---|---|
(e) => void | / | The onFocus from React Native Text Input component. |
Example
onBlur
This is a callback that is called when the input is blurred.
| Type | Default | Description |
|---|---|---|
(e) => void | / | The onBlur from React Native Text Input component. |
Example
placeholder
Use this to set a placeholder text.
| Type | Default | Description |
|---|---|---|
string | / | The placeholder prop is used to display temporary text within an input component, providing a hint or example of the expected input from the user. When the input is empty, the placeholder text is visible, and it disappears once the user starts typing. |
Example
icon
Use this to set an icon.
| Type | Default | Description |
|---|---|---|
ReactNode | / | We are using the MaterialIcons component from react-native-vector-icons package. |
Example
isDisabled
When this is set to true, the input will be disabled. This is commonly used to indicate that the input is not currently available for user input or interaction.
| Type | Default | Description |
|---|---|---|
boolean | / | This will set the additional styles for the input to indicate that the input is disabled, but also it will prevent the user from interacting with the input by setting the editable prop to false on the TextInput component. |
Example
isInvalid
When this is set to true, the input will be in invalid state.
| Type | Default | Description |
|---|---|---|
boolean | / | This will set the additional styles for the input to indicate that the input is in an invalid state. |
Example
...rest
Use this to spread the rest of the props to the TextInput element.
| Type | Default | Description |
|---|---|---|
TextInputProps | / | If you need more control over the TextInput element inside the Input, you can use any prop from TextInput this way. |
Example
Static
variant
Use this to set the variant of the input. It can be 'underline' or 'outline'. If 'underline' is selected it's better to set 'rounded' to '0' since they will not be visible on device properly. Alternatively, you can set manually 'borderLeftWidth' and 'borderRightWidth' as well and set them transparent color (via 'borderLeftColor' and 'borderRightColor' properties)
rounded
Use this to set the input radius.
border
Use this to set the border width.
borderColor
Use this to set the border color.
borderStyle
Use this to set the border style.
h
Use this to set the height of the input.
pl
Use this to set the padding left of the input.
pr
Use this to set the padding right of the input.
placeholderTextColor
Use this to set the placeholder text color. The color of the text is different from the color of the placeholder text (you can see the difference if you type something in the input).
textSize
Use this to set the font size of both the input and the placeholder text.
textColor
Use this to set the text color of the input. The color of the placeholder text is different from the color of the text (you can see the difference if you clear the input text).
iconPosition
Use this to set the icon position. Available options are 'left' and 'right'. Visible only if icon prop is enabled.
iconGap
Use this to set the gap between the icon and the text. Visible only if icon prop is enabled.
iconSize
Use this to set the icon size. Visible only if icon prop is enabled.
iconColor
Use this to set the icon color. Visible only if icon prop is enabled.
disabledColor
Use this to set the disabled state color. Visible only if isDisabled prop is enabled and active.
focusColor
Use this to set the focus state color. Click on the input to see the focus color.
invalidColor
Use this to set the invalid state color. Visible only if isInvalid prop is enabled and active.
bg
Use this to set the background color of the input. The default is #ffffff (white).
Tips
Icon (not clickable)
The icon is currently non-clickable. If you wish to replace the icon with a clickable element, such as for implementing a "show password" functionality, and you find that your button isn't clickable, take note that the inputIconWrapper element has pointerEvents='none' set. You'll need to remove this setting to enable click functionality.
Editor
import React, {useState} from 'react';
import {View, TextInput} from 'react-native';
const UIInput = ({
icon,
isDisabled,
isInvalid,
onFocus,
onBlur,
...rest
}) => {
const [isFocus, setIsFocus] = useState(false);
const iconSize = 24;
const iconGap = 12;
const styles = {
input: {
flexDirection: 'row',
alignItems: 'center',
height: 46,
overflow: 'hidden',
},
inputField: {
minWidth: 0,
width: '100%',
height: '100%',
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#a8bac1',
paddingLeft: 16,
paddingRight: 16 + (icon ? iconSize + iconGap : 0),
fontSize: 16,
borderRadius: 8,
backgroundColor: '#ffffff',
color: '#1c1c1c',
},
inputFieldIsInvalid: {
borderColor: '#e15240',
},
inputFieldIsFocus: {
borderColor: '#169f94',
},
inputFieldIsDisabled: {
backgroundColor: '#edf4f8',
},
inputIconWrapper: {
position: 'absolute',
top: 0,
right: 16,
bottom: 0,
width: iconSize,
height: null,
justifyContent: 'center',
},
inputIcon: {
fontSize: iconSize,
height: iconSize,
color: '#829aa3',
},
inputIconIsInvalid: {
color: '#e15240',
},
inputIconIsFocus: {
color: '#169f94',
},
};
return (
<View style={styles.input}>
<TextInput
style={[
styles.inputField,
isInvalid && styles.inputFieldIsInvalid,
isFocus && styles.inputFieldIsFocus,
isDisabled && styles.inputFieldIsDisabled,
]}
underlineColorAndroid="transparent"
placeholderTextColor="#829aa3"
onFocus={(e) => {
setIsFocus(true);
onFocus?.(e);
}}
onBlur={(e) => {
setIsFocus(false);
onBlur?.(e);
}}
editable={!isDisabled}
{...rest}
/>
{icon ? (
<View style={styles.inputIconWrapper} pointerEvents="none">
{React.cloneElement(icon, {style: [styles.inputIcon, isInvalid && styles.inputIconIsInvalid, isFocus && styles.inputIconIsFocus, icon?.props?.style], pointerEvents: 'none'})}
</View>
) : null}
</View>
);
};
export default UIInput;
<UIInput
icon={<MaterialIcons name="mail" />}
placeholder="Enter your Email"
/>