# 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.

Block · auth. Registry item `sign-up-01`, shown in the vega Style. JSON: https://nativecn.dev/r/styles/vega/sign-up-01.json

## Installation

```sh
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](https://nativecn.dev/docs/theme/theme), [container](https://nativecn.dev/docs/components/container), [text](https://nativecn.dev/docs/components/text), [button](https://nativecn.dev/docs/components/button), [form-field](https://nativecn.dev/docs/components/form-field), [input](https://nativecn.dev/docs/components/input), [focus-chain](https://nativecn.dev/docs/primitives/focus-chain), [checkbox](https://nativecn.dev/docs/components/checkbox), [icon](https://nativecn.dev/docs/components/icon), [separator](https://nativecn.dev/docs/components/separator), [toast](https://nativecn.dev/docs/components/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](https://nativecn.dev/docs/blocks/sign-up-02) – Step-by-step wizard: Progress bar plus one question per screen: email → name → password → verify code.
- [sign-up-03](https://nativecn.dev/docs/blocks/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

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

```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

```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>
  );
}
```