Components
Accordion
Accordion component for React Native.
Installation
npx rn-glow add accordion⚙️ Props
Accordion Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The content to be rendered inside the accordion container. |
className | string | — | Optional CSS class for the accordion root. |
AccordionItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content of a single accordion item. |
isActive | boolean | false | Controls whether the item is expanded. |
onToggle | () => void | — | Callback when the item is toggled. |
className | string | — | Optional class to style the item. |
AccordionTrigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The clickable element to trigger expand/collapse. |
isActive | boolean | false | Indicates if the associated item is active. |
onToggle | () => void | — | Triggered when the item is clicked/toggled. |
className | string | — | Optional class to style the trigger. |
AccordionContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The content shown when the item is expanded. |
isActive | boolean | false | Whether the content is visible. |
className | string | — | Optional class to style the content. |
🚀 Example
import { View, Text, ScrollView, SafeAreaView } from "react-native";
import React from "react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/index";
const AccordionDemo = (): React.ReactNode => {
return (
<ScrollView
className="flex-1 bg-gray-950"
contentContainerStyle={{
flexGrow: 1,
paddingVertical: 24,
}}
scrollEnabled={true}
>
<SafeAreaView className="flex-1">
<View className="px-6 mb-14 mt-5">
<Text className="text-white text-2xl font-semibold text-center mb-2">
Frequently Asked Questions
</Text>
<Text className="text-gray-400 text-center text-sm">
Everything you need to know about our platform
</Text>
</View>
<View className="mx-6">
<Accordion className="space-y-1">
<AccordionItem className="border border-gray-800 rounded-lg overflow-hidden">
<AccordionTrigger className="px-6 py-4 hover:bg-gray-900/50">
<Text className="text-white text-base font-medium">
How do I get started?
</Text>
</AccordionTrigger>
<AccordionContent className="px-6 py-4 bg-gray-900/30 border-t border-gray-800">
<View className="ml-3">
<Text className="text-gray-300 text-sm leading-6">
Getting started is simple. Create your account, complete
your profile, and explore the dashboard. Our onboarding
guide will walk you through the essential features to help
you get up and running quickly.
</Text>
</View>
</AccordionContent>
</AccordionItem>
</Accordion>
</View>
</SafeAreaView>
</ScrollView>
);
};
export default AccordionDemo;