@rn-components-dropdown/dropdown 1.0.0

package/dist/components/dropdown/interface/DropdownInterface.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { StyleProp, TextStyle, ViewStyle, TextProps, ImageStyle, FlatListProps } from 'react-native';
+import { ThemeColors } from '../../../interface/colors.interface';
+export type IDropdownRef = {
+    open: () => void;
+    close: () => void;
+};
+export type SelectionType = 'single' | 'multi';
+export type DropdownProps<S, T extends SelectionType> = {
+    data: S[];
+    testID?: string;
+    search?: boolean;
+    disable?: boolean;
+    selectionType?: T;
+    maxHeight?: number;
+    iconColor?: string;
+    minHeight?: number;
+    inverted?: boolean;
+    fontFamily?: string;
+    labelField: keyof S;
+    valueField: keyof S;
+    onBlur?: () => void;
+    placeholder?: string;
+    onFocus?: () => void;
+    autoScroll?: boolean;
+    searchField?: keyof S;
+    value?: S[] | undefined;
+    itemTestIDField?: string;
+    backgroundColor?: string;
+    keyboardAvoiding?: boolean;
+    searchPlaceholder?: string;
+    label?: string | undefined;
+    confirmSelectItem?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    subfixIcon?: React.JSX.Element;
+    onClear?: (id?: number) => void;
+    multiSelectIcon?: React.JSX.Element;
+    checkIconColor?: keyof ThemeColors;
+    radioIconColor?: keyof ThemeColors;
+    onChange?: (selecteValue?: keyof S, selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S) => void;
+    selectedTextProps?: TextProps;
+    activeColor?: keyof ThemeColors;
+    iconStyle?: StyleProp<ImageStyle>;
+    mode?: 'default' | 'modal' | 'auto';
+    itemTextStyle?: StyleProp<TextStyle>;
+    itemAccessibilityLabelField?: string;
+    labelContainer?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    labelTextStyle?: StyleProp<TextStyle>;
+    showsVerticalScrollIndicator?: boolean;
+    placeholderStyle?: StyleProp<TextStyle>;
+    inputSearchStyle?: StyleProp<TextStyle>;
+    onChangeText?: (search: string) => void;
+    onConfirmSelectItem?: (item: T) => void;
+    selectedTextStyle?: StyleProp<TextStyle>;
+    itemContainerStyle?: StyleProp<ViewStyle>;
+    dropdownPosition?: 'auto' | 'top' | 'bottom';
+    ref?: React.RefObject<IDropdownRef> | null | undefined;
+    searchQuery?: (keyword: string, labelValue: string) => boolean;
+    flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
+    renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
+    renderLeftIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
+    renderItem?: (item: S, selected?: boolean) => React.JSX.Element | null | undefined;
+    renderInputSearch?: (onSearch: (text: string) => void) => React.JSX.Element | null | undefined;
+};
+export interface IUseDetectDevice {
+    isAndroid: boolean;
+    isIOS: boolean;
+    isTablet: boolean;
+}

package/dist/components/dropdown/interface/DropdownInterface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/dropdown/interface/InputProps.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle, TextInputProps } from 'react-native';
+interface Props extends TextInputProps {
+    style?: StyleProp<ViewStyle>;
+    searchIcon?: React.JSX.Element;
+}
+export type CTextInput = React.FC<Props>;
+export {};

package/dist/components/dropdown/interface/InputProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/svgButton/SvgButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle, PressableProps } from 'react-native';
+interface Props {
+    isFab?: boolean;
+    onPress?: () => void;
+    icon?: React.JSX.Element;
+    style?: StyleProp<ViewStyle>;
+    pressableProps?: PressableProps;
+}
+declare const SvgButton: React.MemoExoticComponent<({ icon, style, onPress, isFab, pressableProps, }: Props) => React.JSX.Element>;
+export default SvgButton;

package/dist/components/svgButton/SvgButton.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const SvgButtonStyle_1 = require("./SvgButtonStyle");
+const react_native_1 = require("react-native");
+const SvgButton = react_1.default.memo(({ icon, style, onPress, isFab = false, pressableProps, }) => {
+    const { styles } = (0, SvgButtonStyle_1.useSvgButtonStyle)();
+    const styleProp = isFab ? [styles?.favIcon, style] : style;
+    return (<react_native_1.Pressable hitSlop={10} style={styleProp} onPress={onPress} {...pressableProps}>
+        {icon && icon} 
+      </react_native_1.Pressable>);
+});
+exports.default = SvgButton;

package/dist/components/svgButton/SvgButtonStyle.d.ts

@@ -0,0 +1,28 @@
+export declare const useSvgButtonStyle: () => {
+    styles: {
+        favIcon: {
+            width: number;
+            right: number;
+            height: number;
+            bottom: number;
+            borderRadius: number;
+            position: "absolute";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: string;
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};

package/dist/components/svgButton/SvgButtonStyle.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSvgButtonStyle = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const style_1 = require("../../style");
+const useSvgButtonStyle = () => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            favIcon: {
+                width: 50,
+                right: 25,
+                height: 50,
+                bottom: 25,
+                borderRadius: 6,
+                position: 'absolute',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: colors.green,
+            },
+        });
+    }, [colors]);
+    return {
+        styles,
+        colors,
+    };
+};
+exports.useSvgButtonStyle = useSvgButtonStyle;

package/dist/components/text/AppText.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextProps } from 'react-native';
+import { ThemeColors } from '../../interface/colors.interface';
+interface props extends TextProps {
+    size?: number;
+    fontFamily?: any;
+    required?: boolean;
+    color?: keyof ThemeColors;
+    type?: 'error' | 'normal';
+}
+declare const AppText: ({ size, style, color, children, type, fontFamily, required, ...props }: props) => React.JSX.Element;
+export default AppText;

package/dist/components/text/AppText.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const AppTextStyle_1 = require("./AppTextStyle");
+const AppText = ({ size, style, color, children, type = 'normal', fontFamily = 'regular', required, ...props }) => {
+    const family = fontFamily;
+    const styles = (0, AppTextStyle_1.useAppTextStyle)({
+        style: {
+            fontFamily: family,
+        },
+        size,
+        color,
+        type,
+    });
+    return (<react_native_1.Text allowFontScaling={false} style={[styles.container, style]} {...props}>
+      {children}
+      {required && <react_native_1.Text style={styles.require}>*</react_native_1.Text>}
+    </react_native_1.Text>);
+};
+exports.default = AppText;

package/dist/components/text/AppTextStyle.d.ts

@@ -0,0 +1,171 @@
+import { TextStyle } from 'react-native';
+import { ThemeColors } from '../../interface/colors.interface';
+interface props {
+    size?: number;
+    style?: TextStyle;
+    color?: keyof ThemeColors;
+    type?: 'error' | 'normal';
+}
+export declare const useAppTextStyle: ({ size, style, color, type, }: props) => {
+    container: {
+        color: import("react-native").ColorValue;
+        fontFamily?: string | undefined;
+        fontSize: number;
+        fontStyle?: "normal" | "italic" | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined;
+        letterSpacing?: number | undefined;
+        lineHeight?: number | undefined;
+        textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
+        textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
+        textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
+        textDecorationColor?: import("react-native").ColorValue | undefined;
+        textShadowColor?: import("react-native").ColorValue | undefined;
+        textShadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        textShadowRadius?: number | undefined;
+        textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
+        userSelect?: "auto" | "none" | "text" | "contain" | "all" | undefined;
+        fontVariant?: import("react-native").FontVariant[] | undefined;
+        writingDirection?: "auto" | "ltr" | "rtl" | undefined;
+        backfaceVisibility?: "visible" | "hidden" | undefined;
+        backgroundColor?: import("react-native").ColorValue | undefined;
+        borderBlockColor?: import("react-native").ColorValue | undefined;
+        borderBlockEndColor?: import("react-native").ColorValue | undefined;
+        borderBlockStartColor?: import("react-native").ColorValue | undefined;
+        borderBottomColor?: import("react-native").ColorValue | undefined;
+        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderColor?: import("react-native").ColorValue | undefined;
+        borderCurve?: "circular" | "continuous" | undefined;
+        borderEndColor?: import("react-native").ColorValue | undefined;
+        borderEndEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderEndStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderLeftColor?: import("react-native").ColorValue | undefined;
+        borderRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderRightColor?: import("react-native").ColorValue | undefined;
+        borderStartColor?: import("react-native").ColorValue | undefined;
+        borderStartEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderStartStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
+        borderTopColor?: import("react-native").ColorValue | undefined;
+        borderTopEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderTopRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderTopStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        outlineColor?: import("react-native").ColorValue | undefined;
+        outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
+        outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
+        outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
+        opacity?: import("react-native").AnimatableNumericValue | undefined;
+        elevation?: number | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+        isolation?: "auto" | "isolate" | undefined;
+        cursor?: import("react-native").CursorValue | undefined;
+        boxShadow?: ReadonlyArray<import("react-native").BoxShadowValue> | string | undefined;
+        filter?: ReadonlyArray<import("react-native").FilterFunction> | string | undefined;
+        mixBlendMode?: import("react-native").BlendMode | undefined;
+        experimental_backgroundImage?: ReadonlyArray<import("react-native").GradientValue> | string | undefined;
+        alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+        alignItems?: import("react-native").FlexAlignType | undefined;
+        alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
+        aspectRatio?: number | string | undefined;
+        borderBottomWidth?: number | undefined;
+        borderEndWidth?: number | undefined;
+        borderLeftWidth?: number | undefined;
+        borderRightWidth?: number | undefined;
+        borderStartWidth?: number | undefined;
+        borderTopWidth?: number | undefined;
+        borderWidth?: number | undefined;
+        bottom?: import("react-native").DimensionValue | undefined;
+        boxSizing?: "border-box" | "content-box" | undefined;
+        display?: "none" | "flex" | "contents" | undefined;
+        end?: import("react-native").DimensionValue | undefined;
+        flex?: number | undefined;
+        flexBasis?: import("react-native").DimensionValue | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+        rowGap?: number | string | undefined;
+        gap?: number | string | undefined;
+        columnGap?: number | string | undefined;
+        flexGrow?: number | undefined;
+        flexShrink?: number | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        height?: import("react-native").DimensionValue | undefined;
+        justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
+        left?: import("react-native").DimensionValue | undefined;
+        margin?: import("react-native").DimensionValue | undefined;
+        marginBottom?: import("react-native").DimensionValue | undefined;
+        marginEnd?: import("react-native").DimensionValue | undefined;
+        marginHorizontal?: import("react-native").DimensionValue | undefined;
+        marginLeft?: import("react-native").DimensionValue | undefined;
+        marginRight?: import("react-native").DimensionValue | undefined;
+        marginStart?: import("react-native").DimensionValue | undefined;
+        marginTop?: import("react-native").DimensionValue | undefined;
+        marginVertical?: import("react-native").DimensionValue | undefined;
+        maxHeight?: import("react-native").DimensionValue | undefined;
+        maxWidth?: import("react-native").DimensionValue | undefined;
+        minHeight?: import("react-native").DimensionValue | undefined;
+        minWidth?: import("react-native").DimensionValue | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        padding?: import("react-native").DimensionValue | undefined;
+        paddingBottom?: import("react-native").DimensionValue | undefined;
+        paddingEnd?: import("react-native").DimensionValue | undefined;
+        paddingHorizontal?: import("react-native").DimensionValue | undefined;
+        paddingLeft?: import("react-native").DimensionValue | undefined;
+        paddingRight?: import("react-native").DimensionValue | undefined;
+        paddingStart?: import("react-native").DimensionValue | undefined;
+        paddingTop?: import("react-native").DimensionValue | undefined;
+        paddingVertical?: import("react-native").DimensionValue | undefined;
+        position?: "absolute" | "relative" | "static" | undefined;
+        right?: import("react-native").DimensionValue | undefined;
+        start?: import("react-native").DimensionValue | undefined;
+        top?: import("react-native").DimensionValue | undefined;
+        width?: import("react-native").DimensionValue | undefined;
+        zIndex?: number | undefined;
+        direction?: "inherit" | "ltr" | "rtl" | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
+        shadowColor?: import("react-native").ColorValue | undefined;
+        shadowOffset?: Readonly<{
+            width: number;
+            height: number;
+        }> | undefined;
+        shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
+        shadowRadius?: number | undefined;
+        transform?: Readonly<import("react-native").MaximumOneOf<import("react-native").PerspectiveTransform & import("react-native").RotateTransform & import("react-native").RotateXTransform & import("react-native").RotateYTransform & import("react-native").RotateZTransform & import("react-native").ScaleTransform & import("react-native").ScaleXTransform & import("react-native").ScaleYTransform & import("react-native").TranslateXTransform & import("react-native").TranslateYTransform & import("react-native").SkewXTransform & import("react-native").SkewYTransform & import("react-native").MatrixTransform>[]> | string | undefined;
+        transformOrigin?: Array<string | number> | string | undefined;
+        transformMatrix?: Array<number> | undefined;
+        rotation?: import("react-native").AnimatableNumericValue | undefined;
+        scaleX?: import("react-native").AnimatableNumericValue | undefined;
+        scaleY?: import("react-native").AnimatableNumericValue | undefined;
+        translateX?: import("react-native").AnimatableNumericValue | undefined;
+        translateY?: import("react-native").AnimatableNumericValue | undefined;
+        textAlignVertical?: "auto" | "top" | "bottom" | "center" | undefined;
+        verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
+        includeFontPadding?: boolean | undefined;
+    };
+    require: {
+        color: string;
+    };
+};
+export {};

package/dist/components/text/AppTextStyle.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppTextStyle = void 0;
+const react_1 = require("react");
+const style_1 = require("../../style");
+const react_native_1 = require("react-native");
+const useAppTextStyle = ({ size, style, color, type = 'normal', }) => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            container: {
+                fontSize: size || 14,
+                color: type === 'error'
+                    ? colors.error
+                    : color
+                        ? colors[color]
+                        : colors.primary,
+                ...style,
+            },
+            require: {
+                color: colors.error,
+            },
+        });
+    }, [size, colors, style, type, color]);
+    return styles;
+};
+exports.useAppTextStyle = useAppTextStyle;

package/dist/components/textInput/AppTextInput.d.ts

@@ -0,0 +1,20 @@
+import { StyleProp, TextStyle, ViewStyle, TextInputProps } from 'react-native';
+import React from 'react';
+export interface AppTextProps extends TextInputProps {
+    label?: string;
+    inputRef?: any;
+    required?: boolean;
+    icon?: React.JSX.Element;
+    error?: string | undefined;
+    leftIcon?: React.JSX.Element;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    leftIconStyle?: StyleProp<ViewStyle>;
+    rightIconStyle?: StyleProp<ViewStyle>;
+    onIconPress?: () => Promise<void> | undefined | void;
+    type?: 'password' | 'number' | 'email' | 'phone' | 'text';
+    autoCapitalize?: 'characters' | 'words' | 'sentences' | 'none';
+}
+declare const AppTextInput: ({ icon, type, error, label, style, value, onBlur, onFocus, required, leftIcon, inputRef, textStyle, onPressIn, labelStyle, placeholder, onIconPress, autoCorrect, onChangeText, leftIconStyle, rightIconStyle, textContentType, placeholderTextColor, ...rest }: AppTextProps) => React.JSX.Element;
+export default AppTextInput;

package/dist/components/textInput/AppTextInput.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+const AppText_1 = __importDefault(require("../text/AppText"));
+const SvgButton_1 = __importDefault(require("../svgButton/SvgButton"));
+const react_1 = __importStar(require("react"));
+const AppTextInputStyle_1 = require("./AppTextInputStyle");
+const AppTextInput = ({ icon, type, error, label, style, value, onBlur, onFocus, required, leftIcon, inputRef, textStyle, onPressIn, labelStyle, placeholder, onIconPress, autoCorrect, onChangeText, leftIconStyle, rightIconStyle, textContentType, placeholderTextColor, ...rest }) => {
+    const { styles, colors } = (0, AppTextInputStyle_1.useAppTextInputStyle)({
+        type,
+        leftIcon,
+        editable: rest?.editable,
+    });
+    const [secureTextEntry, setSecureTextEntry] = (0, react_1.useState)(type === 'password');
+    const handlePasswordIcon = () => {
+        setSecureTextEntry(prev => !prev);
+    };
+    const getKeyboardType = () => {
+        switch (type) {
+            case 'email':
+                return 'email-address';
+            case 'number':
+                return 'numeric';
+            case 'phone':
+                return 'phone-pad';
+            default:
+                return 'default';
+        }
+    };
+    const renderIcon = (0, react_1.useCallback)((rightIcon, onPress) => (<SvgButton_1.default icon={rightIcon} onPress={onPress} style={[styles.rightIcon, rightIconStyle]}/>), [styles, rightIconStyle]);
+    return (<>
+      {label ? (<AppText_1.default style={[styles.label, labelStyle]}>
+          {label}
+          {required ? (<AppText_1.default style={[styles.label, styles.required]}>*</AppText_1.default>) : null}
+        </AppText_1.default>) : null}
+      <react_native_1.View style={styles.margin}>
+        <react_native_1.View style={[styles.container, style, error ? styles.errorWrapper : {}]}>
+          {leftIcon ? (<SvgButton_1.default icon={leftIcon} style={[styles.leftIcon, leftIconStyle]}/>) : null}
+          <react_native_1.TextInput value={value} ref={inputRef} onBlur={onBlur} onPressIn={onPressIn} allowFontScaling={false} placeholder={placeholder} autoCorrect={autoCorrect} onChangeText={onChangeText} keyboardType={getKeyboardType()} textContentType={textContentType} secureTextEntry={secureTextEntry} style={[styles.textInputStyles, textStyle]} placeholderTextColor={placeholderTextColor || colors.gray} onFocus={e => {
+            if (onFocus) {
+                onFocus(e);
+            }
+        }} {...rest}/>
+          {type === 'password'
+            ? renderIcon(icon, handlePasswordIcon)
+            : null}
+          {icon && type !== 'password' ? renderIcon(icon, onIconPress) : null}
+        </react_native_1.View>
+        {error && <AppText_1.default style={styles.error}>{error}</AppText_1.default>}
+      </react_native_1.View>
+    </>);
+};
+exports.default = AppTextInput;

package/dist/components/textInput/AppTextInputStyle.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { PressableStateCallbackType } from 'react-native';
+interface props {
+    type?: any;
+    editable?: boolean;
+    leftIcon?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
+    rightIcon?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
+}
+export declare const useAppTextInputStyle: ({ type, leftIcon, editable, }: props) => {
+    styles: {
+        container: {
+            flexDirection: "row";
+            alignItems: "center";
+            opacity: number;
+            backgroundColor: string;
+            shadowColor: string;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+            width: "100%";
+        };
+        margin: {
+            marginBottom: number;
+        };
+        rightIcon: {
+            position: "absolute";
+            right: number;
+        };
+        error: {
+            textAlign: "left";
+            paddingTop: number;
+            alignSelf: "flex-start";
+            color: string;
+        };
+        label: {
+            color: string;
+            marginBottom: number;
+            alignSelf: "flex-start";
+            marginTop: number;
+        };
+        required: {
+            color: string;
+        };
+        errorWrapper: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        textInputStyles: {
+            padding: number;
+            height: number;
+            width: "100%";
+            color: string;
+            paddingLeft: number;
+            paddingRight: number;
+        };
+        leftIcon: {
+            position: "absolute";
+            left: number;
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};
+export {};