Icon Props

The icon prop group contains all properties related to the left and right icons that can be displayed within the input field. These icons can be used for visual cues or interactive elements like clear buttons or password toggles.

Note: React Native Forminput uses FontAwesome icons by default. Make sure you have installed and set up react-native-vector-icons in your project.

Properties

Prop	Type	Default	Description
leftIcon	string	undefined	Name of the left icon (Icon used: react-native-vector-icons/FontAwesome by default)
leftIconColor	string	#666666	Color of the left icon
leftIconStyle	StyleProp<TextStyle>	undefined	Style object for the left icon
leftIconContainerStyle	ViewStyle	undefined	Style object for the left icon container
renderLeftIcon	ReactNode	undefined	Function to render a custom left icon
leftIconSource	IconSourceType	'font-awesome'	Source of the left icon (e.g., FontAwesome, MaterialIcons, etc.)
leftIconSize	number	20	Size of the left icon
leftIconOnPress	() => void	undefined	Function to call when the left icon is pressed
rightIcon	string	undefined	Name of the right icon (Icon used: react-native-vector-icons/FontAwesome by default)
rightIconColor	string	#666666	Color of the right icon
rightIconStyle	StyleProp<TextStyle>	undefined	Style object for the right icon
rightIconContainerStyle	ViewStyle	undefined	Style object for the right icon container
renderRightIcon	ReactNode	undefined	Function to render a custom right icon
rightIconSource	IconSourceType	'font-awesome'	Source of the right icon (e.g., FontAwesome, MaterialIcons, etc.)
rightIconSize	number	20	Size of the right icon
rightIconOnPress	() => void	undefined	Function to call when the right icon is pressed
renderRightIcon	ReactNode	undefined	Function to render a custom right icon

Example

tsx

import { FormInput } from '@react-native-utils/forminput';
import { useState } from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const IconPropsExample = () => {
  const [email, setEmail] = useState('');
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
  const [password, setPassword] = useState('');
  
  const togglePasswordVisibility = () => setIsPasswordVisible(!isPasswordVisible);

  return (
    <>
      {/* Email input with clear button */}
      <FormInput
        text={{
          labelText: "Email Address",
          placeholderText: "Enter your email",
          value: email,
        }}
        icon={{
          leftIcon: "envelope",
          rightIcon: email ? "times-circle" : undefined,
          leftIconColor: "#3B82F6",
          rightIconColor: "#9CA3AF",
          rightIconOnPress: () => setEmail(''),
          leftIconSize: 20,
          rightIconSize: 22,
          leftIconSource: "font-awesome",
          rightIconSource: "font-awesome",
          leftIconContainerStyle: {
            paddingRight: 8
          }
        }}
        core={{
          onTextChange: setEmail,
          inputType: "email-address",
        }}
      />
      
      {/* Password input with toggle visibility */}
      <FormInput
        text={{
          labelText: "Password",
          placeholderText: "Enter your password",
          value: password,
        }}
        icon={{
          leftIcon: "lock",
          rightIcon: isPasswordVisible ? "eye-slash" : "eye",
          leftIconColor: "#3B82F6",
          rightIconOnPress: togglePasswordVisibility,
          // Example of a custom icon rendering
          renderLeftIcon: <Icon name="lock-outline" size={24} color="#3B82F6" />
        }}
        core={{
          onTextChange: setPassword,
          hiddenText: !isPasswordVisible,
        }}
      />
    </>
  );
};

Notes

Icons can be made interactive by providing an onPress handler
Use the renderLeftIcon and renderRightIcon props to provide your own icon components
Common use cases include:
- Clear buttons (to reset input value)
- Password visibility toggles
- Search icons
- Currency or unit indicators
Icons are properly positioned within the input and respond to the input's focus state

Getting Started

API Reference

Examples

Icon Props

Properties

Example

Notes