react-native-formtastic

v1.8.1

Published

13 days ago

React Native Custom Form Elements

Downloads

226

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.

▶️ View Live on Expo Snack ▶️

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>("");

  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);
      }}
      leftIcon="user"
      rightIcon="times-circle"
      rightIconColor={name ? colors.grey : colors.lightGrey}
      rightIconOnPress={() => {
        setName("");
      }}
    />
  );
};

export default App;

Reference Image

Input Component (Light)
Input Component (Dark)

DatePicker Usage

datePickerMode="single" (default mode)

// 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>("");

  return (
    <FormInput
      labelText="Date of Birth"
      isRequired={true}
      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;

datePickerMode="range"

// 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 = () => {
  type DateRange = {
    startDate: Date;
    endDate: Date;
  };

  const [checkInOutDateRange, setCheckInOutDateRange] = useState<DateRange>({
    startDate: new Date(),
    endDate: new Date(),
  });

  type DateRangeValues = {
    startDate: string;
    endDate: string;
  };

  const [checkInOutDateRangeValue, setCheckInOutDateRangeValue] =
    useState<DateRangeValues>({
      startDate: "",
      endDate: "",
    });

  return (
    <FormInput
      labelText="Check In & Check Out Dates"
      isRequired={true}
      leftIcon={"calendar"}
      datePicker={true} // Use This Prop to Enable The DatePicker
      disablePastDates={true} // Disable Selection of Past Dates
      datePlaceholder="Select Check In & Check Out Dates"
      datePickerMode="range" // Required
      onDateRangeChange={({ startDate, endDate }) => {
        if (startDate && endDate) {
          setCheckInOutDateRange({
            startDate: startDate,
            endDate: endDate,
          });
        }
      }}
      sendDateRangeValues={(startDate, endDate) => {
        if (startDate && endDate) {
          setCheckInOutDateRangeValue({
            startDate: startDate,
            endDate: endDate,
          });
        }
      }}
    />
  );
};

export default App;

datePickerMode="multiple"

// 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 [meetingDates, setMeetingDates] = useState<Date[]>([]);
  const [meetingDatesValue, setMeetingDatesValue] = useState<string[]>([]);

  return (
    <FormInput
      labelText="Meeting Dates"
      isRequired={true}
      leftIcon={"calendar"}
      datePicker={true} // Use This Prop to Enable The DatePicker
      disablePastDates={true} // Disable Selection of Past Dates
      datePlaceholder="Select Meeting Dates"
      datePickerMode="multiple" // Required
      onDatesChange={(dates) => {
        if (dates) {
          setMeetingDates(dates);
        }
      }}
      sendDatesValues={(dates) => {
        if (dates) {
          setMeetingDatesValue(dates);
        }
      }}
    />
  );
};

export default App;

Reference Image (Date Picker)

Input Component (Light)
Input Component (Dark)
Date Picker Modal (datePickerMode: "single (Light)")
Date Picker Modal (datePickerMode: "single (Dark)")
Date Picker Modal (datePickerMode: "single(Light)", dateTimePicker)
Date Picker Modal (datePickerMode: "single (Dark)", dateTimePicker)
Date Picker Modal (datePickerMode: "range (Light)")
Date Picker Modal (datePickerMode: "range (Dark)")
Date Picker Modal (datePickerMode: "multiple (Light)")
Date Picker Modal (datePickerMode: "multiple (Dark)")

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
/>

inputContainerBackgroundColor: Color of the input container background.

Usage:

<FormInput
  //.... Other Props
  inputContainerBackgroundColor="transparent"
  //... 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 and the datepicker functionality (if datepickerMode is set to true).
- Usage:
```
<FormInput
  //.... Other Props
  disabled={true}
  //... Other Props
/>
```
theme: 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).
- Usage:
```
<FormInput
  //.... Other Props
  theme="dark" // Default is system
  //... 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. It will only work in datePickerMode="single".
- 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
/>

Changelog

[1.8.1] - 2024-09-11

Fixed minor styling issue.

[1.8.0] - 2024-09-11

Updated code to be compatible with Latest React Native Version.

[1.7.0] - 2024-07-15

Changed

Updated visual style of the component.

Added

theme prop: Introduced a new theme prop that allows users to set the theme of the component. The available options are light, dark, and system. The system option automatically matches the theme of the device.

[1.6.0] - 2024-06-17

Changed

Updated GIT Repository
Updated various style props to ViewStyle and TextStyle: This change allows users to get style suggestions more easily. This applies to all components where style props were previously used.

[1.5.0] - 2024-06-13

Added

inputContainerBackgroundColor prop: This new prop allows you to customize the background color of the input container. You can pass any valid color string as the value.
Disabled functionality for the datepicker: The datepicker can now be disabled, preventing user interaction. This can be controlled via the disabled prop. When disabled is set to true, the datepicker will be non-interactive.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

FormInput Component

Usage

Reference Image

DatePicker Usage

Reference Image (Date Picker)

Props

Date Picker Props

Changelog

[1.8.1] - 2024-09-11

[1.8.0] - 2024-09-11

[1.7.0] - 2024-07-15

Changed

Added

[1.6.0] - 2024-06-17

Changed

[1.5.0] - 2024-06-13

Added