Migration Guide (v1.x to v2.0)
Version 2.0 introduces a new props structure that groups related props together for better organization and TypeScript support. This guide will help you migrate from v1.x to v2.0.
Note: The flat props structure from v1.x is still supported for backward compatibility, but we recommend migrating to the new grouped approach for better developer experience.
Breaking Changes
The main change in v2.0 is the introduction of prop groups that organize related props together. Here's a comparison of the old and new approaches:
Before (v1.x):
tsx
import { FormInput } from '@react-native-utils/forminput';
const MyComponent = () => {
const [value, setValue] = useState('');
return (
<FormInput
labelText="Name"
placeholderText="Enter your name"
value={value}
onTextChange={(text) => setValue(text)}
leftIcon="user"
rightIcon="times-circle"
rightIconOnPress={() => setValue('')}
isRequired={true}
/>
);
};
After (v2.0):
tsx
import { FormInput } from '@react-native-utils/forminput';
const MyComponent = () => {
const [value, setValue] = useState('');
return (
<FormInput
text={{
labelText: "Name",
placeholderText: "Enter your name",
value: value,
}}
core={{
onTextChange: (text) => setValue(text),
}}
icon={{
leftIcon: "user",
rightIcon: "times-circle",
rightIconOnPress: () => setValue(''),
}}
style={{
isRequired: true,
}}
/>
);
};
Prop Groups Overview
Here's how the flat props map to the new grouped structure:
Prop Group | Contains Props Like |
---|---|
text | labelText, placeholderText, value, errorText |
style | isRequired, inputContainerStyle, labelStyle |
icon | leftIcon, rightIcon, leftIconColor, rightIconOnPress |
core | onTextChange, hasError, keyboardType |
datePicker | enabled, mode, format, onDateChange |
datePickerStyle | headerTextColor, selectedBackgroundColor |
componentProps | textInputProps, labelTextProps, requiredTextProps, mainContainerViewProps, inputContainerViewProps, labelTextContainerViewProps |
Migration Steps
- Update to the latest version:
npm install @react-native-utils/forminput@latest
- Group related props according to the table above
- Move each prop to its corresponding group
- Test your implementation to ensure everything works correctly
Additional Features in v2.0
Beyond the new prop structure, v2.0 also includes:
- Improved TypeScript support with more specific type definitions
- Better performance optimizations
- More consistent behavior across platforms
- Enhanced accessibility features
For a complete list of all available props in each group, check out the API Reference.