Skip to main content

Custom Styling

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​

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

Next Steps​