@geekyhawks/react-native-ui-components/dist/components/Button/Button.d.ts

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.

/**
 * Button
 *
 * A customizable wrapper around React Native's `Pressable` component.
 * Provides built-in support for variants, sizes, color schemes, loading states,
 * and optional left/right icons.
 *
 * Author: Geeky Hawks FZE LLC
 */
import React from "react";
import { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
import { DefaultButtonShapes, DefaultButtonSizes, useTheme } from "../../theme";
/**
 * Props for custom Button component
 *
 * - **animation**: choose press feedback animation (`scale`, `opacity`, `shadow`, `scaleOpacity`, `none`)
 * - **children**: content of the button (text)
 * - **colorScheme**: choose color from theme palette
 * - **containerStyle**: style for the outer container
 * - **disabled**: disable the button
 * - **fontFamily**: font family for the button text
 * - **fullWidth**: make the button expand to fill its parent’s width
 * - **leftIcon / rightIcon**: optional icons before or after text
 * - **loading**: show loading indicator instead of text
 * - **loadingIndicator**: custom loading indicator node
 * - **loadingText**: optional loading text
 * - **loadingTextPosition**: Position of loading text (`left`, `right`)
 * - **loadingTextStyle**: optional loading text style
 * - **onPress**: callback for button press
 * - **shape**: choose corner radius from theme-defined `buttonShapeVariants`
 * - **size**: choose size from theme-defined `buttonSizeVariants`
 * - **textStyle**: style for the text inside the button
 * - **variant**: choose button style (`solid`, `outline`, `ghost`)
 *
 * All standard React Native `PressableProps` can also be applied.
 */
export interface Props extends PressableProps {
    /** Press feedback animation (`scale`, `opacity`, `shadow`, `scaleOpacity`, `none`) */
    animation?: "scale" | "opacity" | "shadow" | "scaleOpacity" | "none";
    /**
     * buttonStyle - Style for the inner button surface
     * Example: background color, border radius, shadow, padding
     */
    buttonStyle?: StyleProp<ViewStyle>;
    /** Content of the button (text) */
    children?: string;
    /** Optional color from theme palette */
    colorScheme?: keyof ReturnType<typeof useTheme>["theme"]["colors"];
    /**
     * containerStyle - Style for the outer container
     * Example: layout-related styles like flex, margin, alignment
     */
    containerStyle?: StyleProp<ViewStyle>;
    /** Disable the button */
    disabled?: boolean;
    /** Optional font family for the button text */
    fontFamily?: string;
    /** Make the button expand to fill parent width */
    fullWidth?: boolean;
    /** Icon to show before text */
    leftIcon?: React.ReactNode;
    /** Style for the left icon container */
    leftIconStyle?: StyleProp<ViewStyle>;
    /** Loading indicator shown instead of text */
    loading?: boolean;
    /** Custom loading indicator node */
    loadingIndicator?: React.ReactNode;
    /** Optional loading text */
    loadingText?: string;
    /** Position of loading text (`left`, `right`) */
    loadingTextPosition?: "left" | "right";
    /** Loading text style */
    loadingTextStyle?: StyleProp<TextStyle>;
    /** Callback for button press */
    onPress?: () => void;
    /** Icon to show after text */
    rightIcon?: React.ReactNode;
    /** Style for the right icon container */
    rightIconStyle?: StyleProp<ViewStyle>;
    /**
     * Shape
     *
     * Choose from default shapes (`"sm" | "md" | "lg" | "full"`)
     * or provide the name of a custom shape defined in ThemeProvider.
     */
    shape?: DefaultButtonShapes | (string & {});
    /**
     * Size
     *
     * Choose from default sizes (`"sm" | "md" | "lg"`)
     * or provide the name of a custom size defined in ThemeProvider.
     */
    size?: DefaultButtonSizes | (string & {});
    /** Style for the text inside the button */
    textStyle?: StyleProp<TextStyle>;
    /** Variant style of the button (`solid`, `outline`, `ghost`) */
    variant?: "solid" | "outline" | "ghost";
}
/**
 * Button
 *
 * A customizable wrapper around React Native's `Pressable`.
 * Applies default button variants, sizeVariants, theme colors,
 * and supports loading and icon states.
 */
declare const Button: React.FC<Props>;
export default Button;
//# sourceMappingURL=Button.d.ts.map