Learn how to customize the appearance of registration components to match your app's design.

Theme Customization

Override theme colors and styles:

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

export const ThemedRegistration = () => {
  return (
    <Register
      style={{
        backgroundColor: "#F8F9FA",
      }}
      contentContainerStyle={{
        padding: 24,
        gap: 32,
      }}
    >
      <Register.Header
        style={{
          alignItems: "center",
          paddingVertical: 20,
        }}
      >
        <Register.Header.Title
          style={{
            color: "#1976D2",
            fontSize: 28,
            fontWeight: "bold",
          }}
        />
        <Register.Header.Description
          style={{
            color: "#757575",
            textAlign: "center",
            fontSize: 16,
          }}
        />
      </Register.Header>

      <Register.EmailForm
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Success:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        <Register.EmailForm.Inputs
          style={{ gap: 20 }}
          inputProps={{
            mode: "outlined",
            outlineColor: "#E0E0E0",
            activeOutlineColor: "#1976D2",
            textColor: "#212121",
            placeholderTextColor: "#9E9E9E",
            containerStyle: {
              backgroundColor: "#FFFFFF",
              borderRadius: 12,
            },
          }}
        />

        <Register.EmailForm.RegisterButton
          style={{
            backgroundColor: "#1976D2",
            borderRadius: 12,
            paddingVertical: 16,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "600",
          }}
        />
      </Register.EmailForm>
    </Register>
  );
};

Material Design Styling

Apply Material Design principles:

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

export const MaterialRegistration = () => {
  return (
    <Register
      contentContainerStyle={{
        padding: 16,
        gap: 24,
      }}
    >
      <Register.Header>
        <Register.Header.Title
          style={{
            fontSize: 24,
            fontWeight: "400",
            color: "#1976D2",
            letterSpacing: 0.15,
          }}
        />
        <Register.Header.Description
          style={{
            fontSize: 14,
            color: "#616161",
            lineHeight: 20,
            letterSpacing: 0.25,
          }}
        />
      </Register.Header>

      <Register.EmailForm
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Success:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        <Register.EmailForm.Inputs
          inputProps={{
            mode: "outlined",
            outlineStyle: { borderWidth: 1 },
            outlineColor: "#E0E0E0",
            activeOutlineColor: "#1976D2",
            contentStyle: {
              fontSize: 16,
              lineHeight: 24,
            },
            style: {
              backgroundColor: "#FAFAFA",
            },
          }}
        />

        <Register.EmailForm.RegisterButton
          mode="contained"
          style={{
            borderRadius: 4,
            elevation: 2,
          }}
          contentStyle={{
            paddingVertical: 8,
          }}
          labelStyle={{
            fontSize: 14,
            fontWeight: "500",
            letterSpacing: 1.25,
            textTransform: "uppercase",
          }}
        />
      </Register.EmailForm>
    </Register>
  );
};

iOS-Style Design

Create an iOS-inspired registration interface:

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

export const IOSRegistration = () => {
  return (
    <Register
      style={{
        backgroundColor: "#F2F2F7",
      }}
      contentContainerStyle={{
        padding: 20,
        gap: 30,
      }}
    >
      <Register.Header
        style={{
          alignItems: "center",
          paddingTop: 40,
        }}
      >
        <Register.Header.Title
          style={{
            fontSize: 34,
            fontWeight: "700",
            color: "#000000",
            textAlign: "center",
          }}
        />
        <Register.Header.Description
          style={{
            fontSize: 17,
            color: "#8E8E93",
            textAlign: "center",
            marginTop: 8,
          }}
        />
      </Register.Header>

      <Register.EmailForm
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Success:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        <Register.EmailForm.Inputs
          style={{ gap: 16 }}
          inputProps={{
            mode: "outlined",
            outlineStyle: { borderWidth: 0 },
            style: {
              backgroundColor: "#FFFFFF",
              borderRadius: 10,
              fontSize: 17,
            },
            contentStyle: {
              paddingHorizontal: 16,
              paddingVertical: 12,
            },
          }}
        />

        <Register.EmailForm.RegisterButton
          mode="contained"
          style={{
            backgroundColor: "#007AFF",
            borderRadius: 10,
            marginTop: 20,
          }}
          contentStyle={{
            paddingVertical: 12,
          }}
          labelStyle={{
            fontSize: 17,
            fontWeight: "600",
            color: "#FFFFFF",
          }}
        />
      </Register.EmailForm>
    </Register>
  );
};

Dark Mode Support

Implement dark mode styling:

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

export const DarkModeRegistration = () => {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === "dark";

  const colors = {
    background: isDark ? "#121212" : "#FFFFFF",
    surface: isDark ? "#1E1E1E" : "#F5F5F5",
    primary: isDark ? "#BB86FC" : "#6200EE",
    text: isDark ? "#FFFFFF" : "#000000",
    textSecondary: isDark ? "#B3B3B3" : "#666666",
    inputBackground: isDark ? "#2C2C2C" : "#FFFFFF",
    border: isDark ? "#373737" : "#E0E0E0",
  };

  return (
    <Register
      style={{
        backgroundColor: colors.background,
      }}
      contentContainerStyle={{
        padding: 20,
        gap: 28,
      }}
    >
      <Register.Header>
        <Register.Header.Title
          style={{
            color: colors.text,
            fontSize: 26,
            fontWeight: "600",
          }}
        />
        <Register.Header.Description
          style={{
            color: colors.textSecondary,
            fontSize: 16,
          }}
        />
      </Register.Header>

      <Register.EmailForm
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Success:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        <Register.EmailForm.Inputs
          inputProps={{
            mode: "outlined",
            outlineColor: colors.border,
            activeOutlineColor: colors.primary,
            textColor: colors.text,
            style: {
              backgroundColor: colors.inputBackground,
            },
            theme: {
              colors: {
                placeholder: colors.textSecondary,
                text: colors.text,
                primary: colors.primary,
              },
            },
          }}
        />

        <Register.EmailForm.RegisterButton
          style={{
            backgroundColor: colors.primary,
            borderRadius: 8,
          }}
          labelStyle={{
            color: "#FFFFFF",
            fontWeight: "600",
          }}
        />
      </Register.EmailForm>
    </Register>
  );
};

Custom Card Layout

Create a card-based registration interface:

import React from "react";
import { View, StyleSheet } from "react-native";
import { Register } from "@ovok/native";

export const CardRegistration = () => {
  return (
    <Register style={styles.container} contentContainerStyle={styles.content}>
      <View style={styles.card}>
        <Register.Header style={styles.header}>
          <Register.Header.Title style={styles.title} />
          <Register.Header.Description style={styles.description} />
        </Register.Header>

        <Register.EmailForm
          onSuccess={(response) => console.log("Success:", response)}
          onError={(error) => console.error("Error:", error)}
          tenantCode="your-tenant-code"
        >
          <Register.EmailForm.Inputs
            style={styles.inputs}
            inputProps={{
              mode: "outlined",
              outlineColor: "#E8E8E8",
              activeOutlineColor: "#007AFF",
              style: styles.input,
            }}
          />

          <Register.EmailForm.RegisterButton
            style={styles.button}
            contentStyle={styles.buttonContent}
          />
        </Register.EmailForm>
      </View>

      <Register.Footer />
      <Register.LoginLink />
    </Register>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#F0F0F0",
  },
  content: {
    padding: 20,
    justifyContent: "center",
    minHeight: "100%",
  },
  card: {
    backgroundColor: "#FFFFFF",
    borderRadius: 16,
    padding: 24,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  header: {
    alignItems: "center",
    marginBottom: 32,
  },
  title: {
    fontSize: 24,
    fontWeight: "700",
    color: "#1A1A1A",
  },
  description: {
    fontSize: 16,
    color: "#666666",
    textAlign: "center",
    marginTop: 8,
  },
  inputs: {
    gap: 20,
  },
  input: {
    backgroundColor: "#FAFAFA",
  },
  button: {
    backgroundColor: "#007AFF",
    borderRadius: 12,
    marginTop: 24,
  },
  buttonContent: {
    paddingVertical: 4,
  },
  footer: {
    marginTop: 24,
    alignItems: "center",
  },
});

Styling Features

Theme Integration: Works with your app's theme system
Component-level Styling: Style individual components
Input Customization: Full control over input field appearance
Dark Mode Support: Built-in support for dark/light modes
Layout Flexibility: Customize spacing, alignment, and structure
Material Design: Easy Material Design implementation
iOS Guidelines: Support for iOS design principles

Best Practices

Consistency: Maintain consistent styling across your app
Accessibility: Ensure proper contrast ratios and touch targets
Responsive: Design for different screen sizes
Theme Support: Use theme variables for better maintainability
Platform Guidelines: Follow platform-specific design guidelines

Next Steps

Custom Validation - Add custom validation styling
Pre-filled Data - Style forms with default values

Custom Styling

Theme Customization

Material Design Styling

iOS-Style Design

Dark Mode Support

Custom Card Layout

Styling Features

Best Practices

Next Steps

On this page

Custom Styling

Theme CustomizationCopy Anchor Link

Material Design StylingCopy Anchor Link

iOS-Style DesignCopy Anchor Link

Dark Mode SupportCopy Anchor Link

Custom Card LayoutCopy Anchor Link

Styling FeaturesCopy Anchor Link

Best PracticesCopy Anchor Link

Next StepsCopy Anchor Link

On this page

Theme Customization

Material Design Styling

iOS-Style Design

Dark Mode Support

Custom Card Layout

Styling Features

Best Practices

Next Steps