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.

Getting Started

API Reference