Skip to main content

ResetPassword.Header.Description

The description component for the password reset header, providing instructional text to guide users through the reset process.

Usage​

Default Description​

import { ResetPassword } from "@ovok/native";

const DefaultDescription = () => {
  return <ResetPassword.Header.Description />;
};

export default DefaultDescription;

Props​

Extends all TextProps from react-native-paper:

PropTypeDefaultDescription
childrenReactNodet("reset-password.subtitle")Custom description text
styleStyleProp<TextStyle>-Custom text styling
variantMD3TypescaleKey-Typography variant
testIDstring-Test identifier

Inherited Props​

All props from TextProps are supported:

  • numberOfLines - Limit number of lines
  • ellipsizeMode - Text truncation behavior
  • onPress - Touch handler (if needed)
  • accessible - Accessibility flag
  • And all other TextProps

Default Styles​

The description uses these default styles:

const defaultStyles = {
  fontSize: 16,
  fontFamily: "DMSans_400Regular",
  lineHeight: 24,
  color: colors.onSurfaceDisabled, // Muted text color
};

Features​

Typography​

Uses consistent secondary typography:

// Default font: DMSans_400Regular
// Size: 16px
// Line height: 24px (1.5 ratio)
// Color: Muted/disabled surface color

Localization​

Automatically uses translation key:

// Default translation key: "reset-password.subtitle"
// Fallback: Displays translation key if not found

Theme Integration​

Uses theme colors for consistent appearance:

// Uses theme.colors.onSurfaceDisabled by default
// Provides appropriate contrast with background

Localization Keys​

{
  "reset-password": {
    "subtitle": "Enter your email address and we'll send you instructions to reset your password."
  }
}