@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.
60 lines • 2.44 kB
TypeScript
/**
* Switch
*
* A themed wrapper around React Native's `Switch` component.
* - Supports theme-based color variants for track and thumb.
* - Optional label displayed to the right of the switch.
* - Handles disabled state and toggling behavior.
*
* Author: Geeky Hawks FZE LLC
*/
import React from "react";
import { StyleProp, ViewStyle, TextStyle } from "react-native";
import { DefaultSwitchColors, SwitchColorVariants } from "../../theme";
/**
* Props for the Switch component
*
* - **accessibilityLabel**: Accessibility label for screen readers
* - **color**: theme-based or custom color variant name.
* - **colorVariants**: optional collection of color variant styles, injected from parent if needed.
* - **containerStyle**: optional style for the outer container.
* - **disabled**: disables user interaction and reduces opacity.
* - **label**: optional text label displayed next to the switch.
* - **labelTextStyle**: optional override style for the label text.
* - **onValueChange**: callback triggered when the switch is toggled.
* - **value**: boolean state of the switch.
*/
export interface Props {
/** Accessibility label for screen readers */
accessibilityLabel?: string;
/** Theme-based or custom color variant name */
color?: DefaultSwitchColors | (string & {});
/** Optional collection of color variant styles */
colorVariants?: SwitchColorVariants;
/** Optional style for the outer container */
containerStyle?: StyleProp<ViewStyle>;
/** Disable interaction and reduce opacity */
disabled?: boolean;
/** Optional text label displayed next to the switch */
label?: string;
/** Optional override style for the label text */
labelTextStyle?: StyleProp<TextStyle>;
/** Callback triggered when the switch is toggled */
onValueChange: (value: boolean) => void;
/** Current boolean value of the switch */
value: boolean;
}
/**
* Switch
*
* Renders a themed toggle switch for boolean selection.
* - Integrates with `SwitchGroup` for multi-switch group management.
* - Can be used standalone with `value` and `onValueChange`.
* - Uses color variants (`switchColorVariants`) provided by the active theme
* for consistent styling.
*
* Built on top of React Native's `Switch` component with additional theming and label support.
*/
declare const Switch: React.FC<Props>;
export default Switch;
//# sourceMappingURL=Switch.d.ts.map