@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.
71 lines • 2.91 kB
TypeScript
/**
* AppBar
*
* A customizable application top bar component.
* - Supports theme-based variants (`default`, `transparent`, `elevated`)
* or custom variants defined in the `ThemeProvider`.
* - Provides optional left icon, right icon, centered title and optional subTitle.
* - Ensures title (+ subTitle if provided) always remain horizontally centered regardless of icons.
*
* Author: Geeky Hawks FZE LLC
*/
import React from "react";
import { StyleProp, ViewStyle, TextStyle } from "react-native";
import { DefaultAppBarVariants } from "../../theme";
/**
* Props for custom AppBar component
*
* - **containerStyle**: optional override styles for the app bar container.
* - **leftIcon**: custom icon to display on the left.
* - **leftIconStyle**: override styles for left icon container.
* - **onLeftIconPress**: callback when left icon is pressed.
* - **onRightIconPress**: callback when right icon is pressed.
* - **rightIcon**: custom icon to display on the right.
* - **rightIconStyle**: override styles for right icon container.
* - **subTitle**: optional text displayed below the title.
* - **subTitleTextStyle**: optional override styles for the subtitle text.
* - **title**: text to display as the title (centered by default).
* - **titleTextStyle**: optional override styles for the title text.
* - **variant**: choose from default (`default`, `transparent`, `elevated`)
* or a custom variant defined in the `ThemeProvider`.
*/
export interface Props {
/** Style for the outer container */
containerStyle?: StyleProp<ViewStyle>;
/** Custom left icon (before title) */
leftIcon?: React.ReactNode;
/** Style for the left icon container */
leftIconStyle?: StyleProp<ViewStyle>;
/** Click handler for left icon */
onLeftIconPress?: () => void;
/** Click handler for right icon */
onRightIconPress?: () => void;
/** Custom right icon (after title) */
rightIcon?: React.ReactNode;
/** Style for the right icon container */
rightIconStyle?: StyleProp<ViewStyle>;
/** Optional Sub Title text to display in the center */
subTitle?: string;
/** Style for the sub title text */
subTitleTextStyle?: StyleProp<TextStyle>;
/** Title text to display in the center */
title?: string;
/** Style for the title text */
titleTextStyle?: StyleProp<TextStyle>;
/** Choose from default or custom app bar variants */
variant?: DefaultAppBarVariants | (string & {});
}
/**
* AppBar
*
* Renders a themed top application bar.
* - Left section: optional left icon.
* - Center section: title, always horizontally centered.
* - Right section: optional right icon.
*
* Uses `resolveThemeColor` to map theme tokens (e.g., `primary`, `onPrimary`)
* into actual color values from the active theme.
*/
declare const AppBar: React.FC<Props>;
export default AppBar;
//# sourceMappingURL=AppBar.d.ts.map