SignIn.LoginWithSeparator

Visual separator component that divides email login from social login options with localized separator text.

Quick ExampleCopy Anchor Link

import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";

const SeparatorExample = () => {
  const theme = useAppTheme();

  return (
    <SignIn.LoginWithSeparator
      textColor={theme.colors.onSurfaceVariant}
      lineColor={theme.colors.outline}
      testID="login-separator"
    />
  );
};

export default SeparatorExample;

PropsCopy Anchor Link

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

LocalizationCopy Anchor Link

The component uses this translation key:

{
  "sign-in": {
    "or-login-with": "Or sign in with"
  }
}

• sign-in.or-login-with - Separator text displayed between email form and social logins

Component BehaviorCopy Anchor Link

The component renders a horizontal layout with two flex lines and centered text, using theme spacing for consistent gap between elements.

StylingCopy Anchor Link

Theme Variables UsedCopy Anchor Link

• theme.spacing(4) - Gap spacing between separator elements
• theme.colors.onSurfaceDisabled - Default text color
• theme.colors.outlineVariant - Default line color

Related ComponentsCopy Anchor Link

• SignIn - Main sign-in component container
• SignIn.SocialLogins - Social logins container