Classic single form

A classic sign-up Screen on one scroll: Apple and Google on top, "or", then name, email and password, a terms Checkbox with Terms and Privacy Policy links, Create account, and a Sign in link.

Blockauth

Style

Light

Dark

Your app is ready.

Inter body text, Inter headings.

smmdlgxl

you@example.com

Continue

Default Preset a0: Vega, neutral, neutral accent, default radius, Inter.Change Preset

Installation

$npx nativecn-cli@latest add sign-up-01 --route "(auth)/sign-up"

--route "(auth)/sign-up" is the Block's suggested route: change it to put the Screen somewhere else in your app folder.
In a project with the feature Structure, also pass --feature <name> (for example --feature auth).
add never overwrites an existing route file.

Also installs: theme, container, text, button, form-field, input, focus-chain, checkbox, icon, separator, toast.

Packages: react-hook-form@^7.89.0, zod@^4.6.5, @hookform/resolvers@^5.9.1, lucide-react-native@^1.51.0, react-native-svg.

What makes it different

Social on top, then name, email, password and a terms Checkbox; one form.

Block Variants

sign-up-01 (this page) – Classic single form: Social on top, then name, email, password and a terms Checkbox; one form.
sign-up-02 – Step-by-step wizard: Progress bar plus one question per screen: email → name → password → verify code.
sign-up-03 – Social-first + verify: Brand-led and passwordless; Apple/Google lead, and the email path sends an InputOTP code.

Props

Prop	Type and description
`onSubmit`	(values: { name, email, password }) => void \| Promise<void>: create the account; throw to show the error as a toast, resolve for an "Account created" toast
`onSocialSignIn`	(provider: "apple" \| "google") => void \| Promise<void>: run that provider's sign-up; a thrown error becomes a toast
`onTermsPress`	() => void: the Terms link under the checkbox
`onPrivacyPress`	() => void: the Privacy Policy link under the checkbox
`onSignIn`	() => void: the Sign in link

Accessibility

"Create an account" has role heading; the lines around "or" are decorative.
Each field is in a FormField: its label is the field's accessible name, and a validation error becomes its hint and is announced once.
Errors from your callbacks and the success message are toast()s, which screen readers announce.
The submit Button is announced busy while your callback runs.
The password field's hint is "At least 8 characters." until it has an error.
The terms Checkbox is named "I agree to the Terms and Privacy Policy"; its error is its hint and is announced. The dot between the Terms and Privacy Policy links is hidden.
Apple and Google are labelled Buttons ("Continue with Apple", "Continue with Google"); their logos are decorative.

Notes

Render it from a route: export default function Screen() { return <SignUp01 onSubmit={signUp} />; }. The name, email and password (at least 8 characters) are validated with zod through react-hook-form (name and email trimmed), and the terms Checkbox must be ticked; its error appears under it. The three fields are in a FocusChain (Next, Next, then Done submits). Validation errors appear under each field. Errors thrown by your callbacks, and the success message, appear only as toast()s: render <Toaster /> in the root Layout (init and create already do). The Apple and Google logos are bundled SVGs in components/social-buttons.tsx; the buttons only call onSocialSignIn. The Block never talks to a server: wire your auth backend in the route file through the props, and keep any session or token in expo-secure-store, never AsyncStorage.

Source

The Vega Style's code, exactly as add copies it into your app.

{screens}/sign-up-01/index.tsx

import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import { View } from "react-native";
import { z } from "zod";

import { Button } from "@/components/button";
import { Checkbox } from "@/components/checkbox";
import { Container } from "@/components/container";
import { FormField } from "@/components/form-field";
import { Input } from "@/components/input";
import { FocusChain } from "@/components/primitives/focus-chain";
import { Separator } from "@/components/separator";
import { Text } from "@/components/text";
import { toast } from "@/components/toast";
import { createStyles } from "@/theme";

import { SocialButtons, type SocialProvider } from "./components/social-buttons";

export type { SocialProvider } from "./components/social-buttons";

// sign-up-01, classic single form: Apple and Google on top, "or", then name, email and password,
// a terms Checkbox and one Create account button. Edit the copy and the rules below; they are
// yours.

const schema = z.object({
  name: z.string().trim().min(1, "Enter your name"),
  email: z.string().trim().min(1, "Enter your email").pipe(z.email("Enter a valid email")),
  password: z.string().min(8, "Use at least 8 characters"),
  terms: z.boolean().refine((accepted) => accepted, "Accept the Terms to continue"),
});

/** What the user signed up with (the terms were accepted, or the form would not submit). */
export type SignUp01Values = Omit<z.infer<typeof schema>, "terms">;

export type SignUp01Props = {
  /**
   * Create the account with your auth backend. Throw to show the error as a toast; resolve and
   * an "Account created" toast appears (navigate away here). Store any session in
   * expo-secure-store.
   */
  onSubmit?: (values: SignUp01Values) => void | Promise<void>;
  /** Run the provider's sign-up. Throw to show the error as a toast. */
  onSocialSignIn?: (provider: SocialProvider) => void | Promise<void>;
  /** The Terms link under the checkbox. */
  onTermsPress?: () => void;
  /** The Privacy Policy link under the checkbox. */
  onPrivacyPress?: () => void;
  /** The Sign in link. */
  onSignIn?: () => void;
};

export function SignUp01({
  onSubmit,
  onSocialSignIn,
  onTermsPress,
  onPrivacyPress,
  onSignIn,
}: SignUp01Props) {
  const styles = useStyles();
  const {
    control,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { name: "", email: "", password: "", terms: false },
  });

  const submit = handleSubmit(async ({ terms: _accepted, ...values }) => {
    try {
      await onSubmit?.(values);
      toast.success("Account created");
    } catch (error) {
      toast.error("Couldn't create your account", { description: messageOf(error) });
    }
  });

  const socialSignIn = async (provider: SocialProvider) => {
    try {
      await onSocialSignIn?.(provider);
    } catch (error) {
      toast.error("Couldn't sign up", { description: messageOf(error) });
    }
  };

  return (
    <Container contentContainerStyle={styles.content}>
      <View style={styles.header}>
        <Text variant="h2">Create an account</Text>
        <Text variant="small" color="mutedForeground">
          Enter your details to get started.
        </Text>
      </View>

      <SocialButtons onPress={socialSignIn} disabled={isSubmitting} />

      <View style={styles.divider}>
        <Separator style={styles.line} />
        <Text variant="caption" color="mutedForeground">
          or
        </Text>
        <Separator style={styles.line} />
      </View>

      <FocusChain onSubmit={submit}>
        <Controller
          control={control}
          name="name"
          render={({ field, fieldState }) => (
            <FormField label="Full name" error={fieldState.error?.message}>
              <Input
                ref={field.ref}
                value={field.value}
                onChangeText={field.onChange}
                onBlur={field.onBlur}
                placeholder="Jane Doe"
                autoCapitalize="words"
                autoComplete="name"
                textContentType="name"
              />
            </FormField>
          )}
        />
        <Controller
          control={control}
          name="email"
          render={({ field, fieldState }) => (
            <FormField label="Email" error={fieldState.error?.message}>
              <Input
                ref={field.ref}
                value={field.value}
                onChangeText={field.onChange}
                onBlur={field.onBlur}
                placeholder="you@example.com"
                keyboardType="email-address"
                autoCapitalize="none"
                autoComplete="email"
                textContentType="emailAddress"
              />
            </FormField>
          )}
        />
        <Controller
          control={control}
          name="password"
          render={({ field, fieldState }) => (
            <FormField
              label="Password"
              description="At least 8 characters."
              error={fieldState.error?.message}
            >
              <Input
                ref={field.ref}
                value={field.value}
                onChangeText={field.onChange}
                onBlur={field.onBlur}
                secureTextEntry
                autoComplete="new-password"
                textContentType="newPassword"
              />
            </FormField>
          )}
        />
      </FocusChain>

      <View style={styles.terms}>
        <Controller
          control={control}
          name="terms"
          render={({ field, fieldState }) => (
            <FormField error={fieldState.error?.message}>
              <Checkbox
                checked={field.value}
                onCheckedChange={field.onChange}
                label="I agree to the Terms and Privacy Policy"
              />
            </FormField>
          )}
        />
        <View style={styles.legal}>
          <Button
            variant="link"
            size="sm"
            label="Terms"
            onPress={onTermsPress}
            style={styles.inline}
          />
          <Text variant="small" color="mutedForeground" aria-hidden>
            ·
          </Text>
          <Button
            variant="link"
            size="sm"
            label="Privacy Policy"
            onPress={onPrivacyPress}
            style={styles.inline}
          />
        </View>
      </View>

      <Button label="Create account" loading={isSubmitting} onPress={submit} />

      <View style={styles.footer}>
        <Text variant="small" color="mutedForeground">
          Already have an account?
        </Text>
        <Button variant="link" size="sm" label="Sign in" onPress={onSignIn} style={styles.inline} />
      </View>
    </Container>
  );
}

const useStyles = createStyles((t) => ({
  content: { paddingHorizontal: t.spacing[6], paddingTop: t.spacing[8] },
  header: { gap: t.spacing[1], marginBottom: t.spacing[2] },
  divider: { flexDirection: "row", alignItems: "center", gap: t.spacing[3] },
  line: { flex: 1 },
  terms: { gap: t.spacing[1] },
  legal: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: t.spacing[2],
  },
  footer: {
    marginTop: "auto",
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    justifyContent: "center",
    gap: t.spacing[1],
  },
  inline: { paddingHorizontal: 0 },
}));

/** The message to show for an error thrown by your callbacks. */
function messageOf(error: unknown): string {
  return error instanceof Error && error.message
    ? error.message
    : "Something went wrong. Try again.";
}

{screens}/sign-up-01/components/social-buttons.tsx

import type { LucideIcon, LucideProps } from "lucide-react-native";
import { forwardRef } from "react";
import { View } from "react-native";
import Svg, { Path } from "react-native-svg";

import { Button, type ButtonSize } from "@/components/button";
import { createStyles } from "@/theme";

export type SocialProvider = "apple" | "google";

// Brand logos, drawn to each brand's guidelines and shaped like a Lucide icon so Button can
// size and colour them. Apple's mark takes the text colour (black on light, white on dark);
// Google's "G" always keeps its four brand colours.

/** The Apple logo (Simple Icons, CC0), in the colour Button gives it. */
export const AppleLogo: LucideIcon = forwardRef<Svg, LucideProps>(function AppleLogo(
  { size = 24, color = "currentColor" },
  ref,
) {
  return (
    <Svg ref={ref} width={size} height={size} viewBox="0 0 24 24">
      <Path
        fill={color}
        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
      />
    </Svg>
  );
});

/** Google's four-colour "G" (its colours are part of the brand, so they never follow the Theme). */
export const GoogleLogo: LucideIcon = forwardRef<Svg, LucideProps>(function GoogleLogo(
  { size = 24 },
  ref,
) {
  return (
    <Svg ref={ref} width={size} height={size} viewBox="0 0 48 48">
      <Path
        fill="#EA4335"
        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
      />
      <Path
        fill="#4285F4"
        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
      />
      <Path
        fill="#FBBC05"
        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
      />
      <Path
        fill="#34A853"
        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
      />
    </Svg>
  );
});

const providers = [
  { provider: "apple", label: "Continue with Apple", icon: AppleLogo },
  { provider: "google", label: "Continue with Google", icon: GoogleLogo },
] as const satisfies { provider: SocialProvider; label: string; icon: LucideIcon }[];

const useStyles = createStyles((t) => ({
  root: { gap: t.spacing[3] },
}));

export type SocialButtonsProps = {
  /** Called with the provider; your code runs that provider's sign-in. */
  onPress: (provider: SocialProvider) => void;
  /** Default `md`. */
  size?: ButtonSize;
  disabled?: boolean;
};

/** "Continue with Apple" and "Continue with Google", as outline Buttons. */
export function SocialButtons({ onPress, size = "md", disabled = false }: SocialButtonsProps) {
  const styles = useStyles();
  return (
    <View style={styles.root}>
      {providers.map(({ provider, label, icon }) => (
        <Button
          key={provider}
          variant="outline"
          size={size}
          label={label}
          icon={icon}
          disabled={disabled}
          onPress={() => onPress(provider)}
        />
      ))}
    </View>
  );
}

{screens}/sign-up-01/index.tsx

import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import { View } from "react-native";
import { z } from "zod";

import { Button } from "@/components/button";
import { Checkbox } from "@/components/checkbox";
import { Container } from "@/components/container";
import { FormField } from "@/components/form-field";
import { Input } from "@/components/input";
import { FocusChain } from "@/components/primitives/focus-chain";
import { Separator } from "@/components/separator";
import { Text } from "@/components/text";
import { toast } from "@/components/toast";
import { createStyles } from "@/theme";

import { SocialButtons, type SocialProvider } from "./components/social-buttons";

export type { SocialProvider } from "./components/social-buttons";

// sign-up-01, classic single form: Apple and Google on top, "or", then name, email and password,
// a terms Checkbox and one Create account button. Edit the copy and the rules below; they are
// yours.

const schema = z.object({
  name: z.string().trim().min(1, "Enter your name"),
  email: z.string().trim().min(1, "Enter your email").pipe(z.email("Enter a valid email")),
  password: z.string().min(8, "Use at least 8 characters"),
  terms: z.boolean().refine((accepted) => accepted, "Accept the Terms to continue"),
});

/** What the user signed up with (the terms were accepted, or the form would not submit). */
export type SignUp01Values = Omit<z.infer<typeof schema>, "terms">;

export type SignUp01Props = {
  /**
   * Create the account with your auth backend. Throw to show the error as a toast; resolve and
   * an "Account created" toast appears (navigate away here). Store any session in
   * expo-secure-store.
   */
  onSubmit?: (values: SignUp01Values) => void | Promise<void>;
  /** Run the provider's sign-up. Throw to show the error as a toast. */
  onSocialSignIn?: (provider: SocialProvider) => void | Promise<void>;
  /** The Terms link under the checkbox. */
  onTermsPress?: () => void;
  /** The Privacy Policy link under the checkbox. */
  onPrivacyPress?: () => void;
  /** The Sign in link. */
  onSignIn?: () => void;
};

export function SignUp01({
  onSubmit,
  onSocialSignIn,
  onTermsPress,
  onPrivacyPress,
  onSignIn,
}: SignUp01Props) {
  const styles = useStyles();
  const {
    control,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { name: "", email: "", password: "", terms: false },
  });

  const submit = handleSubmit(async ({ terms: _accepted, ...values }) => {
    try {
      await onSubmit?.(values);
      toast.success("Account created");
    } catch (error) {
      toast.error("Couldn't create your account", { description: messageOf(error) });
    }
  });

  const socialSignIn = async (provider: SocialProvider) => {
    try {
      await onSocialSignIn?.(provider);
    } catch (error) {
      toast.error("Couldn't sign up", { description: messageOf(error) });
    }
  };

  return (
    <Container contentContainerStyle={styles.content}>
      <View style={styles.header}>
        <Text variant="h2">Create an account</Text>
        <Text variant="small" color="mutedForeground">
          Enter your details to get started.
        </Text>
      </View>

      <SocialButtons onPress={socialSignIn} disabled={isSubmitting} />

      <View style={styles.divider}>
        <Separator style={styles.line} />
        <Text variant="caption" color="mutedForeground">
          or
        </Text>
        <Separator style={styles.line} />
      </View>

      <FocusChain onSubmit={submit}>
        <Controller
          control={control}
          name="name"
          render={({ field, fieldState }) => (
            <FormField label="Full name" error={fieldState.error?.message}>
              <Input
                ref={field.ref}
                value={field.value}
                onChangeText={field.onChange}
                onBlur={field.onBlur}
                placeholder="Jane Doe"
                autoCapitalize="words"
                autoComplete="name"
                textContentType="name"
              />
            </FormField>
          )}
        />
        <Controller
          control={control}
          name="email"
          render={({ field, fieldState }) => (
            <FormField label="Email" error={fieldState.error?.message}>
              <Input
                ref={field.ref}
                value={field.value}
                onChangeText={field.onChange}
                onBlur={field.onBlur}
                placeholder="you@example.com"
                keyboardType="email-address"
                autoCapitalize="none"
                autoComplete="email"
                textContentType="emailAddress"
              />
            </FormField>
          )}
        />
        <Controller
          control={control}
          name="password"
          render={({ field, fieldState }) => (
            <FormField
              label="Password"
              description="At least 8 characters."
              error={fieldState.error?.message}
            >
              <Input
                ref={field.ref}
                value={field.value}
                onChangeText={field.onChange}
                onBlur={field.onBlur}
                secureTextEntry
                autoComplete="new-password"
                textContentType="newPassword"
              />
            </FormField>
          )}
        />
      </FocusChain>

      <View style={styles.terms}>
        <Controller
          control={control}
          name="terms"
          render={({ field, fieldState }) => (
            <FormField error={fieldState.error?.message}>
              <Checkbox
                checked={field.value}
                onCheckedChange={field.onChange}
                label="I agree to the Terms and Privacy Policy"
              />
            </FormField>
          )}
        />
        <View style={styles.legal}>
          <Button
            variant="link"
            size="sm"
            label="Terms"
            onPress={onTermsPress}
            style={styles.inline}
          />
          <Text variant="small" color="mutedForeground" aria-hidden>
            ·
          </Text>
          <Button
            variant="link"
            size="sm"
            label="Privacy Policy"
            onPress={onPrivacyPress}
            style={styles.inline}
          />
        </View>
      </View>

      <Button label="Create account" loading={isSubmitting} onPress={submit} />

      <View style={styles.footer}>
        <Text variant="small" color="mutedForeground">
          Already have an account?
        </Text>
        <Button variant="link" size="sm" label="Sign in" onPress={onSignIn} style={styles.inline} />
      </View>
    </Container>
  );
}

const useStyles = createStyles((t) => ({
  content: { paddingHorizontal: t.spacing[6], paddingTop: t.spacing[8] },
  header: { gap: t.spacing[1], marginBottom: t.spacing[2] },
  divider: { flexDirection: "row", alignItems: "center", gap: t.spacing[3] },
  line: { flex: 1 },
  terms: { gap: t.spacing[1] },
  legal: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: t.spacing[2],
  },
  footer: {
    marginTop: "auto",
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    justifyContent: "center",
    gap: t.spacing[1],
  },
  inline: { paddingHorizontal: 0 },
}));

/** The message to show for an error thrown by your callbacks. */
function messageOf(error: unknown): string {
  return error instanceof Error && error.message
    ? error.message
    : "Something went wrong. Try again.";
}

{screens}/sign-up-01/components/social-buttons.tsx

import type { LucideIcon, LucideProps } from "lucide-react-native";
import { forwardRef } from "react";
import { View } from "react-native";
import Svg, { Path } from "react-native-svg";

import { Button, type ButtonSize } from "@/components/button";
import { createStyles } from "@/theme";

export type SocialProvider = "apple" | "google";

// Brand logos, drawn to each brand's guidelines and shaped like a Lucide icon so Button can
// size and colour them. Apple's mark takes the text colour (black on light, white on dark);
// Google's "G" always keeps its four brand colours.

/** The Apple logo (Simple Icons, CC0), in the colour Button gives it. */
export const AppleLogo: LucideIcon = forwardRef<Svg, LucideProps>(function AppleLogo(
  { size = 24, color = "currentColor" },
  ref,
) {
  return (
    <Svg ref={ref} width={size} height={size} viewBox="0 0 24 24">
      <Path
        fill={color}
        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
      />
    </Svg>
  );
});

/** Google's four-colour "G" (its colours are part of the brand, so they never follow the Theme). */
export const GoogleLogo: LucideIcon = forwardRef<Svg, LucideProps>(function GoogleLogo(
  { size = 24 },
  ref,
) {
  return (
    <Svg ref={ref} width={size} height={size} viewBox="0 0 48 48">
      <Path
        fill="#EA4335"
        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
      />
      <Path
        fill="#4285F4"
        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
      />
      <Path
        fill="#FBBC05"
        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
      />
      <Path
        fill="#34A853"
        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
      />
    </Svg>
  );
});

const providers = [
  { provider: "apple", label: "Continue with Apple", icon: AppleLogo },
  { provider: "google", label: "Continue with Google", icon: GoogleLogo },
] as const satisfies { provider: SocialProvider; label: string; icon: LucideIcon }[];

const useStyles = createStyles((t) => ({
  root: { gap: t.spacing[3] },
}));

export type SocialButtonsProps = {
  /** Called with the provider; your code runs that provider's sign-in. */
  onPress: (provider: SocialProvider) => void;
  /** Default `md`. */
  size?: ButtonSize;
  disabled?: boolean;
};

/** "Continue with Apple" and "Continue with Google", as outline Buttons. */
export function SocialButtons({ onPress, size = "md", disabled = false }: SocialButtonsProps) {
  const styles = useStyles();
  return (
    <View style={styles.root}>
      {providers.map(({ provider, label, icon }) => (
        <Button
          key={provider}
          variant="outline"
          size={size}
          label={label}
          icon={icon}
          disabled={disabled}
          onPress={() => onPress(provider)}
        />
      ))}
    </View>
  );
}