# Sign up screen

> A complete sign-up screen: name, email and a password with a live strength meter whose segments fill and recolor while each rule's check draws itself in, a terms checkbox and an async Create account button.

- Type: Component (screens)
- Access: Pro
- Page: https://goodui.dev/native/components/sign-up-screen
- Markdown: https://goodui.dev/native/components/sign-up-screen.md
- Registry item: https://goodui.dev/native/r/sign-up-screen.json
- Dependencies: react-native-reanimated, react-native-svg
- Keywords: react native sign up screen, create account screen expo, password strength meter react native, registration form, terms checkbox, sign up template

## When to use

- The create-account route of an app with email and password accounts.
- When you want password rules shown live and server errors (email taken) placed under the right field.

## When not to use

- Returning people: use sign-in-screen.
- Apple or Google only sign-up: those buttons live on sign-in-screen.
- Long multi-step profiles: keep this screen to the account and ask for the rest later.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add @goodui-native-pro/sign-up-screen
npx expo install --fix
```

Pro: add `"@goodui-native-pro": { "url": "https://goodui.dev/native/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${GOODUI_LICENSE_KEY}" } }` to the `registries` of components.json and put your license key in .env.local.

The component lands in `components/goodui-native/sign-up-screen/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs banner, button, checkbox, icon-button, locale, text-field.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
// app/(auth)/sign-up.tsx
import { router } from "expo-router";
import { SignUpScreen } from "@/components/goodui-native/sign-up-screen/sign-up-screen";
import { auth } from "@/lib/auth";

export default function SignUpRoute() {
  return (
    <SignUpScreen
      appName="Stride"
      onCreateAccount={async ({ name, email, password }) => {
        const result = await auth.signUp({ name, email, password });
        if (result.error === "email_taken") {
          throw { field: "email", message: "An account with this email already exists." };
        }
      }}
      onCreated={({ email }) => router.replace({ pathname: "/verify", params: { email } })}
      onOpenTerms={() => router.push("/legal/terms")}
      onOpenPrivacy={() => router.push("/legal/privacy")}
      onSignIn={() => router.replace("/sign-in")}
      onBack={router.back}
    />
  );
}
```

## Examples

### Accept fair passwords

```tsx
<SignUpScreen minStrength={2} onCreateAccount={createAccount} onCreated={next} />
```

### Use the same strength rules elsewhere

```tsx
import { passwordStrength } from "@/components/goodui-native/sign-up-screen/sign-up-screen";

const ok = passwordStrength(newPassword) >= 3;
```

## API reference

### SignUpScreen

`import { SignUpScreen } from "@/components/goodui-native/sign-up-screen/sign-up-screen";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `appName` | `string` | `"Stride"` | Product name used in the copy ("Join Stride"). |
| `title` | `string` | `"Create your account"` | Headline. Defaults to "Create your account". |
| `subtitle` | `string` | – | One line under the headline. |
| `onCreateAccount` | `(details: SignUpDetails) => unknown` | – | Runs when Create account is pressed and every field passes. Return a promise: the button shows pending, then a check; reject with `{ field: "email", message: "An account with this email already exists." }` to put the message under that field, or with an `Error` to show its message in a banner above the button. |
| `onCreated` | `(details: SignUpDetails) => void` | – | Called about 700 ms after `onCreateAccount` resolves, once the check has landed. Go to verification here. |
| `minStrength` | `0 \| 1 \| 2 \| 3 \| 4` | `3` | The lowest strength Create account accepts. Default 3 (good: 8+ characters and two of case, number, symbol). |
| `onOpenTerms` | `() => void` | – | Opens the terms of service. Shows a link under the checkbox when set. |
| `onOpenPrivacy` | `() => void` | – | Opens the privacy policy. Shows a link under the checkbox when set. |
| `onSignIn` | `() => void` | – | "Sign in" link in the footer. Hidden when omitted. |
| `onBack` | `() => void` | – | Shows a back button in the top bar. |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- The headline is a header; each field has its label and announces its own errors.
- The strength level is a polite live region ('Weak', 'Fair', 'Good', 'Strong'); each rule reads as one element, for example '8 or more characters, done'. The bar itself is hidden from screen readers.
- The terms checkbox is a real checkbox; skipping it marks it invalid, shows the reason under it and announces it.
- A form-level error appears in a danger banner that is announced; field errors appear under the field.

## Motion

- The four strength segments fill from the leading edge on the smooth spring and recolor from danger through warning to success as the level changes.
- Each rule's check draws itself in the moment the rule is met.
- Create account gathers into a spinner, then opens into 'Account created' or shakes with 'Try again'; a field error shakes that field.
- Reduced motion: segments change with a short fade, checks appear complete, no shakes.

## Haptics

- tap, success and error from the Create account button.
- error from a field that fails validation; a rejected request buzzes once from the button only.

## Performance

- Strength is computed from the password on each keystroke (four regex tests); the meter animates on the UI thread.

## Notes for AI

- Return the request promise from onCreateAccount. Reject with { field: 'name' | 'email' | 'password', message } for a field error, or an Error for a banner message.
- Navigate in onCreated (usually to verify-screen), not inside onCreateAccount, so the check is visible first.
- minStrength defaults to 3 (good). passwordStrength(password) is exported and returns 0 to 4 with the same rules.
- Terms and privacy links render only when onOpenTerms and onOpenPrivacy are passed; the back button only with onBack.
- Render it as the whole route with the header hidden; it handles safe areas and the keyboard itself.

## Related

- [Sign in screen](https://goodui.dev/native/components/sign-in-screen.md): A complete sign-in screen: email and password, forgot password, an async Sign in button that gathers into a spinner and opens into a check, or shakes together with the password field when the credentials are rejected, and Continue with Apple or Google.
- [Verify screen](https://goodui.dev/native/components/verify-screen.md): A complete email or SMS code verification screen: OTP cells that shake and clear on a wrong code, a resend button behind a rolling countdown, and a success check that springs in once the code is accepted.
- [Text field](https://goodui.dev/native/components/text-field.md): A text field whose label glides up as you focus it, with helper and error text that slide in, a shake and haptic on error, clear and reveal buttons, a character counter and a multiline mode that grows with its text.
- [Checkbox and radio](https://goodui.dev/native/components/checkbox.md): Checkboxes whose check draws itself in (an indeterminate dash retracts into it) and radios whose dot pops into the center, inline or as list rows, with CheckboxGroup and RadioGroup helpers.
- [Banner](https://goodui.dev/native/components/banner.md): An inline status banner that slides down from under the edge above and pushes the content down, flings away sideways with the finger, and can collapse on its own behind a draining hairline; includes an offline preset.

## Guidance for AI tools

Sign up screen: A complete sign-up screen: name, email and a password with a live strength meter whose segments fill and recolor while each rule's check draws itself in, a terms checkbox and an async Create account button. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt