Input Component

The Input component is a customizable text input field for React Native applications. It's designed to be flexible and user-friendly, with support for labels, placeholders, helper text, error messages, and password visibility toggling.

Features

• Customizable styling
• Label support
• Placeholder text (with internationalization)
• Helper text
• Error message display
• Icon support
• Password visibility toggle for secure text entry
• Focus and blur handling
• RTL (Right-to-Left) text alignment support

Props

Prop	Type	Default	Description
style	Object	-	Custom style for the container View
label	String	-	Label text displayed above the input
placeholder	String	-	Placeholder text (will be translated)
helperText	String	-	Helper text displayed below the input
value	String	-	Current value of the input
onChange	Function	-	Callback function when text changes
icon	Component	-	Custom icon component to display
error	String	-	Error message to display below the input
inputRef	Ref	-	Ref for the TextInput component
secureTextEntry	Boolean	false	Enable secure text entry (for passwords)
textInputStyle	Object	-	Custom style for the TextInput component

Additional props are passed down to the underlying TextInput component.

Usage

import { Input } from "@appmaker-xyz/ui";

function MyComponent() {
  const [value, setValue] = useState("");

  return (
    <Input
      label="Username"
      placeholder="Enter your username"
      value={value}
      onChange={setValue}
      helperText="Your username should be unique"
    />
  );
}

Accessibility

The component includes basic accessibility features such as proper text alignment for RTL languages and the ability to pass additional props to the TextInput for further accessibility enhancements.