Getting Started

API Reference

Examples

Basic Usage

React Native Forminput provides a versatile input component that can be used for text inputs and date pickers. Here are some basic examples to help you get started.

Text Input Example

This example shows how to use FormInput for text fields with various configurations:

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

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  return (
    <View style={{ padding: 16, gap: 12 }}>
      {/* Basic text input */}
      <FormInput
        text={{
          labelText: "Full Name",
          placeholderText: "Enter your full name",
          value: name,
        }}
        style={{
          isRequired: true,
        }}
        core={{
          onTextChange: (text) => setName(text),
        }}
      />

      {/* With left and right icons */}
      <FormInput
        text={{
          labelText: "Email Address",
          placeholderText: "Enter your email",
          value: email,
        }}
        style={{
          isRequired: true,
        }}
        icon={{
          leftIcon: "envelope",
          rightIcon: "times-circle",
          rightIconColor: email ? "#999" : "#CCC",
          rightIconOnPress: () => setEmail("")
        }}
        core={{
          onTextChange: (text) => setEmail(text),
          inputType: "email-address",
        }}
      />

      {/* With validation */}
      <FormInput
        text={{
          labelText: "Phone Number",
          placeholderText: "Enter your phone number",
          value: phone,
          errorText: "Please enter a valid phone number",
        }}
        icon={{
          leftIcon: "phone",
        }}
        core={{
          onTextChange: (text) => setPhone(text),
          inputType: "phone-pad",
          error: phone.length > 0 && !/^[0-9]{10}$/.test(phone),
        }}
      />
    </View>
  );
};

export default MyForm;

Date Picker Example

FormInput can also function as a date picker by setting the datePicker.enabled prop to true:

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

const DatePickerExample = () => {
  const [birthdate, setBirthdate] = useState<Date | undefined>(undefined);

  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Date of Birth",
          placeholderText: "Select your date of birth",
        }}
        icon={{
          leftIcon: "calendar",
        }}
        datePicker={{
          enabled: true,
          initialDate: birthdate,
          mode: "single",
          dateFormat: "MMMM d, yyyy",
          onDateChange: (date) => setBirthdate(date),
          disableFutureDates: false,
          disablePastDates: false,
          styles: {
            headerTextContainerStyle: { backgroundColor: "#3B82F6" },
            selectedTextStyle: { color: "#3B82F6" },
            selectedContainerStyle: { backgroundColor: "#EFF6FF" },
          }
        }}
      />
    </View>
  );
};

export default DatePickerExample;

Important Notes

  • FormInput uses a grouped props structure in v2.0+ that organizes related props together (text, style, icon, etc.)
  • The onTextChange callback (in the core group) is triggered whenever the text input value changes
  • For date pickers, the onDateChange callback (in the datePicker group) is triggered when a date is selected
  • Error handling is controlled via the error prop (in the core group) and errorText (in the text group)

For a complete list of available props, check out the API Reference.