Native Animation

Sign in Get all-access

Base Onboarding Block animation preview

Base Onboarding 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-onboarding-block

Base Onboarding Block

React Native Onboarding Block

A three-step onboarding screen with configurable goals, interests, daily preferences, copy, answers, step control, callbacks, 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 three-step onboarding screen with configurable goals, interests, daily preferences, copy, answers, step control, callbacks, insets, and theme.

How it works

Composes a progress bar, radio goals, multiple interest chips, a daily-goal slider, a reminder switch, and navigation buttons.
Sections reveal in 300 ms with 30 ms staggering and a 6 pt offset. Step content exits in 150 ms with panelOut and enters in 300 ms with panelIn, traveling 24 pt horizontally in the direction of navigation.
An exit generation token and canceled animations prevent stale callbacks from replacing a newer requested step. Content and the incoming pose commit together.
Answers live outside the step panel, so Back and Next preserve all values. Skip and completion receive the complete current answers.
The host owns navigation after skip/completion and applies or persists the received preferences. Loading replaces the step content with skeletons and blocks navigation.

Install

npx nativeanimation add base-onboarding-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 { BaseOnboardingBlock } from './base-onboarding-block';

<BaseOnboardingBlock
  values={answers}
  onValuesChange={setAnswers}
  onComplete={createWorkspace}
  onSkip={continueWithDefaults}
  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.

OnboardingValues contains goal, interests, minutes, and reminders. Supply values with onValuesChange for controlled answers, or defaultValues for local state. step and onStepChange are independently controllable. Copy templates use {current}, {total}, and {minutes}.

Use with an agent

Use Native Animation MCP to add base-onboarding-block with three steps for a goal, multiple interests, and daily preferences.

Props

Prop	Type	Default	Description
`copy`	`Partial<copy>`	`Northwind copy`	All titles, descriptions, labels, and templates.
`goals`	`BaseRadioOption[]`	`organize, learn, team`	Goal value, label, optional description/disabled.
`interests`	`BaseToggleItem[]`	`six interest chips`	Interest value, label, optional icon/disabled.
`values / defaultValues`	`OnboardingValues / Partial<OnboardingValues>`	`first goal, [], 15 minutes, reminders=true`	Controlled or initial answers.
`onValuesChange`	`(values: OnboardingValues) => void`	`—`	Receives goal, interests, minutes, and reminders.
`step / defaultStep`	`number`	`0`	Controlled or initial zero-based step, clamped to 0–2.
`onStepChange`	`(step: number) => void`	`—`	Receives requested step navigation.
`onComplete / onSkip`	`(values: OnboardingValues) => void`	`—`	Receives all answers without clearing them.
`minuteRange`	`{ min: number; max: number; step: number }`	`5 / 60 / 5`	Slider bounds and increment.
`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, progress, step, goalTitle, goalDescription, interestsTitle, interestsDescription, interestsLabel, preferencesTitle, preferencesDescription, minutes, slider, notifications, reminderDescription, back, next, finish, skip, errorTitle. 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

cinematic-welcome for a cinematic introduction.
goal-picker-quiz for a richer goal-selection flow.

Accessibility

The progress bar exposes its current value; radios, chips, slider, and switch keep their native accessibility semantics. Next requires a goal on step one. The loading region announces busy state and errors use an alert. Reduced motion removes both reveal displacement and horizontal step transitions.

Part of a shared foundation

Use it in a screen

Compose Base Onboarding 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

Book Vortex Welcome ↗

A book-cover vortex that settles into a library dashboard, with configurable books, labels, colors, and fonts.

Another way to solve this task · $9

Split Sheet Library ↗

A reading home that unfolds into a sheet-based library with shared cards, with configurable shelves, library data, 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

Free forever. MIT. Read, copy, and download the source without an account. The archive includes this component, its transitive family dependencies, and their license files.

Download source + dependencies (.tar.gz)

Family dependencies

base-alert · Expo SDK 58
base-button · Expo SDK 58
base-header · Expo SDK 58
base-progress · Expo SDK 58
base-radio-group · Expo SDK 58
base-skeleton · Expo SDK 58
base-slider · Expo SDK 58
base-switch · Expo SDK 58
base-theme · Expo SDK 58
base-toggle-group · Expo SDK 58

BaseOnboardingBlock.tsx

BaseOnboardingBlock.tsx

BlockLayout.tsx

BlockLayout.tsx

index.ts

index.ts

export { default, BaseOnboardingBlock } from './BaseOnboardingBlock';
export type {
  BaseOnboardingBlockProps,
  OnboardingValues,
} from './BaseOnboardingBlock';

LICENSE

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

import {
  useBaseReducedMotion,
  timing,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';
import { View } from 'react-native';
import Animated, {
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';
import { BaseAlert } from '../base-alert';
import { BaseButton } from '../base-button';
import { BaseProgress } from '../base-progress';
import { BaseRadioGroup, type BaseRadioOption } from '../base-radio-group';
import { BaseSkeletonText } from '../base-skeleton';
import { BaseSlider } from '../base-slider';
import { BaseSwitch } from '../base-switch';
import { BaseToggleGroup, type BaseToggleItem } from '../base-toggle-group';

import {
  BlockFrame,
  BlockSection,
  BlockText,
  type BlockProps,
} from './BlockLayout';

const defaultCopy = {
  title: 'Make Northwind yours',
  progress: 'Workspace setup',
  step: 'Step {current} of {total}',
  goalTitle: 'What brings you here?',
  goalDescription: 'Choose a starting point. You can change it later.',
  interestsTitle: 'Find your focus',
  interestsDescription: 'Pick the topics you want to see more of.',
  interestsLabel: 'Interests',
  preferencesTitle: 'Set your pace',
  preferencesDescription: 'Build a routine that fits your day.',
  minutes: 'Daily goal: {minutes} minutes',
  slider: 'Daily goal in minutes',
  notifications: 'Daily reminders',
  reminderDescription: 'A little encouragement at the right time.',
  back: 'Back',
  next: 'Next',
  finish: 'Get started',
  skip: 'Skip for now',
  errorTitle: 'Could not save your preferences',
};
export type OnboardingValues = {
  goal: string;
  interests: string[];
  minutes: number;
  reminders: boolean;
};
export type BaseOnboardingBlockProps = BlockProps & {
  /** Screen copy and accessible names. */
  copy?: Partial<typeof defaultCopy>;
  /** Goal options; values are caller-owned identifiers. */
  goals?: BaseRadioOption[];
  /** Multiple-selection interest chips, including optional icons. */
  interests?: BaseToggleItem[];
  /** Controlled answers. */
  values?: OnboardingValues;
  /** Initial answers, retained while navigating backward and forward. */
  defaultValues?: Partial<OnboardingValues>;
  /** Reports answer changes. */
  onValuesChange?: (values: OnboardingValues) => void;
  /** Controlled zero-based step. */
  step?: number;
  /** Initial step when uncontrolled. */
  defaultStep?: number;
  /** Reports step navigation. */
  onStepChange?: (step: number) => void;
  /** Completion callback with all answers. */
  onComplete?: (values: OnboardingValues) => void;
  /** Skip callback preserves current answers for the host. */
  onSkip?: (values: OnboardingValues) => void;
  /** Slider bounds. */
  minuteRange?: { min: number; max: number; step: number };
};
const defaultGoals: BaseRadioOption[] = [
  {
    value: 'organize',
    label: 'Get organized',
    description: 'Bring a little clarity to every day.',
  },
  {
    value: 'learn',
    label: 'Learn something new',
    description: 'Make space for your next idea.',
  },
  {
    value: 'team',
    label: 'Work better together',
    description: 'Keep everyone moving in the same direction.',
  },
];
const defaultInterests: BaseToggleItem[] = [
  { value: 'design', label: 'Design' },
  { value: 'technology', label: 'Technology' },
  { value: 'wellness', label: 'Wellness' },
  { value: 'writing', label: 'Writing' },
  { value: 'business', label: 'Business' },
  { value: 'culture', label: 'Culture' },
];

/** Exit the old content before committing the new content and its entry pose. */
function StepPanel({
  step,
  theme,
  children,
}: {
  step: number;
  theme: BaseTheme;
  children: (shown: number) => React.ReactNode;
}) {
  const reduced = useBaseReducedMotion();
  const [shown, setShown] = useState(step);
  const generation = useRef(0);
  const direction = useRef(1);
  const previousShown = useRef(step);
  const opacity = useSharedValue(1);
  const offset = useSharedValue(0);
  const commit = useCallback((next: number, version: number) => {
    if (generation.current === version) setShown(next);
  }, []);
  useEffect(() => {
    const lifecycle = generation;
    const version = ++lifecycle.current;
    if (shown === step) {
      opacity.set(withTiming(1, timing(theme, 'panelIn', reduced)));
      offset.set(withTiming(0, timing(theme, 'panelIn', reduced)));
      return () => {
        lifecycle.current++;
        cancelAnimation(opacity);
        cancelAnimation(offset);
      };
    }
    direction.current = step > shown ? 1 : -1;
    if (reduced) {
      commit(step, version);
      return;
    }
    offset.set(withTiming(-24 * direction.current, timing(theme, 'panelOut')));
    opacity.set(
      withTiming(0, timing(theme, 'panelOut'), (finished) => {
        if (finished) scheduleOnRN(commit, step, version);
      }),
    );
    return () => {
      lifecycle.current++;
      cancelAnimation(opacity);
      cancelAnimation(offset);
    };
  }, [step, shown, theme, reduced, commit, offset, opacity]);
  useLayoutEffect(() => {
    if (previousShown.current === shown) return;
    previousShown.current = shown;
    opacity.set(reduced ? 1 : 0);
    offset.set(reduced ? 0 : 24 * direction.current);
  }, [shown, theme, reduced, opacity, offset]);
  const animated = useAnimatedStyle(() => ({
    opacity: opacity.get(),
    transform: [{ translateX: reduced ? 0 : offset.get() }],
  }));
  return (
    <Animated.View
      pointerEvents={shown === step ? 'auto' : 'none'}
      style={animated}
    >
      {children(shown)}
    </Animated.View>
  );
}

export function BaseOnboardingBlock({
  copy,
  goals = defaultGoals,
  interests = defaultInterests,
  values: controlled,
  defaultValues,
  onValuesChange,
  step: controlledStep,
  defaultStep = 0,
  onStepChange,
  onComplete,
  onSkip,
  minuteRange = { min: 5, max: 60, step: 5 },
  loading = false,
  error,
  ...props
}: BaseOnboardingBlockProps) {
  const theme = useBaseTheme(props.theme);
  const t = { ...defaultCopy, ...copy };
  const [internal, setInternal] = useState<OnboardingValues>({
    goal: goals[0]?.value ?? '',
    interests: [],
    minutes: 15,
    reminders: true,
    ...defaultValues,
  });
  const values = controlled ?? internal;
  const [internalStep, setInternalStep] = useState(defaultStep);
  const step = Math.max(0, Math.min(2, controlledStep ?? internalStep));
  const update = (patch: Partial<OnboardingValues>) => {
    const next = { ...values, ...patch };
    if (controlled === undefined) setInternal(next);
    onValuesChange?.(next);
  };
  const navigate = (next: number) => {
    if (loading) return;
    if (controlledStep === undefined) setInternalStep(next);
    onStepChange?.(next);
  };
  return (
    <BlockFrame
      {...props}
      theme={theme}
      title={t.title}
      backLabel={props.backLabel ?? t.back}
    >
      <BlockSection>
        <BlockText muted medium>
          {t.step
            .replace('{current}', String(step + 1))
            .replace('{total}', '3')}
        </BlockText>
        <BaseProgress
          value={((step + 1) / 3) * 100}
          accessibilityLabel={t.progress}
        />
      </BlockSection>
      {error ? (
        <BaseAlert
          variant="destructive"
          title={t.errorTitle}
          description={error}
        />
      ) : null}
      <BlockSection index={1}>
        {loading ? (
          <View
            accessible
            accessibilityLabel={t.progress}
            accessibilityState={{ busy: true }}
            aria-busy={true}
          >
            <BaseSkeletonText lines={5} />
          </View>
        ) : (
          <StepPanel step={step} theme={theme}>
            {(shown) => (
              <View style={{ gap: theme.space[6] }}>
                <View style={{ gap: theme.space[2] }}>
                  <BlockText medium style={{ fontSize: 24, lineHeight: 32 }}>
                    {[t.goalTitle, t.interestsTitle, t.preferencesTitle][shown]}
                  </BlockText>
                  <BlockText muted>
                    {
                      [
                        t.goalDescription,
                        t.interestsDescription,
                        t.preferencesDescription,
                      ][shown]
                    }
                  </BlockText>
                </View>
                {shown === 0 ? (
                  <BaseRadioGroup
                    options={goals}
                    value={values.goal}
                    onValueChange={(goal) => update({ goal })}
                    testID="onboarding-goal"
                  />
                ) : shown === 1 ? (
                  <BaseToggleGroup
                    type="multiple"
                    variant="chip"
                    items={interests}
                    value={values.interests}
                    onValueChange={(next) => update({ interests: next })}
                    accessibilityLabel={t.interestsLabel}
                  />
                ) : (
                  <>
                    <BlockText medium>
                      {t.minutes.replace('{minutes}', String(values.minutes))}
                    </BlockText>
                    <BaseSlider
                      value={values.minutes}
                      {...minuteRange}
                      onValueChange={(minutes) => {
                        if (typeof minutes === 'number') update({ minutes });
                      }}
                      accessibilityLabel={t.slider}
                    />
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        gap: theme.space[4],
                      }}
                    >
                      <View style={{ flex: 1, gap: theme.space[1] }}>
                        <BlockText medium>{t.notifications}</BlockText>
                        <BlockText muted>{t.reminderDescription}</BlockText>
                      </View>
                      <BaseSwitch
                        value={values.reminders}
                        onValueChange={(reminders) => update({ reminders })}
                        accessibilityLabel={t.notifications}
                      />
                    </View>
                  </>
                )}
              </View>
            )}
          </StepPanel>
        )}
      </BlockSection>
      <BlockSection index={2}>
        <BaseButton
          fullWidth
          loading={loading}
          disabled={step === 0 && !values.goal}
          testID={props.testID ?? 'base-onboarding-block'}
          onPress={() =>
            step === 2 ? onComplete?.(values) : navigate(step + 1)
          }
          style={{ minHeight: 48 }}
        >
          {step === 2 ? t.finish : t.next}
        </BaseButton>
        {step > 0 ? (
          <BaseButton
            fullWidth
            variant="outline"
            disabled={loading}
            onPress={() => navigate(step - 1)}
            style={{ minHeight: 48 }}
          >
            {t.back}
          </BaseButton>
        ) : null}
        <BaseButton
          fullWidth
          variant="ghost"
          disabled={loading}
          onPress={() => onSkip?.(values)}
          style={{ minHeight: 48 }}
        >
          {t.skip}
        </BaseButton>
      </BlockSection>
    </BlockFrame>
  );
}
export default BaseOnboardingBlock;

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

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-onboarding-block",
  "family": "base",
  "license": "MIT",
  "kind": "block",
  "registryDependencies": [
    "base-alert",
    "base-button",
    "base-header",
    "base-progress",
    "base-radio-group",
    "base-skeleton",
    "base-slider",
    "base-switch",
    "base-theme",
    "base-toggle-group"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}