Native Animation

Sign in Get all-access

Base Sign In Block animation preview

Base Sign In Block animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-sign-in-block

Base Sign In Block

React Native Sign In Block

A sign-in screen with a verification step and configurable credential validation, provider buttons, copy, callbacks, loading, errors, insets, and theme.

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

A sign-in screen with a verification step and configurable credential validation, provider buttons, copy, callbacks, loading, errors, insets, and theme.

How it works

Composes email/password inputs, a remember checkbox, provider buttons, a labeled separator, and a six-digit OTP input. The OTP component supplies its error shake.
Sections reveal over 300 ms on the theme out curve, staggered by 30 ms, from opacity 0 and a 6 pt vertical offset.
Submit validates trimmed email and password length before calling the host. validate replaces the default policy. Field errors appear after the first submit and update while editing.
The host chooses step="verification" after authenticating. Code submission is explicit through the primary button; a complete code does not submit automatically.
Entering verification and resending start a wall-clock cooldown. Backgrounding does not extend the countdown. The component clears its interval on exit/unmount. It never stores credentials.

Install

npx nativeanimation add base-sign-in-block

The CLI copies the exact family modules listed in registryDependencies, including their transitive dependencies. To copy by hand, copy those modules too and install their native packages with:

npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets lucide-react-native react-native-svg

Mount GestureHandlerRootView at the app root. Load the Geist regular and medium fonts once, or supply your own font names through the theme. Free forever. MIT.

Usage

import { BaseSignInBlock } from './base-sign-in-block';

<BaseSignInBlock
  onSubmit={(values) => authenticate(values)}
  step={needsVerification ? 'verification' : 'credentials'}
  onStepChange={() => setNeedsVerification(false)}
  onVerify={verifyCode}
  onForgotPassword={openRecovery}
  onRegister={openRegistration}
  providers={[
    { id: 'work', label: 'Continue with work account', icon: workIcon },
    { id: 'personal', label: 'Continue with personal account', icon: personalIcon },
  ]}
  onProvider={openProvider}
  loading={pending}
  error={error}
  insets={insets}
/>

Wrap your app in BaseThemeProvider from base-theme to choose light/dark and neutral, blue, green, or violet accents. A theme prop overrides the provider and is inherited by nested controls, sheets, and dialogs. Place the block inside a bounded container with flex: 1; screens scroll vertically when space is limited. Supply safe-area insets from the host.

SignInValues contains email, password, and remember. The host authenticates, sets step, and supplies loading/error. Returning to credentials requests onStepChange; update the controlled step in response. Provider icons belong to the host. The default provider buttons use generic text only.

Use with an agent

Use Native Animation MCP to add base-sign-in-block with email/password, two account providers, and six-digit email verification.

Props

Prop	Type	Default	Description
`copy`	`Partial<copy>`	`Northwind copy`	All headings, labels, templates, accessible names, and validation messages.
`values / defaultValues`	`SignInValues / Partial<SignInValues>`	`empty credentials, remember=false`	Controlled or initial email, password, and remember values.
`onValuesChange`	`(values: SignInValues) => void`	`—`	Receives every form edit.
`onSubmit`	`(values: SignInValues) => void`	`—`	Receives validated values with trimmed email.
`step`	`credentials or verification`	`credentials`	Host-controlled authentication step.
`onStepChange`	`(step: SignInStep) => void`	`—`	Requests credentials when Use another email is pressed.
`code / onCodeChange`	`string / (code: string) => void`	`empty / —`	Controlled OTP, or local text when code is omitted.
`onVerify / onResend`	`(code: string) => void / () => void`	`—`	Explicit code submit and resend callbacks.
`resendSeconds`	`number`	`30`	Seconds to wait after entering verification or resending.
`minimumPasswordLength`	`number`	`8`	Default password-length policy.
`validate`	`(values) => { email?: string; password?: string }`	`default email/length policy`	Return localized field errors; empty object means valid.
`providers`	`SignInProvider[]`	`work and personal accounts`	Each has id, label, optional ReactNode icon. [] hides the separator and providers.
`onProvider`	`(id: string) => void`	`—`	Host starts the chosen provider flow.
`onForgotPassword / onRegister`	`() => void`	`—`	Host handles recovery and registration.
`insets`	`{ top?: number; bottom?: number }`	`0 / 0`	Host safe-area insets; no internal SafeAreaView.
`theme`	`BaseTheme`	`nearest provider`	Full shared theme override inherited by every nested control.
`onBack / backLabel`	`() => void / string`	`— / Back`	Optional host back action and its accessible name.
`loading / error`	`boolean / string`	`false / —`	Host pending state and failure message.
`testID`	`string`	`piece ID`	Stable identifier on the screen primary action.
`style`	`StyleProp<ViewStyle>`	`flex: 1`	Container override.

copy supports these keys: title, heading, description, email, emailPlaceholder, password, passwordPlaceholder, remember, forgot, submit, separator, registerHint, register, verifyHeading, verifyDescription, code, verify, resend, resendCountdown, changeEmail, errorTitle, invalidEmail, invalidPassword, invalidCode, showPassword, hidePassword, back. Unspecified keys keep the generic English defaults. Icons and content remain caller-owned.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Targets iOS, Android, and web, in Expo Go and development builds. Native bundle compilation does not replace device interaction testing. Part of Native Animation Base. Free forever. MIT. No router, network, or storage dependency.

Go further

conditional-field-morph for conditional forms.
password-strength-meter for password feedback.

Accessibility

Inputs include email/password autofill hints; password reveal labels are configurable. OTP uses one numeric input with one-time-code autofill and configurable naming. Busy states block submission and input; destructive alerts expose failures. Keyboard avoidance uses padding on iOS and height on Android. Screen sections appear immediately without translation under Reduce Motion.

Part of a shared foundation

Use it in a screen

Compose Base Sign In Block with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Stacked Category Cards ↗

A category stack whose tabs unfold into detail cards, with configurable categories, title, colors, and fonts.

Another way to solve this task · $9

Review Approval Card ↗

A moderation queue with swipe-to-approve or decline feedback, with configurable reviews, labels, colors, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
react-native-reanimated	4.7.1
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.7.1, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.5.1, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseSignInBlock.tsx

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { BaseAlert } from '../base-alert';
import { BaseButton } from '../base-button';
import { BaseCheckbox } from '../base-checkbox';
import { BaseInput } from '../base-input';
import { BaseInputOTP } from '../base-input-otp';
import { BaseSeparator } from '../base-separator';
import { useBaseTheme } from '../base-theme';
import {
  BlockFrame,
  BlockSection,
  BlockText,
  type BlockProps,
} from './BlockLayout';

const defaultCopy = {
  title: 'Northwind',
  heading: 'Welcome back',
  description: 'Sign in to your workspace and pick up where you left off.',
  email: 'Email',
  emailPlaceholder: 'you@example.com',
  password: 'Password',
  passwordPlaceholder: 'Enter your password',
  remember: 'Remember me',
  forgot: 'Forgot password?',
  submit: 'Sign in',
  separator: 'or',
  registerHint: 'New to Northwind?',
  register: 'Create an account',
  verifyHeading: 'Check your inbox',
  verifyDescription: 'Enter the six-digit code sent to your email.',
  code: 'Verification code',
  verify: 'Verify email',
  resend: 'Resend code',
  resendCountdown: 'Resend in {seconds}s',
  changeEmail: 'Use another email',
  errorTitle: 'Unable to sign in',
  invalidEmail: 'Enter a valid email address.',
  invalidPassword: 'Use at least 8 characters.',
  invalidCode: 'Enter all six digits.',
  showPassword: 'Show password',
  hidePassword: 'Hide password',
  back: 'Back',
};
export type SignInValues = {
  email: string;
  password: string;
  remember: boolean;
};
export type SignInProvider = {
  id: string;
  label: string;
  icon?: React.ReactNode;
};
export type SignInStep = 'credentials' | 'verification';
export type BaseSignInBlockProps = BlockProps & {
  /** Every visible and accessible string, including validation messages. */
  copy?: Partial<typeof defaultCopy>;
  /** Controlled form values. */
  values?: SignInValues;
  /** Initial values when uncontrolled. */
  defaultValues?: Partial<SignInValues>;
  /** Receives form edits. Never persists credentials. */
  onValuesChange?: (values: SignInValues) => void;
  /** Host decides whether successful sign-in requires verification. */
  onSubmit?: (values: SignInValues) => void;
  /** Controlled step; defaults to credentials. */
  step?: SignInStep;
  /** Requests returning to credentials. */
  onStepChange?: (step: SignInStep) => void;
  /** Controlled or initial verification code. */
  code?: string;
  /** Reports code changes. */
  onCodeChange?: (code: string) => void;
  /** Submits a complete code. */
  onVerify?: (code: string) => void;
  /** Called when a new code is requested. */
  onResend?: () => void;
  /** Cooldown in seconds, started on entering verification and resending. */
  resendSeconds?: number;
  /** Minimum credential length, or supply validate for your own policy. */
  minimumPasswordLength?: number;
  /** Optional validation policy, returning field-specific messages. */
  validate?: (values: SignInValues) => { email?: string; password?: string };
  /** Caller-owned provider labels and icons. An empty array hides providers. */
  providers?: SignInProvider[];
  /** Provider selection callback. */
  onProvider?: (id: string) => void;
  /** Host handles password recovery. */
  onForgotPassword?: () => void;
  /** Host handles registration. */
  onRegister?: () => void;
};
const defaultProviders: SignInProvider[] = [
  { id: 'work', label: 'Continue with work account' },
  { id: 'personal', label: 'Continue with personal account' },
];

export function BaseSignInBlock({
  copy,
  values: controlled,
  defaultValues,
  onValuesChange,
  onSubmit,
  step = 'credentials',
  onStepChange,
  code: controlledCode,
  onCodeChange,
  onVerify,
  onResend,
  resendSeconds = 30,
  minimumPasswordLength = 8,
  validate,
  providers = defaultProviders,
  onProvider,
  onForgotPassword,
  onRegister,
  loading = false,
  error,
  ...props
}: BaseSignInBlockProps) {
  const theme = useBaseTheme(props.theme);
  const t = { ...defaultCopy, ...copy };
  const [internal, setInternal] = useState<SignInValues>({
    email: '',
    password: '',
    remember: false,
    ...defaultValues,
  });
  const values = controlled ?? internal;
  const [localCode, setLocalCode] = useState('');
  const code = controlledCode ?? localCode;
  const [attempted, setAttempted] = useState(false);
  const [codeAttempted, setCodeAttempted] = useState(false);
  const cooldown = Math.max(0, Math.floor(resendSeconds));
  const update = (next: Partial<SignInValues>) => {
    const merged = { ...values, ...next };
    if (controlled === undefined) setInternal(merged);
    onValuesChange?.(merged);
  };
  const failures = validate
    ? validate(values)
    : {
        email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email.trim())
          ? undefined
          : t.invalidEmail,
        password:
          values.password.length >= minimumPasswordLength
            ? undefined
            : t.invalidPassword,
      };
  const submit = () => {
    if (loading) return;
    if (step === 'verification') {
      setCodeAttempted(true);
      if (/^\d{6}$/.test(code)) onVerify?.(code);
    } else {
      setAttempted(true);
      if (!failures.email && !failures.password)
        onSubmit?.({ ...values, email: values.email.trim() });
    }
  };
  return (
    <BlockFrame
      {...props}
      theme={theme}
      title={t.title}
      backLabel={props.backLabel ?? t.back}
    >
      <BlockSection>
        <BlockText medium style={{ fontSize: 24, lineHeight: 32 }}>
          {step === 'credentials' ? t.heading : t.verifyHeading}
        </BlockText>
        <BlockText muted>
          {step === 'credentials' ? t.description : t.verifyDescription}
        </BlockText>
      </BlockSection>
      {error ? (
        <BaseAlert
          variant="destructive"
          title={t.errorTitle}
          description={error}
        />
      ) : null}
      {step === 'credentials' ? (
        <>
          <BlockSection index={1}>
            <BaseInput
              label={t.email}
              placeholder={t.emailPlaceholder}
              value={values.email}
              onChangeText={(email) => update({ email })}
              disabled={loading}
              error={attempted ? failures.email : undefined}
              testID="sign-in-email"
              inputProps={{
                keyboardType: 'email-address',
                autoComplete: 'email',
                autoCapitalize: 'none',
                autoCorrect: false,
              }}
            />
            <BaseInput
              label={t.password}
              placeholder={t.passwordPlaceholder}
              value={values.password}
              onChangeText={(password) => update({ password })}
              secureTextEntry
              revealable
              showPasswordLabel={t.showPassword}
              hidePasswordLabel={t.hidePassword}
              disabled={loading}
              error={attempted ? failures.password : undefined}
              inputProps={{
                autoComplete: 'current-password',
                autoCapitalize: 'none',
                returnKeyType: 'go',
                onSubmitEditing: submit,
              }}
            />
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: theme.space[2],
              }}
            >
              <View
                style={{
                  minHeight: 48,
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: theme.space[3],
                }}
              >
                <BaseCheckbox
                  value={values.remember}
                  onValueChange={(remember) => update({ remember })}
                  disabled={loading}
                  accessibilityLabel={t.remember}
                />
                <BlockText>{t.remember}</BlockText>
              </View>
              <BaseButton
                variant="link"
                onPress={onForgotPassword}
                disabled={loading}
                style={{ minHeight: 48 }}
              >
                {t.forgot}
              </BaseButton>
            </View>
            <BaseButton
              fullWidth
              loading={loading}
              onPress={submit}
              testID={props.testID ?? 'base-sign-in-block'}
              style={{ minHeight: 48 }}
            >
              {t.submit}
            </BaseButton>
          </BlockSection>
          {providers.length ? (
            <BlockSection index={2}>
              <BaseSeparator label={t.separator} decorative={false} />
              {providers.map((provider) => (
                <BaseButton
                  key={provider.id}
                  fullWidth
                  variant="outline"
                  leading={provider.icon}
                  disabled={loading}
                  onPress={() => onProvider?.(provider.id)}
                  style={{ minHeight: 48 }}
                >
                  {provider.label}
                </BaseButton>
              ))}
            </BlockSection>
          ) : null}
          <BlockSection index={3}>
            <BlockText muted style={{ textAlign: 'center' }}>
              {t.registerHint}
            </BlockText>
            <BaseButton
              variant="link"
              fullWidth
              onPress={onRegister}
              disabled={loading}
              style={{ minHeight: 48 }}
            >
              {t.register}
            </BaseButton>
          </BlockSection>
        </>
      ) : (
        <BlockSection key="verification" index={1}>
          <BaseInputOTP
            length={6}
            groups={[3, 3]}
            value={code}
            onChangeText={(next) => {
              if (controlledCode === undefined) setLocalCode(next);
              onCodeChange?.(next);
              setCodeAttempted(false);
            }}
            disabled={loading}
            error={!!error || (codeAttempted && code.length !== 6)}
            accessibilityLabel={t.code}
            testID="sign-in-code"
          />
          {codeAttempted && code.length !== 6 ? (
            <BaseAlert variant="destructive" title={t.invalidCode} />
          ) : null}
          <BaseButton
            fullWidth
            loading={loading}
            onPress={submit}
            testID={props.testID ?? 'base-sign-in-block'}
            style={{ minHeight: 48 }}
          >
            {t.verify}
          </BaseButton>
          <ResendCodeButton
            key={cooldown}
            cooldown={cooldown}
            loading={loading}
            onResend={onResend}
            label={t.resend}
            countdown={t.resendCountdown}
          />
          <BaseButton
            fullWidth
            variant="link"
            onPress={() => onStepChange?.('credentials')}
            disabled={loading}
            style={{ minHeight: 48 }}
          >
            {t.changeEmail}
          </BaseButton>
        </BlockSection>
      )}
    </BlockFrame>
  );
}
function ResendCodeButton({
  cooldown,
  loading,
  onResend,
  label,
  countdown,
}: {
  cooldown: number;
  loading: boolean;
  onResend?: () => void;
  label: string;
  countdown: string;
}) {
  const [deadline, setDeadline] = useState(() => Date.now() + cooldown * 1000);
  const [remaining, setRemaining] = useState(cooldown);
  useEffect(() => {
    const timer = setInterval(
      () =>
        setRemaining(Math.max(0, Math.ceil((deadline - Date.now()) / 1000))),
      250,
    );
    return () => clearInterval(timer);
  }, [deadline]);
  return (
    <BaseButton
      fullWidth
      variant="outline"
      disabled={loading || remaining > 0}
      onPress={() => {
        setRemaining(cooldown);
        setDeadline(Date.now() + cooldown * 1000);
        onResend?.();
      }}
      style={{ minHeight: 48 }}
    >
      {remaining > 0
        ? countdown.replace('{seconds}', String(remaining))
        : label}
    </BaseButton>
  );
}
export default BaseSignInBlock;

BlockLayout.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  BaseThemeProvider,
  timing,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  Text,
  View,
  type StyleProp,
  type TextStyle,
  type ViewStyle,
} from 'react-native';
import { BaseHeader } from '../base-header';

export type BlockProps = {
  /** Host-provided safe-area insets. */
  insets?: { top?: number; bottom?: number };
  /** Overrides the shared family theme, including nested controls. */
  theme?: BaseTheme;
  /** Host navigation callback; no router is required. */
  onBack?: () => void;
  /** Accessible name for the back action. */
  backLabel?: string;
  /** Stable identifier on the primary action. */
  testID?: string;
  /** Container layout override. */
  style?: StyleProp<ViewStyle>;
  /** Host-controlled pending state. */
  loading?: boolean;
  /** Host-controlled failure message. */
  error?: string;
};

/** Local layout only; controls and their motion belong to the installed Base pieces. */
export function BlockFrame({
  title,
  subtitle,
  largeTitle = false,
  children,
  actions,
  scroll = true,
  ...props
}: BlockProps & {
  title: string;
  subtitle?: string;
  largeTitle?: boolean;
  children: React.ReactNode;
  actions?: React.ReactNode;
  scroll?: boolean;
}) {
  const theme = useBaseTheme(props.theme);
  const scrollY = useSharedValue(0);
  const onScroll = useAnimatedScrollHandler((event) => {
    scrollY.set(event.contentOffset.y);
  });
  return (
    <BaseThemeProvider theme={theme}>
      <KeyboardAvoidingView
        behavior={
          Platform.OS === 'ios'
            ? 'padding'
            : Platform.OS === 'android'
              ? 'height'
              : undefined
        }
        style={[
          { flex: 1, minHeight: 0, backgroundColor: theme.colors.background },
          props.style,
        ]}
      >
        <BaseHeader
          title={title}
          subtitle={subtitle}
          largeTitle={largeTitle}
          align="left"
          scrollY={scrollY}
          topInset={props.insets?.top ?? 0}
          onBack={props.onBack}
          backLabel={props.backLabel}
          actions={actions}
        />
        {scroll ? (
          <Animated.ScrollView
            onScroll={onScroll}
            scrollEventThrottle={16}
            style={{ flex: 1 }}
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="on-drag"
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{
              flexGrow: 1,
              padding: theme.space[4],
              paddingBottom: (props.insets?.bottom ?? 0) + theme.space[6],
              gap: theme.space[6],
              width: '100%',
              maxWidth: 640,
              alignSelf: 'center',
            }}
          >
            {children}
          </Animated.ScrollView>
        ) : (
          <View
            style={{
              flex: 1,
              minHeight: 0,
              paddingHorizontal: theme.space[4],
              paddingBottom: props.insets?.bottom ?? 0,
              width: '100%',
              maxWidth: 640,
              alignSelf: 'center',
            }}
          >
            {children}
          </View>
        )}
      </KeyboardAvoidingView>
    </BaseThemeProvider>
  );
}

export function BlockSection({
  children,
  index = 0,
  title,
}: {
  children: React.ReactNode;
  index?: number;
  title?: string;
}) {
  const theme = useBaseTheme();
  const reduced = useBaseReducedMotion();
  const progress = useSharedValue(reduced ? 1 : 0);
  useEffect(() => {
    progress.set(
      reduced
        ? 1
        : withDelay(
            index * theme.motion.stagger,
            withTiming(1, timing(theme, 'reveal')),
            ReduceMotion.Never,
          ),
    );
    return () => cancelAnimation(progress);
  }, [index, theme, reduced, progress]);
  const animated = useAnimatedStyle(() => ({
    opacity: progress.get(),
    transform: [
      {
        translateY: reduced
          ? 0
          : (1 - progress.get()) * theme.motion.shifts.handoff,
      },
    ],
  }));
  return (
    <Animated.View style={[{ gap: theme.space[4] }, animated]}>
      {title ? (
        <BlockText muted medium>
          {title}
        </BlockText>
      ) : null}
      {children}
    </Animated.View>
  );
}

export function BlockText({
  children,
  muted = false,
  medium = false,
  style,
}: {
  children: React.ReactNode;
  muted?: boolean;
  medium?: boolean;
  style?: StyleProp<TextStyle>;
}) {
  const theme = useBaseTheme();
  return (
    <Text
      style={[
        {
          fontFamily: medium ? theme.fonts.medium : theme.fonts.regular,
          fontSize: 14,
          lineHeight: 20,
          color: muted ? theme.colors.mutedForeground : theme.colors.foreground,
        },
        style,
      ]}
    >
      {children}
    </Text>
  );
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-sign-in-block",
  "family": "base",
  "license": "MIT",
  "kind": "block",
  "registryDependencies": [
    "base-alert",
    "base-button",
    "base-checkbox",
    "base-header",
    "base-input",
    "base-input-otp",
    "base-separator",
    "base-theme"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}