Architecture¶

This library is a pure JavaScript React Native hooks package. It has no native modules, no codegen, and no internal paths exposed to consumers.

Package boundaries¶

flowchart LR
    subgraph public["Public API"]
        INDEX["medhira-rn-typescript-hooks"]
        TYPES["Exported TypeScript types"]
    end

    subgraph hooks["Validation hooks"]
        UVF["useValidateForm"]
        UVS["useValidateSelect"]
        UVC["useValidateCheckBox"]
    end

    subgraph peer["Peer dependency"]
        MRT["medhira-react-typescript-hooks"]
    end

    INDEX --> UVF & UVS & UVC
    INDEX --> TYPES
    UVF & UVS & UVC --> MRT

Published entry point: medhira-rn-typescript-hooks only.

Do not import from:

lib/internal/*
Build artifacts under lib/commonjs or lib/module directly
Any path not documented in the public API

Form validation flow¶

sequenceDiagram
    participant User
    participant Input as TextInput
    participant Hook as useValidateForm
    participant Reducer as useDefaultReducer

    User->>Input: focus / type / blur
    Input->>Hook: handlers
    Hook->>Reducer: patchState({ inputValue, isFocus, isBlur })
    Hook->>Hook: validateFormValue()
    Hook->>Reducer: patchState({ isValid, customError })
    Hook-->>Input: value, hasError, customError, isValid

Select validation flow¶

stateDiagram-v2
    [*] --> Idle
    Idle --> Open: onOpenCallBack
    Open --> Selecting: onChangeValueCallBack
    Selecting --> Valid: value meets rules
    Selecting --> Invalid: missing / min-max violation
    Open --> Blurred: onCloseCallBack
    Blurred --> Validating: re-validate
    Validating --> Valid
    Validating --> Invalid
    Valid --> [*]: reset()
    Invalid --> [*]: reset()

Checkbox validation flow¶

flowchart TD
    START["useValidateCheckBox(options)"] --> INIT["Initialize isChecked from value prop"]
    INIT --> REQ{isRequired?}
    REQ -->|yes| CHECK{isChecked?}
    REQ -->|no| OPTIONAL["isValid = true"]
    CHECK -->|yes| VALID["isValid = true, color = checkedColor"]
    CHECK -->|no| INVALID["isValid = false, customError set"]
    VALID --> TOGGLE["onValueChangeHandler toggles state"]
    INVALID --> TOGGLE
    OPTIONAL --> TOGGLE

State management¶

All three hooks use useDefaultReducer from medhira-react-typescript-hooks for shallow state updates via patchState.

This keeps validation hooks small and consistent while leaving reducer internals inside the peer package.

Build output¶

The published npm package includes only:

lib/ — compiled ESM, CJS, and TypeScript declarations
README.md
LICENSE

Source files, tests, and documentation build artifacts are not published.