@umituz/react-native-design-system 1.5.32 → 1.5.34

package/src/presentation/atoms/AtomicFab.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { useResponsive } from '../hooks/useResponsive';
-import { AtomicIcon } from './AtomicIcon';
-import { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder, } from './fab/styles/fabStyles';
-export { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder };
-/**
- * AtomicFab - Floating Action Button Component
- *
- * A Material Design 3 compliant FAB component for primary actions.
- * Follows CLAUDE.md standards for responsive positioning.
- *
- * @example
- * ```tsx
- * // IMPORTANT: FAB must be used at screen level, NOT inside ScrollView
- * <ScreenLayout>
- *   <ScrollView>
- *     {/* Your content *\/}
- *   </ScrollView>
- *   <AtomicFab
- *     icon="add"
- *     onPress={handleAddItem}
- *     variant="primary"
- *     size="md"
- *   />
- * </ScreenLayout>
- * ```
- *
- * Features:
- * - Material Design 3 sizes (sm: 40px, md: 56px, lg: 72px)
- * - Three variants: primary, secondary, surface
- * - Responsive positioning (above tab bar, safe area aware)
- * - Disabled state with opacity
- * - Theme-aware colors from design tokens
- * - Border for depth (no shadows per CLAUDE.md)
- */
-export const AtomicFab = ({ icon, onPress, variant = 'primary', size = 'md', disabled = false, style, testID, accessibilityLabel, }) => {
-    const tokens = useAppDesignTokens();
-    const responsive = useResponsive();
-    const isDisabled = disabled;
-    // Get configurations
-    const sizeConfig = FAB_SIZES[size];
-    const variants = getFabVariants(tokens);
-    const variantConfig = variants[variant];
-    const iconSize = getFabIconSize(size);
-    // Combine styles
-    const fabStyle = StyleSheet.flatten([
-        {
-            position: 'absolute',
-            bottom: responsive.fabPosition.bottom,
-            right: responsive.fabPosition.right,
-            width: sizeConfig.width,
-            height: sizeConfig.height,
-            borderRadius: sizeConfig.borderRadius,
-            backgroundColor: variantConfig.backgroundColor,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        getFabBorder(tokens),
-        isDisabled ? { opacity: tokens.opacity.disabled } : undefined,
-        style, // Custom style override
-    ]);
-    return (<TouchableOpacity style={fabStyle} onPress={onPress} disabled={isDisabled} activeOpacity={0.7} testID={testID} accessibilityLabel={accessibilityLabel || `${icon} button`} accessibilityRole="button">
-      <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor}/>
-    </TouchableOpacity>);
-};

package/src/presentation/atoms/AtomicFilter.js

@@ -1,103 +0,0 @@
-import React from 'react';
-import { ScrollView, View, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicChip } from './AtomicChip';
-import { AtomicText } from './AtomicText';
-import { AtomicIcon } from './AtomicIcon';
-import { getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './filter/styles/filterStyles';
-export { getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './filter/styles/filterStyles';
-/**
- * AtomicFilter - Horizontal Filter Chip Component
- *
- * A Material Design 3 compliant filter component using chip selection.
- * Supports single and multi-select modes with "Clear All" functionality.
- *
- * @example
- * ```tsx
- * const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
- *
- * <AtomicFilter
- *   options={[
- *     { id: 'active', label: 'Active', icon: 'check-circle' },
- *     { id: 'completed', label: 'Completed', icon: 'check' },
- *     { id: 'pending', label: 'Pending', icon: 'clock' },
- *   ]}
- *   selectedIds={selectedFilters}
- *   onSelectionChange={setSelectedFilters}
- *   multiSelect={true}
- *   showClearAll={true}
- * />
- * ```
- *
- * Features:
- * - Horizontal scrollable filter chips
- * - Single/Multi-select modes
- * - Clear all button (when filters active)
- * - Theme-aware colors from design tokens
- * - Icon support per filter option
- * - Fully controlled component
- */
-export const AtomicFilter = ({ options, selectedIds, onSelectionChange, multiSelect = true, showClearAll = true, variant = 'outlined', color = 'primary', size = 'md', style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    /**
-     * Handle filter chip press
-     */
-    const handleFilterPress = (optionId) => {
-        if (multiSelect) {
-            // Multi-select mode: Toggle selection
-            if (selectedIds.includes(optionId)) {
-                // Deselect
-                onSelectionChange(selectedIds.filter(id => id !== optionId));
-            }
-            else {
-                // Select
-                onSelectionChange([...selectedIds, optionId]);
-            }
-        }
-        else {
-            // Single-select mode: Replace selection
-            if (selectedIds.includes(optionId)) {
-                // Deselect (clear selection)
-                onSelectionChange([]);
-            }
-            else {
-                // Select (only this one)
-                onSelectionChange([optionId]);
-            }
-        }
-    };
-    /**
-     * Handle clear all button press
-     */
-    const handleClearAll = () => {
-        onSelectionChange([]);
-    };
-    const hasActiveFilters = selectedIds.length > 0;
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={getScrollContentContainerStyle()} style={[style]} testID={testID}>
-      <View style={getFilterContainerStyle()}>
-        {options.map((option) => {
-            const isSelected = selectedIds.includes(option.id);
-            return (<AtomicChip key={option.id} variant={isSelected ? 'filled' : variant} color={color} size={size} leadingIcon={option.icon} selected={isSelected} clickable={true} onPress={() => handleFilterPress(option.id)} testID={`filter-chip-${option.id}`}>
-              {option.label}
-            </AtomicChip>);
-        })}
-
-        {/* Clear All Button */}
-        {showClearAll && hasActiveFilters && (<TouchableOpacity onPress={handleClearAll} style={[
-                getClearAllContainerStyle(),
-                {
-                    backgroundColor: tokens.colors.surfaceVariant,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.outline,
-                }
-            ]} testID="clear-all-button">
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
-              <AtomicIcon name="X" size="xs" color="surfaceVariant"/>
-              <AtomicText type="labelSmall" style={{ color: tokens.colors.textSecondary }}>
-                Clear All
-              </AtomicText>
-            </View>
-          </TouchableOpacity>)}
-      </View>
-    </ScrollView>);
-};

package/src/presentation/atoms/AtomicFormError.js

@@ -1,63 +0,0 @@
-/**
- * AtomicFormError - Universal Form Error Component
- *
- * Provides consistent error message display for forms
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Display validation error messages
- *
- * Usage:
- * - Form field validation errors
- * - Global form error messages
- * - API error display
- * - Input validation feedback
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { withAlpha } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicFormError = ({ message, variant = 'field', style, textStyle, }) => {
-    const tokens = useAppDesignTokens();
-    if (!message) {
-        return null;
-    }
-    if (variant === 'global') {
-        return (<View style={[
-                {
-                    padding: tokens.spacing.md,
-                    borderRadius: tokens.borders.radius.md,
-                    marginBottom: tokens.spacing.sm,
-                    backgroundColor: withAlpha(tokens.colors.error, 0.15),
-                },
-                style,
-            ]}>
-        <AtomicText type="bodySmall" color="error" style={StyleSheet.flatten([
-                {
-                    textAlign: 'center',
-                    fontWeight: tokens.typography.medium,
-                },
-                textStyle,
-            ])}>
-          {message}
-        </AtomicText>
-      </View>);
-    }
-    return (<AtomicText type="bodySmall" color="error" style={StyleSheet.flatten([
-            {
-                marginTop: tokens.spacing.xs,
-                marginLeft: tokens.spacing.xs,
-            },
-            textStyle,
-        ])}>
-      {message}
-    </AtomicText>);
-};
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicFormError;

package/src/presentation/atoms/AtomicIcon.js

@@ -1,29 +0,0 @@
-/**
- * AtomicIcon - Atomic Design System Icon Component
- *
- * Wrapper for the universal Icon component from @domains/icons
- * Provides backward compatibility with AtomicIcon naming convention
- * while leveraging the full power of the icons domain architecture.
- */
-import React from 'react';
-import { Icon } from '@umituz/react-native-icon';
-/**
- * AtomicIcon Component
- *
- * @example
- * ```tsx
- * import { AtomicIcon } from '@umituz/react-native-design-system';
- *
- * // Basic usage
- * <AtomicIcon name="Settings" size="md" color="primary" />
- *
- * // Custom size and color
- * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
- *
- * // With background
- * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
- * ```
- */
-export const AtomicIcon = (props) => {
-    return <Icon {...props}/>;
-};

package/src/presentation/atoms/AtomicImage.js

@@ -1,91 +0,0 @@
-/**
- * AtomicImage - Universal Image Component
- *
- * Provides consistent image handling across the app with theme integration
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Basic image display with consistent styling
- *
- * Usage:
- * - Profile pictures
- * - Product images
- * - Icons and illustrations
- * - Background images
- */
-import React from 'react';
-import { Image, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// SIZE CONFIGURATION
-// =============================================================================
-const SIZE_CONFIG = {
-    xs: 24,
-    sm: 32,
-    md: 48,
-    lg: 64,
-    xl: 96,
-    xxl: 128,
-};
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicImage = ({ source, size = 'md', shape = 'rounded', borderRadius, style, imageStyle, backgroundColor, borderColor, borderWidth = 0, ...props }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    const imageSize = SIZE_CONFIG[size];
-    const calculatedBorderRadius = borderRadius ?? getBorderRadius(shape, imageSize, tokens);
-    const containerStyle = [
-        styles.container,
-        {
-            width: imageSize,
-            height: imageSize,
-            borderRadius: calculatedBorderRadius,
-            backgroundColor: backgroundColor || tokens.colors.surface,
-            borderColor: borderColor || tokens.colors.border,
-            borderWidth,
-        },
-        style,
-    ];
-    const finalImageStyle = [
-        styles.image,
-        {
-            borderRadius: calculatedBorderRadius,
-        },
-        imageStyle,
-    ];
-    return (<Image source={source} style={finalImageStyle} {...props}/>);
-};
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-const getBorderRadius = (shape, size, tokens) => {
-    switch (shape) {
-        case 'circle':
-            return size / 2;
-        case 'square':
-            return 0;
-        case 'rounded':
-        default:
-            return tokens.borders.radius.md;
-    }
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => StyleSheet.create({
-    container: {
-        overflow: 'hidden',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-        resizeMode: 'cover',
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicImage;

package/src/presentation/atoms/AtomicInput.js

@@ -1,201 +0,0 @@
-import React, { useState } from 'react';
-import { View, TextInput, Pressable, StyleSheet, Platform } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicText } from './AtomicText';
-/**
- * AtomicInput - Pure React Native Text Input
- *
- * Features:
- * - Pure React Native implementation (no Paper dependency)
- * - Lucide icons for password toggle and custom icons
- * - Outlined/filled/flat variants
- * - Error, success, disabled states
- * - Character counter
- * - Responsive sizing
- * - Full accessibility support
- */
-export const AtomicInput = ({ variant = 'outlined', state = 'default', size = 'md', label, value = '', onChangeText, placeholder, helperText, leadingIcon, trailingIcon, onTrailingIconPress, showPasswordToggle = false, secureTextEntry = false, maxLength, showCharacterCount = false, keyboardType = 'default', autoCapitalize = 'sentences', autoCorrect = true, disabled = false, style, inputStyle, testID, onBlur, onFocus, }) => {
-    const tokens = useAppDesignTokens();
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const isDisabled = state === 'disabled' || disabled;
-    const characterCount = value?.toString().length || 0;
-    const hasError = state === 'error';
-    const hasSuccess = state === 'success';
-    // Size configuration
-    const sizeConfig = {
-        sm: {
-            paddingVertical: tokens.spacing.xs,
-            paddingHorizontal: tokens.spacing.sm,
-            fontSize: tokens.typography.bodySmall.fontSize,
-            iconSize: 16,
-            minHeight: 40,
-        },
-        md: {
-            paddingVertical: tokens.spacing.sm,
-            paddingHorizontal: tokens.spacing.md,
-            fontSize: tokens.typography.bodyMedium.fontSize,
-            iconSize: 20,
-            minHeight: 48,
-        },
-        lg: {
-            paddingVertical: tokens.spacing.md,
-            paddingHorizontal: tokens.spacing.lg,
-            fontSize: tokens.typography.bodyLarge.fontSize,
-            iconSize: 24,
-            minHeight: 56,
-        },
-    };
-    const config = sizeConfig[size];
-    // Get variant styles
-    const getVariantStyle = () => {
-        const baseStyle = {
-            backgroundColor: tokens.colors.surface,
-            borderRadius: tokens.borders.radius.md,
-        };
-        let borderColor = tokens.colors.border;
-        if (isFocused)
-            borderColor = tokens.colors.primary;
-        if (hasError)
-            borderColor = tokens.colors.error;
-        if (hasSuccess)
-            borderColor = tokens.colors.success;
-        if (isDisabled)
-            borderColor = tokens.colors.borderDisabled;
-        switch (variant) {
-            case 'outlined':
-                return {
-                    ...baseStyle,
-                    borderWidth: isFocused ? 2 : 1,
-                    borderColor,
-                };
-            case 'filled':
-                return {
-                    ...baseStyle,
-                    backgroundColor: tokens.colors.surfaceSecondary,
-                    borderWidth: 0,
-                    borderBottomWidth: isFocused ? 2 : 1,
-                    borderBottomColor: borderColor,
-                };
-            case 'flat':
-                return {
-                    ...baseStyle,
-                    backgroundColor: 'transparent',
-                    borderWidth: 0,
-                    borderBottomWidth: 1,
-                    borderBottomColor: borderColor,
-                    borderRadius: 0,
-                };
-            default:
-                return baseStyle;
-        }
-    };
-    // Get text color based on state
-    const getTextColor = () => {
-        if (isDisabled)
-            return tokens.colors.textDisabled;
-        if (hasError)
-            return tokens.colors.error;
-        if (hasSuccess)
-            return tokens.colors.success;
-        return tokens.colors.textPrimary;
-    };
-    const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
-    const containerStyle = [
-        styles.container,
-        getVariantStyle(),
-        {
-            paddingTop: config.paddingVertical,
-            paddingBottom: config.paddingVertical,
-            paddingHorizontal: config.paddingHorizontal,
-            minHeight: config.minHeight,
-            justifyContent: 'center',
-            opacity: isDisabled ? 0.5 : 1,
-        },
-        style,
-    ];
-    const textInputStyle = [
-        styles.input,
-        {
-            fontSize: config.fontSize || tokens.typography.bodyMedium.fontSize || 16,
-            lineHeight: (config.fontSize || tokens.typography.bodyMedium.fontSize || 16) * 1.5, // Ensure text is fully visible
-            color: getTextColor(),
-            paddingVertical: 0, // Remove vertical padding to prevent clipping
-        },
-        leadingIcon ? { paddingLeft: config.iconSize + 8 } : undefined,
-        (trailingIcon || showPasswordToggle) ? { paddingRight: config.iconSize + 8 } : undefined,
-        inputStyle,
-    ];
-    return (<View testID={testID}>
-      {label && (<AtomicText type="labelMedium" color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'} style={styles.label}>
-          {label}
-        </AtomicText>)}
-
-      <View style={containerStyle}>
-        {leadingIcon && (<View style={styles.leadingIcon}>
-            <AtomicIcon name={leadingIcon} customSize={config.iconSize} customColor={iconColor}/>
-          </View>)}
-
-        <TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} placeholderTextColor={tokens.colors.textSecondary} secureTextEntry={secureTextEntry && !isPasswordVisible} maxLength={maxLength} keyboardType={keyboardType} autoCapitalize={autoCapitalize} autoCorrect={autoCorrect} editable={!isDisabled} style={textInputStyle} textAlignVertical="center" {...(Platform.OS === 'android' && { includeFontPadding: false })} onBlur={() => {
-            setIsFocused(false);
-            onBlur?.();
-        }} onFocus={() => {
-            setIsFocused(true);
-            onFocus?.();
-        }} testID={testID ? `${testID}-input` : undefined}/>
-
-        {(showPasswordToggle && secureTextEntry) && (<Pressable onPress={() => setIsPasswordVisible(!isPasswordVisible)} style={styles.trailingIcon}>
-            <AtomicIcon name={isPasswordVisible ? "EyeOff" : "Eye"} customSize={config.iconSize} customColor={iconColor}/>
-          </Pressable>)}
-
-        {trailingIcon && !showPasswordToggle && (<Pressable onPress={onTrailingIconPress} style={styles.trailingIcon} disabled={!onTrailingIconPress}>
-            <AtomicIcon name={trailingIcon} customSize={config.iconSize} customColor={iconColor}/>
-          </Pressable>)}
-      </View>
-
-      {(helperText || showCharacterCount) && (<View style={styles.helperRow}>
-          {helperText && (<AtomicText type="bodySmall" color={hasError ? 'error' : 'secondary'} style={styles.helperText} testID={testID ? `${testID}-helper` : undefined}>
-              {helperText}
-            </AtomicText>)}
-          {showCharacterCount && maxLength && (<AtomicText type="bodySmall" color="secondary" style={styles.characterCount} testID={testID ? `${testID}-count` : undefined}>
-              {characterCount}/{maxLength}
-            </AtomicText>)}
-        </View>)}
-    </View>);
-};
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    input: {
-        flex: 1,
-        margin: 0,
-        padding: 0,
-    },
-    label: {
-        marginBottom: 4,
-    },
-    leadingIcon: {
-        position: 'absolute',
-        left: 12,
-        zIndex: 1,
-    },
-    trailingIcon: {
-        position: 'absolute',
-        right: 12,
-        zIndex: 1,
-    },
-    helperRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginTop: 4,
-    },
-    helperText: {
-        flex: 1,
-    },
-    characterCount: {
-        marginLeft: 8,
-    },
-});

package/src/presentation/atoms/AtomicNumberInput.js

@@ -1,124 +0,0 @@
-/**
- * AtomicNumberInput Component
- *
- * A specialized number input component that wraps AtomicInput with
- * number-specific validation and keyboard handling.
- *
- * Features:
- * - Numeric keyboard (integer or decimal)
- * - Min/max validation
- * - Step increment support
- * - Automatic error states for invalid numbers
- * - Parsed number callback (onValueChange)
- * - Consistent styling with AtomicInput
- * - All AtomicInput features (variants, states, sizes)
- *
- * Usage:
- * ```tsx
- * const [age, setAge] = useState<number | null>(null);
- *
- * <AtomicNumberInput
- *   value={age?.toString() || ''}
- *   onValueChange={setAge}
- *   label="Age"
- *   min={0}
- *   max={150}
- *   helperText="Enter your age"
- * />
- * ```
- *
- * Why This Component:
- * - Separation of concerns (text vs number input)
- * - Built-in number validation
- * - Type-safe number callbacks
- * - Prevents non-numeric input via keyboard
- * - Consistent with AtomicInput styling
- *
- * @module AtomicNumberInput
- */
-import React, { useState, useEffect } from 'react';
-import { AtomicInput } from './AtomicInput';
-/**
- * AtomicNumberInput - Specialized numeric input component
- *
- * Wraps AtomicInput with:
- * - Numeric keyboard
- * - Number validation (min, max, format)
- * - Parsed number callbacks
- * - Automatic error states
- */
-export const AtomicNumberInput = ({ min, max, step = 1, allowDecimal = false, onValueChange, onTextChange, value = '', state: externalState, helperText: externalHelperText, ...props }) => {
-    const [internalError, setInternalError] = useState(undefined);
-    /**
-     * Validate number and return error message if invalid
-     */
-    const validateNumber = (text) => {
-        // Empty is valid (null value)
-        if (!text || text === '' || text === '-' || text === '.') {
-            return undefined;
-        }
-        // Parse number
-        const num = parseFloat(text);
-        // Check if valid number
-        if (isNaN(num)) {
-            return 'Invalid number';
-        }
-        // Check min constraint
-        if (min !== undefined && num < min) {
-            return `Minimum value is ${min}`;
-        }
-        // Check max constraint
-        if (max !== undefined && num > max) {
-            return `Maximum value is ${max}`;
-        }
-        return undefined;
-    };
-    /**
-     * Handle text change with validation
-     */
-    const handleChangeText = (text) => {
-        // Allow empty, minus sign, and decimal point during typing
-        if (text === '' || text === '-' || (allowDecimal && text === '.')) {
-            setInternalError(undefined);
-            onTextChange?.(text);
-            onValueChange?.(null);
-            return;
-        }
-        // Validate format
-        const decimalRegex = allowDecimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
-        if (!decimalRegex.test(text)) {
-            // Invalid format, don't update
-            return;
-        }
-        // Validate number
-        const error = validateNumber(text);
-        setInternalError(error);
-        // Call text callback
-        onTextChange?.(text);
-        // Call value callback with parsed number
-        if (!error && text !== '' && text !== '-' && text !== '.') {
-            const num = parseFloat(text);
-            onValueChange?.(isNaN(num) ? null : num);
-        }
-        else {
-            onValueChange?.(null);
-        }
-    };
-    /**
-     * Validate on mount and when value/constraints change
-     */
-    useEffect(() => {
-        if (value) {
-            const error = validateNumber(value.toString());
-            setInternalError(error);
-        }
-        else {
-            setInternalError(undefined);
-        }
-    }, [value, min, max]);
-    // Determine final state (external state overrides internal error)
-    const finalState = externalState || (internalError ? 'error' : 'default');
-    // Determine final helper text (internal error overrides external helper)
-    const finalHelperText = internalError || externalHelperText;
-    return (<AtomicInput {...props} value={value} onChangeText={handleChangeText} keyboardType={allowDecimal ? 'decimal-pad' : 'numeric'} state={finalState} helperText={finalHelperText}/>);
-};