Skip to main content

SignIn Container

The main container component that wraps all sign-in related functionality. It provides a scrollable interface with keyboard handling and safe area support, serving as the foundation for building complete sign-in experiences.

Quick Start Example​

import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet } from "react-native";

// Static styles outside component
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

const LoginScreen = () => {
  const { t } = useTranslation();
  const theme = useAppTheme();

  return (
    <SignIn
      style={[
        styles.container,
        {
          backgroundColor: theme.colors.background,
        },
      ]}
      contentContainerStyle={{
        padding: theme.spacing(3),
        gap: theme.spacing(4),
      }}
    >
      <SignIn.Header>
        <SignIn.Header.Title>{t("auth.signIn.title")}</SignIn.Header.Title>
        <SignIn.Header.Description>
          {t("auth.signIn.description")}
        </SignIn.Header.Description>
      </SignIn.Header>

      <SignIn.EmailForm
        loginType="Patient"
        tenantCode="your-tenant-code"
        onSuccess={(response) => {
          // Handle successful authentication
        }}
        onError={(error) => {
          // Handle authentication error
        }}
      >
        <SignIn.EmailForm.Inputs />
        <SignIn.EmailForm.SigninButton />
      </SignIn.EmailForm>
    </SignIn>
  );
};

export default LoginScreen;

Props​

This component extends KeyboardAwareScrollView which inherits all ScrollView props and adds keyboard-aware functionality.

PropTypeRequiredDefaultDescription
childrenReactNode✓-SignIn child components
styleViewStyle-undefinedContainer style overrides
contentContainerStyleViewStyle-undefinedContent container style overrides
...scrollViewPropsScrollViewProps--All ScrollView props are supported

For complete API reference, see the KeyboardAwareScrollView Props documentation.

Child Components​