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 thecore
group) is triggered whenever the text input value changes - For date pickers, the
onDateChange
callback (in thedatePicker
group) is triggered when a date is selected - Error handling is controlled via the
error
prop (in thecore
group) anderrorText
(in thetext
group)
For a complete list of available props, check out the API Reference.