Skip to main content

SignIn.LoginWithSeparator

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

Quick Example​

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;

Props​

PropTypeRequiredDefaultDescription
textColorstring-theme.colors.onSurfaceDisabledText color for separator
lineColorstring-theme.colors.outlineVariantColor for separator lines
testIDstring--Test identifier

Localization​

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 Behavior​

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

Styling​

Theme Variables Used​

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