Native Animation

Sign in Get all-access

Base Plans Block animation preview

Base Plans 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-plans-block

Base Plans Block

React Native Plans Block

A plan-selection screen with configurable monthly and annual prices, plan content and icons, features, FAQ, selection callbacks, copy, loading, errors…

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 plan-selection screen with configurable monthly and annual prices, plan content and icons, features, FAQ, selection callbacks, copy, loading, errors, insets, and theme.

How it works

Composes segmented billing tabs, a savings badge, selectable plan cards, feature checks, FAQ disclosures, and one primary continue action.
Recommended cards use the theme primary border; selected cards also expose selected accessibility state. No nested buttons are placed inside pressable cards.
Prices are full billing-period amounts: monthlyPrice per month, yearlyPrice per year. The CTA price composes Base sliding digits and an explicit period suffix.
Sections reveal in 300 ms from 6 pt, with 30 ms staggering; all other movement belongs to the composed Base controls.
Continue calls onSelectPlan(plan, period). The host handles checkout/navigation; this block never collects payment information or starts a transaction.

Install

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

<BasePlansBlock
  plans={plans}
  period={period}
  onPeriodChange={setPeriod}
  selectedPlan={selectedPlan}
  onSelectedPlanChange={setSelectedPlan}
  onSelectPlan={(plan, billingPeriod) => openCheckout(plan.id, billingPeriod)}
  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.

Set copy.savings to match your prices, or to an empty string to hide the badge. copy.continue supports {plan}; copy.priceAction supports {action}, {price}, and {period}. Prices should be finite nonnegative numbers. Update a controlled selected ID when replacing the plan collection.

Use with an agent

Use Native Animation MCP to add base-plans-block with monthly and annual plans, a recommended tier, FAQ, and a callback to my checkout.

Props

Prop	Type	Default	Description
`copy`	`Partial<copy>`	`Northwind copy`	All headings, billing/price labels, savings badge, disclaimer, and templates.
`plans`	`BlockPlan[]`	`Personal / Team`	ID, name, description, monthly/yearly prices, features, optional recommended and icon.
`period / defaultPeriod`	`BillingPeriod`	`monthly`	Controlled or initial monthly/yearly period.
`onPeriodChange`	`(period: BillingPeriod) => void`	`—`	Reports billing changes.
`selectedPlan / defaultSelectedPlan`	`string`	`recommended or first initial plan`	Controlled or initial plan ID. Unknown IDs disable Continue.
`onSelectedPlanChange`	`(id: string) => void`	`—`	Card-selection callback, separate from submission.
`onSelectPlan`	`(plan: BlockPlan, period: BillingPeriod) => void`	`—`	Continue callback; no payment processing.
`faq`	`BaseAccordionItem[]`	`three questions`	Caller-owned FAQ titles/content; [] hides it.
`openFaq / onOpenFaqChange`	`string / (value: string) => void`	`uncontrolled`	Optional FAQ open state.
`currency / locale`	`string`	`USD / en-US`	Intl number-format settings.
`featureIcon`	`ReactNode`	`Check`	Caller-owned feature icon; null hides it.
`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, monthly, yearly, savings, recommended, selected, monthSuffix, yearSuffix, faq, continue, priceAction, disclaimer, loading, errorTitle, emptyTitle, emptyDescription, 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

trial-timeline-paywall for a guided trial offer.
tier-pillars-paywall for a more expressive tier comparison.

Accessibility

Plan cards announce the plan, price, billing period, and selected state. The primary action has one complete accessible price label; digit wheels stay decorative. FAQ triggers expose expanded state. Loading is announced as busy and empty/error states remain readable. Reduce Motion removes section displacement and applies composed-control changes without motion.

Part of a shared foundation

Use it in a screen

Compose Base Plans 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
lucide-react-native	^1.61.0
react-native-reanimated	4.7.1
react-native-svg	15.16.0
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	lucide-react-native ^1.61.0, react-native-reanimated 4.7.1, react-native-svg 15.16.0, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-reanimated 4.5.1, react-native-svg 15.15.4, 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-accordion · Expo SDK 58
base-alert · Expo SDK 58
base-badge · Expo SDK 58
base-button · Expo SDK 58
base-card · Expo SDK 58
base-empty-state · Expo SDK 58
base-header · Expo SDK 58
base-skeleton · Expo SDK 58
base-sliding-number · Expo SDK 58
base-tabs · Expo SDK 58
base-theme · Expo SDK 58

BasePlansBlock.tsx

BasePlansBlock.tsx

BlockLayout.tsx

BlockLayout.tsx

index.ts

index.ts

export { default, BasePlansBlock } from './BasePlansBlock';
export type {
  BasePlansBlockProps,
  BillingPeriod,
  BlockPlan,
} from './BasePlansBlock';

LICENSE

nativeanimation.manifest.json

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import Check from 'lucide-react-native/icons/check';
import { BaseAccordion, type BaseAccordionItem } from '../base-accordion';
import { BaseAlert } from '../base-alert';
import { BaseBadge } from '../base-badge';
import { BaseButton } from '../base-button';
import {
  BaseCard,
  BaseCardContent,
  BaseCardDescription,
  BaseCardHeader,
  BaseCardTitle,
} from '../base-card';
import { BaseEmptyState } from '../base-empty-state';
import { BaseSkeletonText } from '../base-skeleton';
import { BaseSlidingNumber } from '../base-sliding-number';
import { BaseTabs } from '../base-tabs';
import { useBaseTheme } from '../base-theme';
import {
  BlockFrame,
  BlockSection,
  BlockText,
  type BlockProps,
} from './BlockLayout';

const defaultCopy = {
  title: 'Find your plan',
  heading: 'Room for your next big idea',
  description: 'Choose the Northwind workspace that grows with you.',
  monthly: 'Monthly',
  yearly: 'Annual',
  savings: 'Save 20% annually',
  recommended: 'Recommended',
  selected: 'Selected',
  monthSuffix: '/month',
  yearSuffix: '/year',
  faq: 'Good to know',
  continue: 'Continue with {plan}',
  priceAction: '{action} — {price}{period}',
  disclaimer: 'Pick the plan that fits your next chapter.',
  loading: 'Loading plans',
  errorTitle: 'Could not load plans',
  emptyTitle: 'Plans are on their way',
  emptyDescription: 'Check back soon for your workspace options.',
  back: 'Back',
};
export type BillingPeriod = 'monthly' | 'yearly';
export type BlockPlan = {
  id: string;
  name: string;
  description: string;
  monthlyPrice: number;
  yearlyPrice: number;
  features: string[];
  recommended?: boolean;
  icon?: React.ReactNode;
};
export type BasePlansBlockProps = BlockProps & {
  /** All screen labels and accessible names; action templates support placeholders. */
  copy?: Partial<typeof defaultCopy>;
  /** Plans and full billing-period prices. No payment integration is included. */
  plans?: BlockPlan[];
  /** Controlled billing period. */
  period?: BillingPeriod;
  /** Initial billing period. */
  defaultPeriod?: BillingPeriod;
  /** Reports billing period changes. */
  onPeriodChange?: (period: BillingPeriod) => void;
  /** Controlled selected plan ID. */
  selectedPlan?: string;
  /** Initial selected plan, otherwise the recommended/first plan. */
  defaultSelectedPlan?: string;
  /** Reports card selection without submitting. */
  onSelectedPlanChange?: (id: string) => void;
  /** Primary action with the selected plan and billing period. */
  onSelectPlan?: (plan: BlockPlan, period: BillingPeriod) => void;
  /** FAQ content. Empty arrays hide the FAQ. */
  faq?: BaseAccordionItem[];
  /** Controlled FAQ selection for hosts and presentations. */
  openFaq?: string;
  /** Reports FAQ changes. */
  onOpenFaqChange?: (value: string) => void;
  /** Currency formatting for prices, default USD/en-US. */
  currency?: string;
  /** Locale used to format prices. */
  locale?: string;
  /** Feature check slot; null removes the default icon. */
  featureIcon?: React.ReactNode;
};
const defaultPlans: BlockPlan[] = [
  {
    id: 'personal',
    name: 'Personal',
    description: 'A calm place for your own projects.',
    monthlyPrice: 10,
    yearlyPrice: 96,
    features: ['3 active projects', 'Unlimited notes', 'Community support'],
  },
  {
    id: 'team',
    name: 'Team',
    description: 'Everything your team needs to move forward.',
    monthlyPrice: 25,
    yearlyPrice: 240,
    features: [
      'Unlimited projects',
      'Shared workspaces',
      'Priority support',
      'Advanced insights',
    ],
    recommended: true,
  },
];
const defaultFaq: BaseAccordionItem[] = [
  {
    value: 'change',
    title: 'Can I change my plan later?',
    content:
      'Yes. Change plans from your account settings as your workspace grows.',
  },
  {
    value: 'annual',
    title: 'How does annual billing work?',
    content:
      'Annual prices cover a full year and are billed once per year. Monthly plans are billed once per month.',
  },
  {
    value: 'cancel',
    title: 'Can I cancel anytime?',
    content:
      'Manage your subscription from your account settings. Review your plan terms before continuing.',
  },
];

export function BasePlansBlock({
  copy,
  plans = defaultPlans,
  period: controlledPeriod,
  defaultPeriod = 'monthly',
  onPeriodChange,
  selectedPlan: controlledPlan,
  defaultSelectedPlan,
  onSelectedPlanChange,
  onSelectPlan,
  faq = defaultFaq,
  openFaq,
  onOpenFaqChange,
  currency = 'USD',
  locale = 'en-US',
  featureIcon,
  loading = false,
  error,
  ...props
}: BasePlansBlockProps) {
  const theme = useBaseTheme(props.theme);
  const t = { ...defaultCopy, ...copy };
  const [localPeriod, setLocalPeriod] = useState(defaultPeriod);
  const period = controlledPeriod ?? localPeriod;
  const [localPlan, setLocalPlan] = useState(
    defaultSelectedPlan ??
      plans.find((plan) => plan.recommended)?.id ??
      plans[0]?.id,
  );
  const selected = plans.find(
    (plan) => plan.id === (controlledPlan ?? localPlan),
  );
  const price = selected
    ? period === 'monthly'
      ? selected.monthlyPrice
      : selected.yearlyPrice
    : 0;
  const suffix = period === 'monthly' ? t.monthSuffix : t.yearSuffix;
  const format: Intl.NumberFormatOptions = {
    style: 'currency',
    currency,
    maximumFractionDigits: 2,
  };
  const formatter = new Intl.NumberFormat(locale, format);
  const action = t.continue.replace('{plan}', selected?.name ?? '');
  const selectPeriod = (next: string) => {
    if (loading || (next !== 'monthly' && next !== 'yearly')) return;
    if (controlledPeriod === undefined) setLocalPeriod(next);
    onPeriodChange?.(next);
  };
  return (
    <BlockFrame
      {...props}
      theme={theme}
      title={t.title}
      backLabel={props.backLabel ?? t.back}
    >
      <BlockSection>
        <BlockText medium style={{ fontSize: 24, lineHeight: 32 }}>
          {t.heading}
        </BlockText>
        <BlockText muted>{t.description}</BlockText>
      </BlockSection>
      {error ? (
        <BaseAlert
          variant="destructive"
          title={t.errorTitle}
          description={error}
        />
      ) : null}
      <BlockSection index={1}>
        <BaseTabs
          value={period}
          onValueChange={selectPeriod}
          tabs={[
            { value: 'monthly', label: t.monthly },
            { value: 'yearly', label: t.yearly },
          ]}
          testID="plans-period"
        />
        {t.savings ? (
          <BaseBadge variant="secondary">{t.savings}</BaseBadge>
        ) : null}
      </BlockSection>
      {loading ? (
        <View
          accessible
          accessibilityLabel={t.loading}
          accessibilityState={{ busy: true }}
          aria-busy={true}
          style={{ gap: theme.space[6] }}
        >
          <BaseSkeletonText lines={5} />
          <BaseSkeletonText lines={5} />
        </View>
      ) : plans.length ? (
        plans.map((plan, index) => (
          <BlockSection key={plan.id} index={index + 2}>
            <BaseCard
              onPress={() => {
                if (controlledPlan === undefined) setLocalPlan(plan.id);
                onSelectedPlanChange?.(plan.id);
              }}
              accessibilityLabel={`${plan.name}, ${formatter.format(period === 'monthly' ? plan.monthlyPrice : plan.yearlyPrice)}${suffix}`}
              accessibilityState={{ selected: selected?.id === plan.id }}
              aria-selected={selected?.id === plan.id}
              testID={`plan-${plan.id}`}
              style={{
                borderColor:
                  plan.recommended || selected?.id === plan.id
                    ? theme.colors.primary
                    : theme.colors.border,
              }}
            >
              <BaseCardHeader>
                {plan.icon}
                <BaseCardTitle>{plan.name}</BaseCardTitle>
                <BaseCardDescription>{plan.description}</BaseCardDescription>
                {selected?.id === plan.id ? (
                  <BaseBadge variant="outline">{t.selected}</BaseBadge>
                ) : null}
                {plan.recommended ? (
                  <BaseBadge variant="secondary">{t.recommended}</BaseBadge>
                ) : null}
              </BaseCardHeader>
              <BaseCardContent style={{ gap: theme.space[3] }}>
                <BlockText medium style={{ fontSize: 24, lineHeight: 32 }}>
                  {formatter.format(
                    period === 'monthly' ? plan.monthlyPrice : plan.yearlyPrice,
                  )}
                  {suffix}
                </BlockText>
                {plan.features.map((feature, featureIndex) => (
                  <View
                    key={`${featureIndex}-${feature}`}
                    style={{
                      flexDirection: 'row',
                      alignItems: 'flex-start',
                      gap: theme.space[2],
                    }}
                  >
                    <View
                      accessibilityElementsHidden
                      importantForAccessibility="no-hide-descendants"
                      style={{ paddingTop: 2 }}
                    >
                      {featureIcon === undefined ? (
                        <Check size={16} color={theme.colors.foreground} />
                      ) : (
                        featureIcon
                      )}
                    </View>
                    <BlockText style={{ flex: 1 }}>{feature}</BlockText>
                  </View>
                ))}
              </BaseCardContent>
            </BaseCard>
          </BlockSection>
        ))
      ) : (
        <BaseEmptyState title={t.emptyTitle} description={t.emptyDescription} />
      )}
      <BlockSection index={4}>
        <BaseButton
          fullWidth
          loading={loading}
          disabled={!selected || !!error}
          onPress={() => {
            if (selected) onSelectPlan?.(selected, period);
          }}
          testID={props.testID ?? 'base-plans-block'}
          style={{
            minHeight: 48,
            height: 'auto',
            paddingVertical: theme.space[3],
          }}
          accessibilityLabel={t.priceAction
            .replace('{action}', action)
            .replace('{price}', formatter.format(price))
            .replace('{period}', suffix)}
        >
          <View
            style={{
              flex: 1,
              flexDirection: 'row',
              flexWrap: 'wrap',
              alignItems: 'center',
              justifyContent: 'center',
              gap: theme.space[2],
            }}
          >
            <Text
              style={{
                fontFamily: theme.fonts.medium,
                fontSize: 14,
                lineHeight: 20,
                color: theme.colors.primaryForeground,
              }}
            >
              {action}
            </Text>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <BaseSlidingNumber
                value={price}
                locale={locale}
                format={format}
                fontSize={14}
                lineHeight={20}
                color={theme.colors.primaryForeground}
              />
              <Text
                style={{
                  fontFamily: theme.fonts.medium,
                  fontSize: 14,
                  lineHeight: 20,
                  color: theme.colors.primaryForeground,
                }}
              >
                {suffix}
              </Text>
            </View>
          </View>
        </BaseButton>
        <BlockText muted style={{ textAlign: 'center' }}>
          {t.disclaimer}
        </BlockText>
      </BlockSection>
      {faq.length ? (
        <BlockSection index={5} title={t.faq}>
          <BaseAccordion
            items={faq}
            value={openFaq}
            onValueChange={(value) =>
              onOpenFaqChange?.(
                typeof value === 'string' ? value : (value[0] ?? ''),
              )
            }
          />
        </BlockSection>
      ) : null}
    </BlockFrame>
  );
}
export default BasePlansBlock;

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-plans-block",
  "family": "base",
  "license": "MIT",
  "kind": "block",
  "registryDependencies": [
    "base-accordion",
    "base-alert",
    "base-badge",
    "base-button",
    "base-card",
    "base-empty-state",
    "base-header",
    "base-skeleton",
    "base-sliding-number",
    "base-tabs",
    "base-theme"
  ],
  "dependencies": {
    "lucide-react-native": "^1.61.0",
    "react-native-reanimated": "4.7.1",
    "react-native-svg": "15.16.0",
    "react-native-worklets": "0.13.0"
  }
}