Register.EmailForm.RegisterButton

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

UsageCopy Anchor Link

Basic ImplementationCopy Anchor Link

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

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

export default BasicRegisterButton;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/auth API reference.

Button StatesCopy Anchor Link

Normal StateCopy Anchor Link

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

Loading StateCopy Anchor Link

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

Error StateCopy Anchor Link

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

FeaturesCopy Anchor Link

• 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 StylesCopy Anchor Link

Button StylesCopy Anchor Link

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

Error HandlingCopy Anchor Link

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.

LocalizationCopy Anchor Link

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

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

AccessibilityCopy Anchor Link

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

Test IDsCopy Anchor Link

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 IntegrationCopy Anchor Link

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.