react-native-formtastic

FormInput Component

The FormInput is a custom, reusable input component for React-Native applications. It supports both text input and date picker functionality. This component utilizes the TextInput component from React Native and the react-native-ui-datepicker for date picking functionality.

Usage

// If you are using js/jsx instead of ts/tsx, remove the types. (i.e.: <string>, :string, type declaration/s).
import { useState } from "react";
import { FormInput } from "react-native-formtastic";

const App = () => {
  const [name, setName] = useState<string>("");

  type Errors = {
    name?: string;
  };

  const [errors, setErrors] = useState<Errors>({
    name: "",
  });

  return (
    <FormInput
      placeholderText="Enter your name"
      labelText="Name"
      isRequired={true}
      characterLimit={20} // Limits The Number of Characters Users Can Type
      value={name}
      onTextChange={(text: string) => {
        setName(text);
      }}
      error={errors.name !== ""}
      errorText={errors.name}
      leftIcon="user"
      rightIcon="times-circle"
      rightIconColor={name ? colors.grey : colors.lightGrey}
      rightIconOnPress={() => {
        setName("");
      }}
    />
  );
};

export default App;

Reference Image

DatePicker Usage

// If you are using js/jsx instead of ts/tsx, remove the types. (i.e.: <string>, :string, type declaration/s).
import { useState } from "react";
import { FormInput } from "react-native-formtastic";

const App = () => {
  const [dateOfBirth, setDateOfBirth] = useState<Date>(new Date());
  const [dateOfBirthValue, setDateOfBirthValue] = useState<string>("");

  type Errors = {
    dateOfBirth?: string;
    dateOfBirthValue?: string;
  };

  const [errors, setErrors] = useState<Errors>({
    dateOfBirth: "",
    dateOfBirthValue: "",
  });

  const resetErrors = () => {
    let updatedErrors = {
      dateOfBirth: "",
      dateOfBirthValue: "",
    };
  };

  return (
    <FormInput
      labelText="Date of Birth"
      isRequired={true}
      error={errors.dateOfBirthValue !== ""}
      errorText={errors.dateOfBirthValue}
      leftIcon={"calendar"}
      datePicker={true} // Use This Prop to Enable The DatePicker
      datePickerWithTime={true} // Whether to Include Date With Time
      disableFutureDates={true} // Disable Selection of Future Dates
      datePlaceholder="Select Date of Birth"
      onDateChange={(date: Date) => {
        setDateOfBirth(date);
      }}
      sendDateValue={(dateValue) => {
        setDateOfBirthValue(dateValue);
      }}
    />
  );
};

export default App;

Reference Image (Date Picker)

• Input Component

  

• Date Picker Modal (datePickerMode: "single")

  

• Date Picker Modal (datePickerMode: "single", dateTimePicker)

  

• Date Picker Modal (datePickerMode: "range")

  

• Date Picker Modal (datePickerMode: "multiple")

  

Props

The component accepts the following props (Important & useful props are shown first and are in bold) [All props are optional]:

• value: Value of the input field.

  • Usage:

    <FormInput
      //.... Other Props
      value="Initial value"
      //... Other Props
    />
    

• onTextChange: Function to call when the text changes.

  • Usage:

    <FormInput
      //.... Other Props
      onTextChange={(text: string) => console.log(text)} // You get the changed text here
      //... Other Props
    />
    

• labelText: Text for the label.

  • Usage:

    <FormInput
      //.... Other Props
      labelText="Name"
      //... Other Props
    />
    

• isRequired: Boolean to mark the input as required.

  • Usage:

    <FormInput
      //.... Other Props
      isRequired={true}
      //... Other Props
    />
    

• inputType: Type of input (e.g., 'default', 'numeric', 'email-address').

  • Usage:

    <FormInput
      //.... Other Props
      inputType="numeric"
      //... Other Props
    />
    

• error: Boolean to indicate an error state.

  • Usage:

    <FormInput
      //.... Other Props
      error={false}
      //... Other Props
    />
    

• errorText: Text to display below input when there is an error.

  • Usage:

    <FormInput
      //.... Other Props
      errorText="Invalid input"
      //... Other Props
    />
    

• mainContainerStyle: Style object for the outermost main container.

  • Usage:

    <FormInput
      //.... Other Props
      mainContainerStyle={{ justifyContent: "center" }}
      //... Other Props
    />
    

• inputContainerStyle: Style object for the input container.

  • Usage:

    <FormInput
      //.... Other Props
      inputContainerStyle={{ justifyContent: "center" }}
      //... Other Props
    />
    

• placeholderText: Placeholder text for the input field.

  • Usage:

    <FormInput
      //.... Other Props
      placeholderText="Enter your name"
      //... Other Props
    />
    

• placeholderTextColor: Color of the placeholder text.

  • Usage:

    <FormInput
      //.... Other Props
      placeholderTextColor="black"
      //... Other Props
    />
    

• inputStyle: Style object for the input field.

  • Usage:

    <FormInput
      //.... Other Props
      inputStyle={{ borderWidth: 0 }}
      //... Other Props
    />
    

• inputTextColor: Color of the input text.

  • Usage:

    <FormInput
      //.... Other Props
      inputTextColor="white"
      //... Other Props
    />
    

• hideLabel: Boolean to hide the label.

  • Usage:

    <FormInput
      //.... Other Props
      hideLabel={true}
      //... Other Props
    />
    

• labelTextStyle: Style object for the label text.

  • Usage:

    <FormInput
      //.... Other Props
      labelTextStyle={{ fontSize: 12 }}
      //... Other Props
    />
    

• labelTextContainerStyle: Style object for the label text container.

  • Usage:

    <FormInput
      //.... Other Props
      labelTextContainerStyle={{ flexDirection: "column" }}
      //... Other Props
    />
    

• requiredText: Text to display instead of '*' when the input is required.

  • Usage:

    <FormInput
      //.... Other Props
      requiredText="This field is required!"
      //... Other Props
    />
    

• requiredTextStyle: Style object for the required text.

  • Usage:

    <FormInput
      //.... Other Props
      requiredTextStyle={{ fontSize: 5 }}
      //... Other Props
    />
    

• requiredTextColor: Color of the required text.

  • Usage:

    <FormInput
      //.... Other Props
      requiredTextColor="red"
      //... Other Props
    />
    

• labelTextColor: Color of the label text.

  • Usage:

    <FormInput
      //.... Other Props
      labelTextColor="blue"
      //... Other Props
    />
    

• textInputProps: Additional props for the TextInput component.

  • Usage:

    <FormInput
      //.... Other Props
      textInputProps={{ maxLength: 10 }}
      //... Other Props
    />
    

• labelTextProps: Additional props for the label text.

  • Usage:

    <FormInput
      //.... Other Props
      labelTextProps={{ numberOfLines: 1 }}
      //... Other Props
    />
    

• requiredTextProps: Additional props for the required text.

  • Usage:

    <FormInput
      //.... Other Props
      requiredTextProps={{ ellipsizeMode: "tail" }}
      //... Other Props
    />
    

• mainContainerViewProps: Additional props for the main container view.

  • Usage:

    <FormInput
      //.... Other Props
      mainContainerViewProps={{ accessibilityLabel: "main container" }}
      //... Other Props
    />
    

• inputContainerViewProps: Additional props for the text input container view.

  • Usage:

    <FormInput
      //.... Other Props
      inputContainerViewProps={{ accessibilityLabel: "input container" }}
      //... Other Props
    />
    

• labelTextContainerViewProps: Additional props for the label text container view.

  • Usage:

    <FormInput
      //.... Other Props
      labelTextContainerViewProps={{ accessibilityLabel: "label text container" }}
      //... Other Props
    />
    

• characterLimit: Maximum number of characters allowed in the input.

  • Usage:

    <FormInput
      //.... Other Props
      characterLimit={50}
      //... Other Props
    />
    

• showCharacterLimit: Boolean to show the character limit below input field.

  • Usage:

    <FormInput
      //.... Other Props
      showCharacterLimit={true}
      //... Other Props
    />
    

• autoCapitalize: How to auto capitalize the input (e.g., 'none', 'sentences', 'words', 'characters').

  • Usage:

    <FormInput
      //.... Other Props
      autoCapitalize="words"
      //... Other Props
    />
    

• errorTextStyle: Style object for the error text.

  • Usage:

    <FormInput
      //.... Other Props
      errorTextStyle={{ color: "red" }}
      //... Other Props
    />
    

• leftIcon: Name of the left icon (Icon used: react-native-vector-icons/FontAwesome).

  • Usage:

    <FormInput
      //.... Other Props
      leftIcon="home"
      //... Other Props
    />
    

• leftIconColor: Color of the left icon.

  • Usage:

    <FormInput
      //.... Other Props
      leftIconColor="blue"
      //... Other Props
    />
    

• leftIconStyle: Style object for the left icon.

  • Usage:

    <FormInput
      //.... Other Props
      leftIconStyle={{ size: 20 }}
      //... Other Props
    />
    

• leftIconContainerStyle: Style object for the left icon container.

  • Usage:

    <FormInput
      //.... Other Props
      leftIconContainerStyle={{ padding: 10 }}
      //... Other Props
    />
    

• renderLeftIcon: Function to render a custom left icon.

  • Usage:

    import Icon/Image/AnyComponent from 'npm-package or local directory'
    
    <FormInput
      //.... Other Props
      renderLeftIcon={() => <Icon/Image/AnyComponent name="home" />}
      //... Other Props
    />
    

• leftIconOnPress: Function to call when the left icon is pressed.

  • Usage:

    <FormInput
      //.... Other Props
      leftIconOnPress={() => console.log("Left icon pressed")}
      //... Other Props
    />
    

• rightIcon: Name of the right icon (Icon used: react-native-vector-icons/FontAwesome).

  • Usage:

    <FormInput
      //.... Other Props
      rightIcon="settings"
      //... Other Props
    />
    

• rightIconColor: Color of the right icon.

  • Usage:

    <FormInput
      //.... Other Props
      rightIconColor="green"
      //... Other Props
    />
    

• rightIconStyle: Style object for the right icon.

  • Usage:

    <FormInput
      //.... Other Props
      rightIconStyle={{ size: 20 }}
      //... Other Props
    />
    

• rightIconContainerStyle: Style object for the right icon container.

  • Usage:

    <FormInput
      //.... Other Props
      rightIconContainerStyle={{ padding: 10 }}
      //... Other Props
    />
    

• renderRightIcon: Function to render a custom right icon.

  • Usage:

    import Icon/Image/AnyComponent from 'npm-package or local directory'
    
    <FormInput
      //.... Other Props
      renderRightIcon={() => <Icon/Image/AnyComponent name="home" />}
      //... Other Props
    />
    

• rightIconOnPress: Function to call when the right icon is pressed.

  • Usage:

    <FormInput
      //.... Other Props
      rightIconOnPress={() => console.log("Right icon pressed")}
      //... Other Props
    />
    

• hiddenText: Boolean to hide the text input (for password fields).

  • Usage:

    <FormInput
      //.... Other Props
      hiddenText={true}
      //... Other Props
    />
    

• disabled: Boolean to disable the input field.

  • Usage:

    <FormInput
      //.... Other Props
      disabled={false}
      //... Other Props
    />
    

Date Picker Props

These are the date picker props (Important & useful props are shown first and are in bold) [All props are optional. For datepicker to work, you need to give the datepicker prop.]:

• datePicker: Boolean to enable the date picker functionality.

  • Usage:

    <FormInput
      //.... Other Props
      datePicker={true}
      //... Other Props
    />
    

• datePickerWithTime: Boolean to include time in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      datePickerWithTime={true}
      //... Other Props
    />
    

• datePickerMode: Mode of the date picker (e.g., 'single', 'range', 'multiple').

  • Usage:

    <FormInput
      //.... Other Props
      datePickerMode='multiple' // Default is single
      //... Other Props
    />
    

• initialDate: Initial date for the date picker. (For datePickeMode: single)

  • Usage:

    <FormInput
      //.... Other Props
      initialDate={new Date()}
      //... Other Props
    />
    

• initialRange: Initial date range for the date picker. (For datePickeMode: range)

  • Usage:

    // Example range of 1 day
    const initialStartDate = new Date();
    const initialEndDate = new Date(new Date().setDate(new Date().getDate() + 1));
    
    <FormInput
      //.... Other Props
      initialRange={startDate: initialStartDate, endDate: initialEndDate}
      //... Other Props
    />
    

• initialDates: Initial dates for the date picker. (For datePickeMode: multiple)

  • Usage:

    const date_1 = new Date();
    const date_2 = new Date(new Date().setDate(new Date().getDate() + 1));
    const date_3 = new Date(new Date().setDate(new Date().getDate() + 5));
    
    <FormInput
      //.... Other Props
      initialDates={[date_1, date_2, date_3]}
      //... Other Props
    />
    

• onDateChange: Function to call when the date changes. (For datePickeMode: single)

  • Usage:

    <FormInput
      //.... Other Props
      onDateChange={(date: Date) => console.log(date)} // You will get the Date Object in 'date' variable
      //... Other Props
    />
    

• sendDateValue: Function to call with the selected date value. (For datePickeMode: single)

  • Usage:

    <FormInput
      //.... Other Props
      sendDateValue={(dateValue) => console.log(dateValue)} // You will get date value as string in 'DD-MM-YYYY' format ('DD-MM-YYYY hh:mm:ss AM/PM' format for dateTimePicker) or any other format you specified in dateFormat prop
      //... Other Props
    />
    

• onDateRangeChange: Function to call when the date range changes. (For datePickeMode: range)

  • Usage:

    <FormInput
      //.... Other Props
      onDateRangeChange={({ startDate, endDate }) => {
                console.log('Start Date: ', startDate);
                console.log('End Date: ', endDate);
              }} // You will get the Date Objects in 'startDate' and 'endDate' variables
      //... Other Props
    />
    

• sendDateRangeValues: Function to call with the selected date range values. (For datePickeMode: range)

  • Usage:

    <FormInput
      //.... Other Props
      sendDateRangeValues={(startDate, endDate) => {
                console.log('Start Date: ', startDate);
                console.log('End Date: ', endDate);
              }} // You will get date values as strings in 'DD-MM-YYYY' format or any other format you specified in dateFormat prop
      //... Other Props
    />
    

• onDatesChange: Function to call when the dates change. (For datePickeMode: multiple)

  • Usage:

    <FormInput
      //.... Other Props
      onDatesChange={(dates) => console.log(dates);} // You will get the Date Objects as an array.
      //... Other Props
    />
    

• sendDatesValues: Function to call with the selected dates values. (For datePickeMode: multiple)

  • Usage:

    <FormInput
      //.... Other Props
      sendDatesValues={(dates) => {console.log(dates)} // You will get date values as array of strings in 'DD-MM-YYYY' format or any other format you specified in dateFormat prop
      //... Other Props
    />
    

• datePlaceholder: Placeholder text for the date picker. (If you don't give this prop, the selected date will show.)

  • Usage:

    <FormInput
      //.... Other Props
      datePlaceholder="Select Date of Birth"
      //... Other Props
    />
    

• disableFutureDates: Boolean to disable future dates in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      disableFutureDates={true}
      //... Other Props
    />
    

• disablePastDates: Boolean to disable past dates in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      disablePastDates={true}
      //... Other Props
    />
    

• datePickerBackgroundColor: Background color for the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      datePickerBackgroundColor="red"
      //... Other Props
    />
    

• showDatePickerCloseButton: Boolean to show the close button in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      showDatePickerCloseButton={true} // Default is false
      //... Other Props
    />
    

• datePickerCloseButtonColor: Color of the close button in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      datePickerCloseButtonColor="blue"
      //... Other Props
    />
    

• selectedItemColor: Color of the selected item in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      selectedItemColor="yellow"
      //... Other Props
    />
    

• selectedTextStyle: Style object for the selected text in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      selectedTextStyle={{fontWeight: '400'}}
      //... Other Props
    />
    

• firstDayOfWeek: First day of the week in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      firstDayOfWeek={0} // Set the first day of week as number. (i.e. 0 is Sunday, 1 is Monday,.. etc.). Default is 1 (Monday)
      //... Other Props
    />
    

• headerTextContainerStyle: Style object for the header text container in the date picker.

  • Usage:

    <FormInput
      //.... Other Props
      headerTextContainerStyle={{borderRadius: 5}}
      //... Other Props
    />
    

• datePickerAnimationType: Animation type for the date picker (e.g., 'zoomIn', 'slideUp', 'slideDown', slideLeft', 'slideRight', 'none').

  • Usage:

    <FormInput
      //.... Other Props
      datePickerAnimationType="slideDown" // Default is zoomIn
      //... Other Props
    />
    

• animationDuration: Custom animation duration for the transition of date picker modal.

  • Usage:

    <FormInput
      //.... Other Props
      animationDuration={300} // Default is 400 (400 ms)
      //... Other Props
    />
    

• hideDatePickerConfirmButton: Boolean to hide the date picker confirm button.

  • Usage:

    <FormInput
      //.... Other Props
      hideDatePickerConfirmButton={true} // Default is false
      //... Other Props
    />
    

• dateFormat: Custom format for the date / date range / dates.

  • Usage:

    <FormInput
      //.... Other Props
      dateFormat="DD/MM/YYYY" // Default is 'DD-MM-YYYY'
      //... Other Props
    />
    

• dateTimeFormat: Custom format for the date and time for single date if datePickerWithTime is selected.

  • Usage:

    <FormInput
      //.... Other Props
      dateTimeFormat="DD/MM/YYYY HH/MM/SS" // Default is 'DD-MM-YYYY hh:mm:ss AM/PM'
      //... Other Props
    />