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.

Hướng dẫn cài đặt đầy đủ và prompt tích hợp sẽ mở khóa sau khi mua.