Skip to main content

SignIn.EmailForm.Spacing

Layout spacing component that provides flexible vertical spacing using flex-based layout.

Quick Example​

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

// Static styles outside component
const styles = StyleSheet.create({
  customSpacing: {
    backgroundColor: "transparent",
  },
  container: {
    flexGrow: 1,
  },
});

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

  return (
    <SignIn.EmailForm
      loginType="Patient"
      tenantCode="your-tenant-code"
      style={styles.container}
    >
      <SignIn.EmailForm.Inputs />
      <SignIn.EmailForm.Spacing
        percentage={2}
        style={[
          styles.customSpacing,
          {
            borderRadius: theme.borderRadius(1),
          },
        ]}
      />
      <SignIn.EmailForm.ForgotPassword />
      <SignIn.EmailForm.Spacing percentage={1} />
      <SignIn.EmailForm.SigninButton />
    </SignIn.EmailForm>
  );
};

export default SpacingExample;

Props​

PropTypeRequiredDefaultDescription
percentagenumber✓-Flex value for proportional space

Inherits all ViewProps from react-native

Component Behavior​

The component uses flex: percentage to create proportional spacing in flex layouts. Higher percentage values create more space relative to other flex items.

Styling​

Theme Variables Used​

  • No specific theme variables used by default
  • Inherits styling capabilities from React Native View component