Register.EmailForm.RegisterButton

The register button component handles form submission with loading states and error display.

Usage

Basic Implementation

import { Register } from "@ovok/native";
import React from "react";

const BasicRegisterButton = () => {
  return (
    <Register.EmailForm>
      <Register.EmailForm.RegisterButton />
    </Register.EmailForm>
  );
};

export default BasicRegisterButton;

Props

Extends all ButtonProps from react-native-paper except children.

Prop	Type	Default	Description
containerStyle	StyleProp<ViewStyle>	undefined	Style for the button container
helperTextProps	Omit<HelperTextProps, "children" | "type">	undefined	Props for error text display
testID	string	"register-button"	Test identifier base

Button States

Normal State

• Displays "Register" text (from "register.button" translation)
• Full width button with contained mode
• Uses theme's primary color

Loading State

• Shows loading spinner
• Button is disabled during submission
• Text remains visible alongside spinner

Error State

• Button returns to normal state
• Error message appears below button
• Uses theme's error color for helper text

Features

• Auto Loading: Automatically shows loading state during form submission
• Error Display: Shows validation and submission errors below button
• Theme Integration: Uses theme colors and typography
• Full Width: Button spans the full width of its container
• Accessibility: Proper button semantics and error announcements
• TypeScript: Full type safety for all props

Default Styles

Button Styles

const styles = {
  button: {
    width: "100%",
  },
  buttonText: {
    fontFamily: "DMSans_700Bold",
    fontSize: 16,
    color: theme.colors.onPrimary,
  },
};

Error Handling

The button automatically displays errors from:

1. Form Validation: Field-level validation errors
2. Submission Errors: API or network errors
3. General Errors: Unexpected errors during registration

Error messages are shown using the HelperText component with error styling.

Localization

The button text uses the translation key "register.button". Make sure this key is defined:

{
  "register": {
    "button": "Create Account"
  }
}

Accessibility

• Proper button role for screen readers
• Loading state announcements
• Error message accessibility
• Keyboard navigation support
• Touch target meets minimum size requirements

Test IDs

The component provides several test IDs for testing:

• ${testID}-container: Button container
• ${testID}-button: The button element
• ${testID}-helper-text: Error text (when visible)

Default testID is "register-button".

Form Integration

The button automatically integrates with the form context:

• Accesses form submission state
• Triggers form validation and submission
• Displays form-level errors
• Manages loading states during async operations

No additional configuration is needed when used within Register.EmailForm.