Core Props

The core prop group contains essential functionality properties that control the behavior of the input component, including event handlers, keyboard configurations, and validation states.

Properties

Prop	Type	Default	Description
inputType	InputTypeOptions	'default'	Type of input keyboard (e.g., 'default', 'numeric', 'email-address', etc.)
autoCapitalize	CapitalizeOptions	'sentences'	How to auto capitalize the input ('none', 'sentences', 'words', 'characters')
onTextChange	(text: string) => void	undefined	Function to call when the text changes
error	boolean	false	Boolean to indicate an error state
hiddenText	boolean	false	Boolean to hide the text input (for password fields)
disabled	boolean	false	Boolean to disable the input field and the datepicker functionality
theme	ThemeOptions	'system'	String to specify the theme of the input field and the datepicker. Options are 'light', 'dark', or 'system' (to automatically match the device's theme)
multiline	boolean	false	Boolean to enable multiline input
numberOfLines	number	1	Number of lines for multiline input

Example

tsx

import { FormInput } from '@react-native-utils/forminput';
import { useState, useRef } from 'react';
import { View, Button } from 'react-native';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [emailError, setEmailError] = useState(false);
  const passwordRef = useRef(null);
  
  const validateEmail = (text) => {
    const isValid = /\S+@\S+\.\S+/.test(text);
    setEmailError(!isValid && text.length > 0);
    setEmail(text);
  };
  
  const handleSubmit = () => {
    // Handle form submission
    console.log('Form submitted with:', { email, password });
  };

  return (
    <View style={{ padding: 16, gap: 16 }}>
      <FormInput
        text={{
          labelText: "Email Address",
          placeholderText: "Enter your email",
          value: email,
          errorText: "Please enter a valid email address",
        }}
        icon={{
          leftIcon: "envelope",
        }}
        core={{
          onTextChange: validateEmail,
          inputType: "email-address",
          autoCapitalize: "none",
          error: emailError,
        }}
      />
      
      <FormInput
        text={{
          labelText: "Password",
          placeholderText: "Enter your password",
          value: password,
        }}
        icon={{
          leftIcon: "lock",
        }}
        core={{
          onTextChange: setPassword,
          hiddenText: true,
        }}
        componentProps={{
          textInputProps: {
            ref: passwordRef
          }
        }}
      />
      
      <Button title="Login" onPress={handleSubmit} />
    </View>
  );
};

Notes

The onTextChange prop is required and is called whenever the input text changes
Use keyboardType to optimize the keyboard for different types of input:
- default - Standard keyboard
- numeric - Number pad
- email-address - Email keyboard with @ and .com keys
- phone-pad - Phone number pad
- decimal-pad - Decimal pad with numbers and decimal point
Error handling is done by setting hasError to true, which will display the errorText specified in the text prop group
To create a smooth form experience with multiple inputs, use returnKeyType, onSubmitEditing, and refs to manage focus flow

Getting Started

API Reference

Examples

Core Props

Properties

Example

Notes