Register.EmailForm

The email form components provide a complete registration interface with validation, error handling, and customization options.

Components Overview

The Register.EmailForm module includes several components that work together to create a complete registration form:

• Register.EmailForm.Inputs: Name, surname, email, and password input fields
• Register.EmailForm.RegisterButton: Submit button with loading states
• Register.EmailForm.Spacing: Layout spacing component

Quick Usage

Complete Form

The easiest way to implement email registration:

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

const QuickRegistrationForm = () => {
  return (
    <Register.EmailForm
      tenantCode="your-tenant-code"
      onSuccess={(response) =>
        console.log("Registration successful:", response)
      }
      onError={(error) => console.error("Registration failed:", error)}
    >
      <Register.EmailForm.Inputs />
      <Register.EmailForm.RegisterButton />
    </Register.EmailForm>
  );
};

export default QuickRegistrationForm;

Props

Prop	Type	Required	Default	Description
tenantCode	string	✓	-	Organization tenant code for multi-tenancy support
onSuccess	(response: AuthResponse) => void	-	undefined	Callback for successful registration
onError	(error: Error) => void	-	undefined	Callback for registration errors
onSubmit	(values, formikHelpers) => Promise<void>	-	undefined	Custom submit handler (overrides default logic)
customValidations	{ [key]: Yup.StringSchema | Function }	-	undefined	Custom validation rules for form fields
defaultValues	Partial<Omit<RegisterFormValues, "submit">>	-	undefined	Default values for form fields (excluding submit errors)
style	StyleProp<ViewStyle>	-	undefined	Container style overrides
testID	string	-	undefined	Test identifier for automation
children	ReactNode	✓	-	Child components (Inputs, Button, etc.)

Note: Either use onSuccess/onError for default registration or onSubmit for custom handling. Both approaches cannot be used together.

Form Validation

The form uses Yup and Formik for validation with these default rules:

• Name: Required, 2-25 characters
• Surname: Required, 2-25 characters
• Email: Valid email format, required
• Password: Minimum 8 characters, maximum 64 characters, required
• Password Confirmation: Must match password

Custom Validation

import * as Yup from "yup";

const customValidations = {
  name: Yup.string()
    .required("Name is required")
    .min(3, "Name must be at least 3 characters"),
  email: Yup.string()
    .email("Invalid email format")
    .required("Email is required"),
  password: (existingRule) =>
    existingRule
      .min(10, "Minimum 10 characters")
      .matches(/[A-Z]/, "Must contain uppercase letter")
      .matches(/[0-9]/, "Must contain a number"),
};

<Register.EmailForm
  customValidations={customValidations}
  tenantCode="your-tenant-code"
  {...otherProps}
/>;

Error Handling

The form provides comprehensive error handling:

• Validation Errors: Field-level validation messages
• Network Errors: API call failures
• Registration Errors: Existing email, invalid data
• General Errors: Unexpected errors

const handleError = (error) => {
  switch (error.code) {
    case "email_already_exists":
      // Show specific error for existing email
      break;
    case "network_error":
      // Show network error message
      break;
    default:
    // Show general error message
  }
};

Custom Form Handling

For custom registration logic, use the onSubmit prop:

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

export const CustomRegistration = () => {
  const handleCustomSubmit = async (values, formikHelpers) => {
    try {
      // Custom registration logic
      const result = await myCustomRegisterAPI(values);

      // Handle success
      console.log("Registration successful:", result);
    } catch (error) {
      // Handle errors
      formikHelpers.setFieldError("submit", "Registration failed");
    }
  };

  return (
    <Register.EmailForm
      onSubmit={handleCustomSubmit}
      tenantCode="your-tenant-code"
    >
      <Register.EmailForm.Inputs />
      <Register.EmailForm.RegisterButton />
    </Register.EmailForm>
  );
};

Features

• Built-in Validation: Yup and Formik-based validation with custom rules support
• Loading States: Automatic loading indicators during submission
• Error Display: User-friendly error messages
• Password Confirmation: Automatic password matching validation
• Pre-filled Data: Support for default values
• Theme Integration: Consistent styling with app theme
• Accessibility boundary: Forward input props and provide app-owned labels, hints, and announcements where required
• TypeScript: Full type safety throughout

Form Fields

Required Fields

• Name: User's first name
• Surname: User's last name
• Email: Valid email address
• Password: Secure password
• Password Confirm: Password confirmation (when not pre-filled)

Conditional Fields

Fields are conditionally rendered based on defaultValues. If a field has a default value, it won't be shown in the form.

Password Security

The form includes password visibility toggles for both password and password confirmation fields, using eye/eye-slash icons for better user experience.