Component Props

The componentProps prop group allows you to pass props directly to the underlying React Native components used by FormInput. This provides an escape hatch for advanced customization and access to native component features not directly exposed by FormInput's API.

Properties

Prop	Type	Default	Description
textInputProps	TextInputProps	undefined	Additional props for the TextInput component
labelTextProps	TextProps	undefined	Additional props for the label text
requiredTextProps	TextProps	undefined	Additional props for the required text
mainContainerViewProps	ViewProps	undefined	Additional props for the main container view
inputContainerViewProps	ViewProps	undefined	Additional props for the text input container view
labelTextContainerViewProps	ViewProps	undefined	Additional props for the label text container view

Example

tsx

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

const ComponentPropsExample = () => {
  const inputRef = useRef(null);
  
  return (
    <FormInput
      text={{
        labelText: "Email",
        placeholderText: "Enter your email",
      }}
      componentProps={{
        // Pass a ref to access the underlying TextInput
        textInputProps: {
          ref: inputRef,
          autoComplete: "email",
          inputMode: "email",
          onKeyPress: ({ nativeEvent }) => {
            console.log('Key pressed:', nativeEvent.key);
          },
          // Accessibility props for the text input itself
          accessibilityLabel: "Email input field",
          accessibilityHint: "Enter your email address",
        },
        // Add specific styling or event handlers to the label text
        labelTextProps: {
          numberOfLines: 1,
          onPress: () => inputRef.current?.focus(),
          accessibilityRole: "button",
        },
        // Add custom props to the main container view
        mainContainerViewProps: {
          testID: "email-input-container",
          accessibilityRole: "none",
        },
        // Add props to the input container view
        inputContainerViewProps: {
          testID: "input-container",
        },
        // Add props to the label text container view
        labelTextContainerViewProps: {
          testID: "label-container"
        }
      }}
      core={{
        onTextChange: (text) => console.log(text),
      }}
    />
  );
};

Use Cases

Accessing Component References

Use textInputProps.ref to get a reference to the underlying TextInput component, allowing you to programmatically focus, blur, or access other imperative methods.

Additional Event Handlers

Add event handlers not directly exposed by FormInput, such as onKeyPress, onLayout, or platform-specific handlers.

Enhanced Accessibility

Provide accessibility properties through the appropriate component props. For example, addaccessibilityLabel and accessibilityHint to textInputProps oraccessibilityRole to labelTextProps to make your forms more usable for people with disabilities via screen readers and other assistive technologies.

React Native Web Support

Pass web-specific props when using React Native for Web, such as autoComplete,spellCheck, or inputMode.

Note: Use component props with caution as they represent a direct connection to the underlying components. Their behavior might change if FormInput's internal implementation changes in future versions.

Getting Started

API Reference

Examples