react-native-formtastic
Advanced tools
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 ▶️
// 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;
Input Component (Light)
Input Component (Dark)
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;
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)")
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
/>
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
/>
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.ViewStyle and TextStyle: This change allows users to get style suggestions more easily. This applies to all components where style props were previously used.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 prop. When disabled is set to true, the datepicker will be non-interactive.FAQs
React Native Custom Form Elements
The npm package react-native-formtastic receives a total of 9 weekly downloads. As such, react-native-formtastic popularity was classified as not popular.
We found that react-native-formtastic demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.