@geekyhawks/react-native-ui-components
Version:
A lightweight and reusable React Native UI components library with customizable Text, TextInput, FloatingLabelTextInput, Button, and more. Built with TypeScript, fully typed, and designed for easy integration into any React Native project.
105 lines • 4.17 kB
TypeScript
/**
* FloatingLabelTextInput
*
* A text input with a floating label that animates above the field
* when focused or when a value is present. Supports style variants,
* size variants, multiline input, and theme integration.
*
* Author: Geeky Hawks FZE LLC
*/
import React from "react";
import { TextInputProps as RNTextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
import { DefaultFloatingLabelTextInputStyles, DefaultFloatingLabelTextInputSizes } from "../../theme";
/**
* Props for FloatingLabelTextInput component
*
* - **containerStyle**: style for the outermost container
* - **disabled / loading**: disable input or show loading state
* - **error**: optional error message to display below the input
* - **errorPosition**: alignment of error text ("left" | "center" | "right")
* - **errorTextStyle**: style for error text
* - **fullWidth**: make input expand to full width
* - **helperText**: optional helper text to show below the input
* - **helperTextStyle**: style for helper text
* - **inputContainerStyle**: style for inner input container
* - **inputStyle**: style for TextInput itself
* - **label**: text for the floating label
* - **labelStyle**: style for the label text
* - **loading**: show loading state
* - **multiline / numberOfLines**: enable multi-line text entry
* - **passwordToggleIcons**: icons for show/hide password
* - **rightIcon / leftIcon**: optional icons
* - **secureTextEntry**: toggle password visibility
* - **size**: choose size variant ("sm" | "md" | "lg")
* - **variant**: choose style variant ("outline" | "underline")
*
* All standard React Native `TextInputProps` can also be applied.
*/
export interface Props extends RNTextInputProps {
/** Style for the outermost container (margin, flex, etc.) */
containerStyle?: StyleProp<ViewStyle>;
/** Disable the input */
disabled?: boolean;
/** Error message to display below the input */
error?: string;
/** Error text alignment */
errorPosition?: "left" | "center" | "right";
/** Style for error text */
errorTextStyle?: StyleProp<TextStyle>;
/** Optional font family for the input text */
fontFamily?: string;
/** Make input expand to fill parent width */
fullWidth?: boolean;
/** Optional helper text below the input */
helperText?: string;
/** Style for helper text */
helperTextStyle?: StyleProp<TextStyle>;
/** Style for the inner input container (border, padding, etc.) */
inputContainerStyle?: StyleProp<ViewStyle>;
/** Style for the actual TextInput */
inputStyle?: StyleProp<TextStyle>;
/** Label for the input field */
label: string;
/** Style for the label */
labelStyle?: StyleProp<TextStyle>;
/** Show a loading indicator */
loading?: boolean;
/** Support multiple lines */
multiline?: boolean;
/** Number of lines for multiline input */
numberOfLines?: number;
/** Icons for password toggle, if not passed then Default Text "Show"/"Hide" will be shown */
passwordToggleIcons?: {
hide?: React.ReactNode;
show?: React.ReactNode;
};
/** Show text as secure (password) */
secureTextEntry?: boolean;
/**
* Sizes
*
* Choose from default size variants:
* - "sm": small font, compact spacing
* - "md": medium font and spacing (default)
* - "lg": large font, more padding, larger label
*/
size?: DefaultFloatingLabelTextInputSizes | (string & {});
/**
* Variants
*
* Choose from default style variants:
* - "outline": bordered box input with floating label
* - "underline": single underline input with floating label
*/
variant?: DefaultFloatingLabelTextInputStyles | (string & {});
}
/**
* FloatingLabelTextInput
*
* A customizable wrapper around React Native's `TextInput` with a floating label.
* Applies default styleVariants, sizeVariants, theme colors, error/helper text handling,
* and supports multiline input.
*/
declare const FloatingLabelTextInput: React.FC<Props>;
export default FloatingLabelTextInput;
//# sourceMappingURL=FloatingLabelTextInput.d.ts.map