Required dependencies

npm install react react-native
npm install @react-native-aria/accordion @react-native-aria/button @react-native-aria/checkbox
npm install @react-native-aria/focus @react-native-aria/interactions @react-native-aria/listbox
npm install @react-native-aria/menu @react-native-aria/overlays @react-native-aria/radio
npm install @react-native-aria/slider @react-native-aria/switch @react-native-aria/tooltip
npm install @react-stately/collections @react-stately/list @react-stately/menu
npm install @react-stately/overlays @react-stately/radio @react-stately/slider
npm install @react-stately/toggle @react-stately/tree
npm install react-native-reanimated

If you are using Expo:

npx expo prebuild
# then for iOS:
cd ios && pod install

Ensure react-native-reanimated babel plugin is active in babel.config.js:

plugins: ['react-native-reanimated/plugin']

Project setup

1. Copy the source/ directory into your project, e.g. src/gluestack-core/.

2. Add a TypeScript path alias in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@gluestack-core/*": ["./src/gluestack-core/*"]
    }
  }
}

3. Mirror the alias in babel.config.js using babel-plugin-module-resolver:

plugins: [
  ['module-resolver', {
    alias: { '@gluestack-core': './src/gluestack-core' }
  }],
  'react-native-reanimated/plugin'
]

4. Import from the barrel:

import { createAccordion, createButton, useAccordion } from '@gluestack-core/index';

5. No environment variables are required. The library is pure JS/TS.

Public API

createAccordion

function createAccordion<
  AccordionProps, ItemProps, HeaderProps, TriggerProps,
  ContentProps, IconProps, TitleTextProps, ContentTextProps
>(components: {
  Root: React.ComponentType<AccordionProps>;
  Item: React.ComponentType<ItemProps>;
  Header: React.ComponentType<HeaderProps>;
  Trigger: React.ComponentType<TriggerProps>;
  Content: React.ComponentType<ContentProps>;
  Icon: React.ComponentType<IconProps>;
  TitleText: React.ComponentType<TitleTextProps>;
  ContentText: React.ComponentType<ContentTextProps>;
}): IAccordionComponentType<...>

Pass your own styled primitives (View, Pressable, Text, etc.) and receive a fully composed Accordion component with .Item, .Header, .Trigger, .Content, .Icon, .TitleText, and .ContentText sub-components attached. Use this when you want gluestack's ARIA/keyboard behavior with your own visual design.

createActionsheet

function createActionsheet<
  ActionsheetProps, BackdropProps, ItemProps, ItemTextProps,
  DragIndicatorProps, IndicatorWrapperProps, ContentProps,
  ScrollViewProps, VirtualizedListProps, FlatListProps,
  SectionListProps, SectionHeaderTextProps, IconProps, AnimatePresenceProps
>(components: {
  Root: React.ComponentType<ActionsheetProps>;
  Backdrop: React.ComponentType<BackdropProps>;
  Item: React.ComponentType<ItemProps>;
  ItemText: React.ComponentType<ItemTextProps>;
  DragIndicator: React.ComponentType<DragIndicatorProps>;
  IndicatorWrapper: React.ComponentType<IndicatorWrapperProps>;
  Content: React.ComponentType<ContentProps>;
  ScrollView: React.ComponentType<ScrollViewProps>;
  VirtualizedList: React.ComponentType<VirtualizedListProps>;
  FlatList: React.ComponentType<FlatListProps>;
  SectionList: React.ComponentType<SectionListProps>;
  SectionHeaderText: React.ComponentType<SectionHeaderTextProps>;
  Icon: React.ComponentType<IconProps>;
  AnimatePresence: React.ComponentType<AnimatePresenceProps>;
}): IActionsheetComponentType<...>

Builds a bottom-sheet Actionsheet with gesture-driven drag, animated content entry, and a tap-to-dismiss backdrop. Pass your own styled wrapper components for each slot.

useAccordion / useAccordionItem

// from accordion/aria/useAccordion.ts
function useAccordion(props: AccordionAria): AccordionState;

// from accordion/aria/useAccordionItem.ts
function useAccordionItem(props: AccordionItemAria, state: AccordionState): AccordionItemResult;

Low-level ARIA hooks for building a custom Accordion without using createAccordion. useAccordion manages open-item state; useAccordionItem returns the props to spread onto the trigger and panel elements. Useful when the creator abstraction is too heavy.

Working examples

Scenario - Custom styled Accordion

Build an Accordion entirely from React Native primitives and plug in gluestack's ARIA behavior.

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { createAccordion } from '@gluestack-core/index';

const Accordion = createAccordion({
  Root: View,
  Item: View,
  Header: View,
  Trigger: Pressable,
  Content: View,
  Icon: View,
  TitleText: Text,
  ContentText: Text,
});

export default function MyAccordion() {
  return (
    <Accordion type="single" defaultValue={['item-1']}>
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>
            <Accordion.TitleText>What is gluestack-ui?</Accordion.TitleText>
            <Accordion.Icon />
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          <Accordion.ContentText>
            A headless component library for React and React Native.
          </Accordion.ContentText>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Scenario - Actionsheet bottom sheet

Wire up an Actionsheet that opens on button press with a draggable indicator and animated backdrop.

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';
import Animated from 'react-native-reanimated';
import { createActionsheet } from '@gluestack-core/index';

const Actionsheet = createActionsheet({
  Root: View,
  Backdrop: Pressable,
  Item: Pressable,
  ItemText: Text,
  DragIndicator: View,
  IndicatorWrapper: View,
  Content: Animated.View,
  ScrollView: View,
  VirtualizedList: View,
  FlatList: View,
  SectionList: View,
  SectionHeaderText: Text,
  Icon: View,
  AnimatePresence: View,
});

export default function MySheet() {
  const [open, setOpen] = useState(false);
  return (
    <View>
      <Pressable onPress={() => setOpen(true)}>
        <Text>Open Sheet</Text>
      </Pressable>
      <Actionsheet isOpen={open} onClose={() => setOpen(false)}>
        <Actionsheet.Backdrop onPress={() => setOpen(false)} />
        <Actionsheet.Content>
          <Actionsheet.DragIndicatorWrapper>
            <Actionsheet.DragIndicator />
          </Actionsheet.DragIndicatorWrapper>
          <Actionsheet.Item onPress={() => setOpen(false)}>
            <Actionsheet.ItemText>Delete</Actionsheet.ItemText>
          </Actionsheet.Item>
          <Actionsheet.Item onPress={() => setOpen(false)}>
            <Actionsheet.ItemText>Share</Actionsheet.ItemText>
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </View>
  );
}

Scenario - Raw ARIA hook usage

Use useAccordion and useAccordionItem directly to build a web-accessible accordion without the creator factory.

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { useAccordion, useAccordionItem } from '@gluestack-core/index';

function RawAccordion() {
  const state = useAccordion({ defaultExpandedKeys: new Set(['a']) });

  const { triggerProps, contentProps } = useAccordionItem(
    { key: 'a' },
    state
  );

  return (
    <View>
      <Pressable {...triggerProps}>
        <Text>Section A</Text>
      </Pressable>
      <View {...contentProps}>
        <Text>Content for section A</Text>
      </View>
    </View>
  );
}

export default RawAccordion;

File walkthrough

• index.tsx / index.js - Dual-format barrel re-exporting every creator function and ARIA hook; import from here in application code.
• accordion/aria/ - useAccordion and useAccordionItem hooks plus their TypeScript types.
• accordion/creator/ - createAccordion factory, sub-component wrappers, animated height helper, and context.
• actionsheet/creator/ - createActionsheet factory with backdrop animation, drag gesture, and scroll-view variants.
• alert/creator/ - createAlert factory with Alert, AlertIcon, AlertText slots.
• alert-dialog/creator/ - createAlertDialog factory with backdrop, body, close button, content, and footer slots.
• avatar/creator/ - Avatar creator.
• button/aria/ - Button ARIA hooks.
• button/creator/ - Button creator.
• checkbox/aria/ - Checkbox ARIA hooks.
• checkbox/creator/ - Checkbox creator.
• divider/creator/ - Divider creator.
• fab/creator/ - Floating Action Button creator.
• form-control/creator/ - FormControl creator for label/error wiring.
• icon/creator/ - Icon creator.
• image/creator/ - Image creator.
• input/creator/ - Input creator.
• link/creator/ - Link creator.
• menu/aria/ - Menu ARIA hooks.
• menu/creator/ - Menu creator.
• modal/creator/ - Modal creator.
• overlay/creator/ - Shared overlay primitive (portal, backdrop).
• popover/creator/ - Popover creator.
• pressable/creator/ - Pressable creator.
• progress/creator/ - Progress bar creator.
• radio/aria/ - Radio ARIA hooks.
• radio/creator/ - Radio creator.
• select/creator/ - Select creator.
• slider/aria/ - Slider ARIA hooks.
• slider/creator/ - Slider creator.
• spinner/creator/ - Spinner creator.
• switch/aria/ - Switch ARIA hooks.
• switch/creator/ - Switch creator.
• textarea/creator/ - Textarea creator.
• toast/creator/ - Toast creator.
• tooltip/creator/ - Tooltip creator.

Common pitfalls and fixes

• react-native-reanimated not configured - The Actionsheet and AnimatedHeight helpers require Reanimated; add react-native-reanimated/plugin as the last Babel plugin and run pod install.
• ESM/CJS interop errors when bundling for web - Use index.tsx (ESM) instead of index.js (CJS) as the entry in your bundler's resolve.mainFields or alias config.
• TypeScript "no exported member" errors - Ensure your tsconfig.json targets "moduleResolution": "bundler" or "node16" so re-exports resolve through the barrel correctly.
• Sub-components missing on the composed object - Every slot component (Root, Item, Header, etc.) must be supplied to the creator; passing undefined silently drops that sub-component and causes runtime TypeError calls.
• iOS gesture conflicts with ScrollView inside Actionsheet - Pass the native ScrollView from react-native directly to the ScrollView slot so the gesture responder chain resolves correctly; avoid wrapping it in another Animated component.
• Peer dep version mismatch for @react-native-aria/* - All @react-native-aria packages must be the same minor version; mixed versions cause duplicate context errors at runtime.

Vibe-coding prompt template

I have copied the gluestack-ui v3 core source into my project at `src/gluestack-core/`.
The integration guide is in `USAGE.md` in the same directory.
The upstream package is `gluestack-ui-v3` (mobile domain), source root `packages/gluestack-core/src`.

Please help me integrate these components into my existing React Native / Expo project step by step:

1. Read `USAGE.md` fully before taking any action.
2. Add the required npm dependencies listed in the "Required dependencies" section.
3. Configure `tsconfig.json` and `babel.config.js` path aliases so I can import from `@gluestack-core/index`.
4. Using only exports that appear in `src/gluestack-core/index.tsx`, create a `createAccordion` call that wraps my existing styled View/Pressable/Text components.
5. Do the same for any other components I need (list them).
6. Show me a working screen component that renders the composed components.
7. Point out any native build steps (pod install, prebuild) I need to run.

Do not invent any API that is not present in `src/gluestack-core/index.tsx` or the files referenced in `USAGE.md`.

License and credit

The upstream source is part of the gluestack-ui project maintained by GeekyAnts. See source/LICENSE if present for the exact license terms (the repository uses the MIT license). Credit: GeekyAnts / gluestack team.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

The full install guide and integration prompts unlock after purchase.