Getting Started

API Reference

Examples

Style Props

The style prop group contains all properties related to visual styling, including colors, dimensions, and custom style objects for each part of the component.

Properties

PropTypeDefaultDescription
mainContainerStyleViewStyleundefinedStyle object for the outermost main container
inputContainerStyleViewStyleundefinedStyle object for the input container
inputContainerBackgroundColorstringtransparentColor of the input container background
inputStyleTextStyle | ViewStyleundefinedStyle object for the input field
labelTextStyleTextStyleundefinedStyle object for the label text
labelTextContainerStyleViewStyleundefinedStyle object for the label text container
isRequiredbooleanfalseBoolean to mark the input as required
requiredTextStyleTextStyleundefinedStyle object for the required text
requiredTextColorstringredColor of the required text
errorTextStyleTextStyleundefinedStyle object for the error text

Example

tsx
import { FormInput } from '@react-native-utils/forminput';

const StylePropsExample = () => (
  <FormInput
    text={{
      labelText: "Username",
      placeholderText: "Enter your username",
    }}
    style={{
      isRequired: true,
      mainContainerStyle: {
        marginBottom: 16
      },
      inputContainerStyle: {
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#CBD5E1',
      },
      inputContainerBackgroundColor: '#F8FAFC',
      inputStyle: {
        fontSize: 16,
      },
      labelTextStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#334155',
        marginBottom: 8,
      },
      labelTextContainerStyle: {
        marginBottom: 4
      },
      requiredTextStyle: {
        fontWeight: 'bold',
      },
      requiredTextColor: '#F43F5E',
      errorTextStyle: {
        fontSize: 14,
        fontStyle: 'italic',
      }
    }}
  />
);

Notes

  • Style objects follow React Native's StyleSheet API
  • Style props are broken down by component section for precise styling control
  • For multiline inputs, set multiline: true in the core props group and provide numberOfLines if needed
  • Error styling is automatically applied when the error prop (in the core group) is set to true