Native Animation

Sign in Get all-access

Base Select animation preview

Base Select animation preview

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

npx nativeanimation add base-select

Base Select

React Native Select Component

A select field with an anchored option list and configurable options, placeholder, label, 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

Related guides

React Native Dropdown List: Search and Multi-Select

A select field with an anchored option list and configurable options, placeholder, label, and theme.

How it works

The 36 pt field uses the shared input surface, border, shadow, and a 3 pt focus ring while open.
The chevron rotates 180° with the 300/30 selection spring, mass 1.
The list measures the trigger and matches its width, flipping above it when needed.
A 400/29 spring, mass 1, opens the panel from scale 0.8. Closing takes 150 ms, and selection calls onValueChange.

Install

npx nativeanimation add base-select

The CLI also copies base-theme. Dependencies, if you copy by hand:

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

Wrap the host app in GestureHandlerRootView.

Usage

import { BaseSelect } from './base-select';

<BaseSelect
  label="Region"
  value={region}
  onValueChange={setRegion}
  options={[
    { value: 'us-east', label: 'US East' },
    { value: 'europe', label: 'Europe' },
  ]}
/>

<BaseSelect
  label="Plan"
  placeholder="Choose a plan"
  value={plan}
  onValueChange={setPlan}
  options={[
    { value: 'starter', label: 'Starter', description: 'For personal projects' },
    { value: 'team', label: 'Team', description: 'For growing teams' },
    { value: 'enterprise', label: 'Enterprise', disabled: true },
  ]}
/>

A transparent native Modal contains the list. It is clamped to the screen with an 8 pt margin, and long option lists scroll. The control owns no safe-area padding; place the field within your screen layout.

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. The theme prop overrides the provider. Load the font families declared in your theme once in the host app.

Props

Prop	Type	Default	Description
`value`	`string`	—	Selected option value (controlled).
`onValueChange`	`(value: string) => void`	—	Called when an enabled option is selected.
`options`	`BaseSelectOption[]`	—	Options with value, label, optional description and disabled.
`placeholder`	`string`	'Select an option'	Displayed when value has no matching option.
`label`	`string`	—	Visible field label.
`disabled`	`boolean`	false	Dims and blocks the control.
`open / onOpenChange`	`boolean / (open: boolean) => void`	uncontrolled	Optional external open state.
`accessibilityLabel`	`string`	label or placeholder	Accessible field name.
`theme`	`BaseTheme`	provider	Overrides the shared family theme.
`style`	`StyleProp<ViewStyle>`	—	Container style.
`testID`	`string`	—	Stable test identifier.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Runs on iOS, Android and web, in Expo Go and development builds. Part of Native Animation Base, a free family that shares one theme.

Accessibility

The trigger is a combobox with its expanded, disabled, and current value states. Options expose selected and disabled states. Outside taps, Android back, accessibility escape, and web Escape close the list. Enter/Space or arrow keys open it on web; Tab and Enter/Space navigate and choose options. Reduce Motion makes all transitions immediate.

Touch targets

Options are at least 48 dp tall on Android and 44 pt tall on iOS and 44 px tall on web. The field target is 48 dp tall on Android and 44 pt on iOS and 44 px on web. Longer lists scroll within the screen. Keep the field at least 48 dp wide on Android or 44 pt wide on iOS and 44 px wide on web. Leave enough room between neighboring fields for their full targets.

Part of a shared foundation

Use it in a screen

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

Vertical Range Window ↗

A vertical range control with independent handles and a draggable interval band, with configurable bounds, palette, and fonts.

Another way to solve this task · $9

Document Corner Capture ↗

A document review tool with draggable corners and an image loupe, with configurable image, labels, palette, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
lucide-react-native	^1.61.0
react-native-gesture-handler	~3.3.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	3	10/28/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~3.3.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-gesture-handler ~2.32.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

Base Switch
A switch with a stretching, spring-driven thumb that takes its colors and radius from a configurable theme.
Free
Base Separator
A static horizontal or vertical separator with configurable inset, optional horizontal label, semantics, and theme.
Free
Base Input
A text field with a fading focus ring, animated password reveal and clear controls, auto-growing multiline text, and configurable labels, icons, validation…
Free
Base List Row
A composable list row with press feedback and configurable copy, leading content, trailing content, and theme.
Free

AnchoredPanel.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  BaseThemeProvider,
  type BaseTheme,
} from '../base-theme';
import React, {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';
import {
  AccessibilityInfo,
  Modal,
  Platform,
  ScrollView,
  StyleSheet,
  View,
  useWindowDimensions,
} from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import { scheduleOnRN } from 'react-native-worklets';

type Rect = { x: number; y: number; width: number; height: number };
export function useAnchoredPanel(
  controlled?: boolean,
  onOpenChange?: (open: boolean) => void,
) {
  const triggerRef = useRef<React.ComponentRef<typeof View>>(null);
  const [internal, setInternal] = useState(false);
  const open = controlled ?? internal;
  const changeOpen = useCallback(
    (next: boolean) => {
      if (controlled === undefined) setInternal(next);
      onOpenChange?.(next);
      if (!next && Platform.OS === 'web') triggerRef.current?.focus();
    },
    [controlled, onOpenChange],
  );
  return { triggerRef, open, changeOpen };
}
export function AnchoredPanel({
  open,
  onClose,
  anchorRef,
  align = 'start',
  matchWidth = false,
  motion = 'menu',
  theme,
  children,
  accessibilityLabel,
  role = 'menu',
}: {
  open: boolean;
  onClose: () => void;
  anchorRef: React.RefObject<React.ComponentRef<typeof View> | null>;
  align?: 'start' | 'end';
  matchWidth?: boolean;
  motion?: 'menu' | 'select';
  theme: BaseTheme;
  children: React.ReactNode;
  accessibilityLabel?: string;
  role?: 'menu' | 'list' | 'listbox';
}) {
  const { width, height } = useWindowDimensions();
  const reduced = useBaseReducedMotion();
  const [mounted, setMounted] = useState(open);
  if (open && !mounted) setMounted(true);
  const [anchor, setAnchor] = useState<Rect | null>(null);
  const [origin, setOrigin] = useState<Rect | null>(null);
  const [panelHeight, setPanelHeight] = useState(0);
  const root = useRef<React.ComponentRef<typeof View>>(null);
  const panel = useRef<React.ComponentRef<typeof View>>(null);
  const version = useRef(0);
  const pose = useSharedValue(0);
  const finishExit = useCallback((ticket: number) => {
    if (version.current === ticket) {
      setMounted(false);
      setAnchor(null);
      setOrigin(null);
      setPanelHeight(0);
    }
  }, []);
  useLayoutEffect(() => {
    if (!open) return;
    let current = true;
    anchorRef.current?.measureInWindow((x, y, w, h) => {
      if (current) setAnchor({ x, y, width: w, height: h });
    });
    return () => {
      current = false;
    };
  }, [open, width, height, anchorRef]);
  const ready = Boolean(anchor && origin && panelHeight);
  useEffect(() => {
    const lifecycle = version;
    const ticket = ++lifecycle.current;
    if (!mounted) return;
    if (open && ready) {
      pose.set(
        reduced
          ? 1
          : motion === 'select'
            ? withSpring(1, {
                reduceMotion: ReduceMotion.Never,
                stiffness: 400,
                damping: 29,
                mass: 1,
              })
            : withTiming(1, {
                reduceMotion: ReduceMotion.Never,
                duration: 220,
                easing: Easing.bezier(...theme.motion.curves.soft),
              }),
      );
      if (Platform.OS !== 'web' && panel.current)
        AccessibilityInfo.sendAccessibilityEvent(panel.current, 'focus');
    } else if (!open) {
      pose.set(
        withTiming(
          0,
          {
            reduceMotion: ReduceMotion.Never,
            duration: reduced ? 0 : motion === 'select' ? 150 : 220,
            easing: Easing.bezier(...theme.motion.curves.soft),
          },
          (finished) => {
            if (finished) scheduleOnRN(finishExit, ticket);
          },
        ),
      );
    }
    return () => {
      lifecycle.current++;
      cancelAnimation(pose);
    };
  }, [open, mounted, ready, reduced, motion, theme, pose, finishExit]);
  const localAnchor =
    anchor && origin
      ? { ...anchor, x: anchor.x - origin.x, y: anchor.y - origin.y }
      : null;
  const viewportWidth = origin?.width || width;
  const viewportHeight = origin?.height || height;
  const panelWidth = Math.max(
    0,
    Math.min(
      viewportWidth - 16,
      matchWidth ? (anchor?.width ?? 192) : Math.max(192, anchor?.width ?? 0),
    ),
  );
  const below = localAnchor
    ? Math.max(0, viewportHeight - 8 - localAnchor.y - localAnchor.height - 4)
    : 0;
  const above = localAnchor ? Math.max(0, localAnchor.y - 12) : 0;
  const flipped = panelHeight > below && above > below;
  const maxHeight = Math.max(0, flipped ? above : below);
  const shownHeight = Math.min(panelHeight, maxHeight);
  const left = Math.max(
    8,
    Math.min(
      viewportWidth - panelWidth - 8,
      localAnchor
        ? localAnchor.x + (align === 'end' ? localAnchor.width - panelWidth : 0)
        : 8,
    ),
  );
  const top = Math.max(
    8,
    Math.min(
      viewportHeight - shownHeight - 8,
      localAnchor
        ? flipped
          ? localAnchor.y - shownHeight - 4
          : localAnchor.y + localAnchor.height + 4
        : 8,
    ),
  );
  const animated = useAnimatedStyle(() => ({
    opacity: ready ? pose.get() : 0,
    transform: [
      {
        scale: reduced
          ? 1
          : (motion === 'select' ? 0.8 : 0.9) +
            (motion === 'select' ? 0.2 : 0.1) * pose.get(),
      },
    ],
  }));
  const outside = Gesture.Tap()
    .enabled(open)
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(onClose);
    });
  if (!mounted) return null;
  return (
    <Modal
      visible
      transparent
      animationType="none"
      statusBarTranslucent
      navigationBarTranslucent
      onRequestClose={onClose}
      onShow={() =>
        root.current?.measureInWindow((x, y, w, h) =>
          setOrigin({ x, y, width: w, height: h }),
        )
      }
    >
      <GestureHandlerRootView style={{ flex: 1 }}>
        <BaseThemeProvider theme={theme}>
          <View
            ref={root}
            collapsable={false}
            style={{ flex: 1 }}
            onLayout={() =>
              root.current?.measureInWindow((x, y, w, h) =>
                setOrigin({ x, y, width: w, height: h }),
              )
            }
          >
            <GestureDetector gesture={outside}>
              <Animated.View
                accessible={false}
                importantForAccessibility="no"
                style={StyleSheet.absoluteFill}
              />
            </GestureDetector>
            <Animated.View
              ref={panel}
              // RN Web supports listbox; RN 0.86 native roles use list for this container.
              role={
                role === 'listbox'
                  ? Platform.OS === 'web'
                    ? ('listbox' as 'list')
                    : 'list'
                  : role
              }
              accessibilityLabel={accessibilityLabel}
              accessibilityViewIsModal
              aria-modal
              onAccessibilityEscape={onClose}
              pointerEvents={open && ready ? 'auto' : 'none'}
              {
                /* RN Web forwards DOM events rather than native event objects. */
                ...((Platform.OS === 'web'
                  ? {
                      onKeyDown: (event: React.KeyboardEvent) => {
                        if (event.key === 'Escape') {
                          event.stopPropagation();
                          onClose();
                        }
                      },
                    }
                  : {}) as object)
              }
              style={[
                {
                  position: 'absolute',
                  left,
                  top,
                  width: panelWidth,
                  maxHeight: ready
                    ? maxHeight
                    : Math.max(44, viewportHeight - 16),
                  borderWidth: 1,
                  borderColor: theme.colors.border,
                  backgroundColor: theme.colors.popover,
                  borderRadius: theme.radius.md,
                  boxShadow: theme.shadow.lg,
                  transformOrigin: `${align === 'end' ? 'right' : 'left'} ${flipped ? 'bottom' : 'top'}`,
                },
                animated,
              ]}
            >
              <ScrollView
                showsVerticalScrollIndicator={false}
                keyboardShouldPersistTaps="handled"
                onContentSizeChange={(_w, h) => setPanelHeight(h + 2)}
                contentContainerStyle={{ padding: 4 }}
              >
                {children}
              </ScrollView>
            </Animated.View>
          </View>
        </BaseThemeProvider>
      </GestureHandlerRootView>
    </Modal>
  );
}

BaseSelect.tsx

import Animated, {
  ReduceMotion,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {
  baseActivationProps,
  useBaseReducedMotion,
  spring,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';
import {
  Platform,
  Text,
  View,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import Check from 'lucide-react-native/icons/check';
import ChevronDown from 'lucide-react-native/icons/chevron-down';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { scheduleOnRN } from 'react-native-worklets';

import { AnchoredPanel, useAnchoredPanel } from './AnchoredPanel';

// Web only: no browser focus outline; the item highlight shows focus instead.
const NO_WEB_OUTLINE =
  Platform.OS === 'web' ? ({ outlineStyle: 'none' } as object) : null;

export type BaseSelectOption = {
  /** Current controlled value. */
  value: string;
  /** Visible label. */
  label: string;
  /** Optional supporting description. */
  description?: string;
  /** Dims the control and prevents activation. */
  disabled?: boolean;
};
export type BaseSelectProps = {
  /** Current controlled value. */
  value?: string;
  /** Called after an enabled choice is activated. */
  onValueChange: (value: string) => void;
  /** Choices shown in the anchored list. */
  options: BaseSelectOption[];
  /** Text shown when no matching value is selected. */
  placeholder?: string;
  /** Visible label. */
  label?: string;
  /** Dims the control and prevents activation. */
  disabled?: boolean;
  /** Optionally controls the anchored panel. */
  open?: boolean;
  /** Called when opening or closing is requested. */
  onOpenChange?: (open: boolean) => void;
  /** Accessible name for this control or task. */
  accessibilityLabel?: string;
  /** Overrides the nearest BaseThemeProvider. */
  theme?: BaseTheme;
  /** Style applied to the container. */
  style?: StyleProp<ViewStyle>;
  /** Stable identifier for the root or trigger. */
  testID?: string;
};
export function BaseSelect({
  value,
  onValueChange,
  options,
  placeholder = 'Select an option',
  label,
  disabled = false,
  open: controlled,
  onOpenChange,
  accessibilityLabel,
  theme: override,
  style,
  testID,
}: BaseSelectProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  const { triggerRef, open, changeOpen } = useAnchoredPanel(
    controlled,
    onOpenChange,
  );
  const expanded = open && !disabled;
  const rotation = useSharedValue(0);
  const press = useSharedValue(1);
  const selected = options.find((option) => option.value === value);
  useEffect(() => {
    rotation.set(
      reduced
        ? Number(expanded)
        : withSpring(Number(expanded), spring(theme, 'selection')),
    );
  }, [expanded, reduced, theme, rotation]);
  const chevron = useAnimatedStyle(() => ({
    transform: [{ rotate: `${180 * rotation.get()}deg` }],
  }));
  const pressStyle = useAnimatedStyle(() => ({
    transform: [{ scale: press.get() }],
  }));
  const toggle = () => {
    if (!disabled) changeOpen(!expanded);
  };
  const tap = Gesture.Tap()
    .enabled(!disabled)
    .onBegin(() => {
      press.set(
        reduced
          ? 1
          : withSpring(theme.motion.scales.press, spring(theme, 'press')),
      );
    })
    .onFinalize(() => {
      press.set(reduced ? 1 : withSpring(1, spring(theme, 'press')));
    })
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(toggle);
    });
  return (
    <View
      style={[
        {
          gap: 8,
          opacity: disabled ? 0.5 : 1,
          paddingVertical: Platform.OS === 'android' ? 2 : 0,
          marginVertical: Platform.OS === 'android' ? -2 : 0,
        },
        style,
      ]}
    >
      {label ? (
        <Text
          style={{
            fontFamily: theme.fonts.medium,
            fontSize: 14,
            lineHeight: 20,
            color: theme.colors.foreground,
          }}
        >
          {label}
        </Text>
      ) : null}
      <GestureDetector gesture={tap}>
        <Animated.View
          testID={testID}
          accessible
          accessibilityRole="combobox"
          accessibilityLabel={accessibilityLabel ?? label ?? placeholder}
          accessibilityValue={{ text: selected?.label ?? placeholder }}
          accessibilityState={{ expanded, disabled }}
          aria-expanded={expanded}
          aria-disabled={disabled}

          {
            /* RN Web forwards DOM events rather than native event objects. */
            ...((Platform.OS === 'web'
              ? {
                  tabIndex: disabled ? -1 : 0,
                  onKeyDown: (event: React.KeyboardEvent) => {
                    if (
                      ['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(event.key)
                    ) {
                      event.preventDefault();
                      if (!disabled) changeOpen(true);
                    }
                  },
                }
              : {}) as object)
          }
          {
            /* RN Web forwards DOM events rather than native event objects. */
            ...(baseActivationProps(toggle, disabled) as object)
          }
          style={[
            NO_WEB_OUTLINE,
            [
              {
                minHeight: Platform.OS === 'android' ? 48 : 44,
                paddingVertical: Platform.OS === 'android' ? 6 : 4,
                marginVertical: Platform.OS === 'android' ? -2 : 0,
              },
              pressStyle,
            ],
          ]}
        >
          <View
            ref={triggerRef}
            collapsable={false}
            style={{
              height: 36,
              borderWidth: 1,
              borderColor: expanded ? theme.colors.ring : theme.colors.input,
              borderRadius: theme.radius.md,
              paddingHorizontal: 12,
              backgroundColor: theme.colors.inputSurface,
              boxShadow: theme.shadow.xs,
              flexDirection: 'row',
              alignItems: 'center',
              gap: 8,
            }}
          >
            {expanded ? (
              <View
                pointerEvents="none"
                style={{
                  position: 'absolute',
                  top: -4,
                  left: -4,
                  right: -4,
                  bottom: -4,
                  borderWidth: 3,
                  borderColor: theme.colors.ringSoft,
                  borderRadius: theme.radius.md + 3,
                }}
              />
            ) : null}
            <Text
              numberOfLines={1}
              style={{
                flex: 1,
                fontFamily: theme.fonts.regular,
                fontSize: 14,
                color: selected
                  ? theme.colors.foreground
                  : theme.colors.mutedForeground,
              }}
            >
              {selected?.label ?? placeholder}
            </Text>
            <Animated.View style={chevron}>
              <ChevronDown size={16} color={theme.colors.mutedForeground} />
            </Animated.View>
          </View>
        </Animated.View>
      </GestureDetector>
      <AnchoredPanel
        open={expanded}
        onClose={() => changeOpen(false)}
        anchorRef={triggerRef}
        matchWidth
        motion="select"
        theme={theme}
        role="listbox"
        accessibilityLabel={accessibilityLabel ?? label}
      >
        {options.map((option) => (
          <Option
            key={option.value}
            option={option}
            selected={option.value === value}
            theme={theme}
            onSelect={() => {
              changeOpen(false);
              onValueChange(option.value);
            }}
          />
        ))}
      </AnchoredPanel>
    </View>
  );
}
function Option({
  option,
  selected,
  theme,
  onSelect,
}: {
  option: BaseSelectOption;
  selected: boolean;
  theme: BaseTheme;
  onSelect: () => void;
}) {
  const reduced = useBaseReducedMotion();
  const highlight = useSharedValue(0);
  const tap = Gesture.Tap()
    .enabled(!option.disabled)
    .onBegin(() => {
      highlight.set(
        withTiming(1, {
          reduceMotion: ReduceMotion.Never,
          duration: reduced ? 0 : 100,
        }),
      );
    })
    .onFinalize(() => {
      highlight.set(
        withTiming(0, {
          reduceMotion: ReduceMotion.Never,
          duration: reduced ? 0 : 100,
        }),
      );
    })
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(onSelect);
    });
  const animated = useAnimatedStyle(() => ({ opacity: highlight.get() }));
  return (
    <GestureDetector gesture={tap}>
      <Animated.View
        accessible
        accessibilityRole="menuitem"
        role="option"
        accessibilityLabel={
          option.description
            ? `${option.label}. ${option.description}`
            : option.label
        }
        accessibilityState={{ selected, disabled: option.disabled }}
        aria-selected={selected}
        aria-disabled={option.disabled}

        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...((Platform.OS === 'web'
            ? {
                tabIndex: option.disabled ? -1 : 0,
                onFocus: () => highlight.set(1),
                onBlur: () => highlight.set(0),
                onKeyDown: (event: React.KeyboardEvent) => {
                  if (
                    !option.disabled &&
                    (event.key === 'Enter' || event.key === ' ')
                  ) {
                    event.preventDefault();
                    onSelect();
                  }
                },
              }
            : {}) as object)
        }
        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...(baseActivationProps(onSelect, option.disabled) as object)
        }
        style={[
          NO_WEB_OUTLINE,
          {
            minHeight: Platform.OS === 'android' ? 48 : 44,
            paddingHorizontal: 8,
            paddingVertical: 6,
            borderRadius: theme.radius.sm,
            flexDirection: 'row',
            alignItems: 'center',
            gap: 8,
            opacity: option.disabled ? 0.5 : 1,
          },
        ]}
      >
        <Animated.View
          pointerEvents="none"
          style={[
            {
              position: 'absolute',
              inset: 0,
              borderRadius: theme.radius.sm,
              backgroundColor: theme.colors.accent,
            },
            animated,
          ]}
        />
        <View style={{ flex: 1, gap: 2 }}>
          <Text
            style={{
              fontFamily: theme.fonts.regular,
              fontSize: 14,
              lineHeight: 20,
              color: theme.colors.popoverForeground,
            }}
          >
            {option.label}
          </Text>
          {option.description ? (
            <Text
              style={{
                fontFamily: theme.fonts.regular,
                fontSize: 12,
                lineHeight: 18,
                color: theme.colors.mutedForeground,
              }}
            >
              {option.description}
            </Text>
          ) : null}
        </View>
        <View style={{ width: 14 }}>
          {selected ? (
            <Check size={14} color={theme.colors.popoverForeground} />
          ) : null}
        </View>
      </Animated.View>
    </GestureDetector>
  );
}
export default BaseSelect;

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-select",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "lucide-react-native": "^1.61.0",
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-svg": "15.16.0",
    "react-native-worklets": "0.13.0"
  }
}