AccordionItem

The Accordion component, when used with AccordionItem, allows for creating customizable, collapsible sections within an accordion layout. Each AccordionItem can be tailored with unique headers, icons, and content to suit the specific needs of your application.

Import

import { AccordionItem } from "phaselis";

Usage

Basic Accordion with AccordionItem

import { Accordion, AccordionItem } from "phaselis";
import { Text } from "react-native";

const Example = () => {
  return (
    <Accordion>
      <AccordionItem headerText="Section 1">
        <Text>Content for section 1</Text>
      </AccordionItem>
      <AccordionItem headerText="Section 2" expand>
        <Text>Content for section 2 (expanded by default)</Text>
      </AccordionItem>
      <AccordionItem headerText="Section 3">
        <Text>Content for section 3</Text>
      </AccordionItem>
    </Accordion>
  );
};

export default Example;

Props

headerText

string

The text that appears in the header of the accordion item.

import { Text } from "react-native";

<AccordionItem headerText="Overview">
  <Text>Here is a brief overview of the topic.</Text>
</AccordionItem>

expand

boolean

Specifies whether the accordion item should be expanded by default. The default value is false.

import { Text } from "react-native";

<AccordionItem headerText="Details" expand>
  <Text>This item is expanded by default.</Text>
</AccordionItem>

onChange

(expanded: boolean) => void

A callback function that triggers when the accordion item is expanded or collapsed. Receives the current expansion state (true for expanded, false for collapsed) as an argument.

import { Text } from "react-native";

<AccordionItem headerText="Toggle Me" onChange={(expanded) => console.log("Expanded state:", expanded)}>
  <Text>Expandable content goes here.</Text>
</AccordionItem>

style

Name	Type	Description
container	ViewStyle	Style for the container of the accordion item.
element	ViewStyle	Style for the content inside the accordion item.
header	ViewStyle	Style for the header part of the accordion item.

You can style the AccordionItem with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the element (content container).

import { Text } from "react-native";

// Object with named styles
<AccordionItem
  headerText="Styled Item"
  style={{
    container: { backgroundColor: "#e0e0e0", padding: 10 },
    element: { borderBottomColor: "#ccc", borderBottomWidth: 1 },
    header: { backgroundColor: "#f0f0f0" }
  }}
>
  <Text>Styled content within the accordion.</Text>
</AccordionItem>

// Direct element styling
<AccordionItem
  headerText="Direct Styled Item"
  style={{ padding: 16, backgroundColor: "#f5f5f5", borderRadius: 8 }}
>
  <Text>Content with direct element styling.</Text>
</AccordionItem>

containerStyle

ViewStyle

Additional style applied directly to the container.

<AccordionItem 
  headerText="Custom Container" 
  containerStyle={{ marginBottom: 16, borderRadius: 8 }}
>
  <Text>Content with custom container style</Text>
</AccordionItem>

headerStyle

ViewStyle

Additional style applied directly to the header section.

<AccordionItem 
  headerText="Custom Header Style" 
  headerStyle={{ backgroundColor: "#e8f4ff", padding: 12 }}
>
  <Text>Content with custom header style</Text>
</AccordionItem>

headerIcon

SlotIconName

The name of the icon displayed in the header, next to the text. Can be used to add visual cues or indicate the type of content within the accordion item.

import { Text } from "react-native";

<AccordionItem headerText="Information" headerIcon="Info">
  <Text>Details about this section.</Text>
</AccordionItem>

disabled

boolean

Disables the accordion item, preventing user interaction. The item cannot be expanded or collapsed when disabled.

import { Text } from "react-native";

<AccordionItem headerText="Unavailable" disabled>
  <Text>This section is not accessible.</Text>
</AccordionItem>

inContext

boolean

Indicates whether the item is part of a larger AccordionList context. The default value is false.

import { Text } from "react-native";

<AccordionItem headerText="Contextual Item" inContext>
  <Text>This item is used within an accordion context.</Text>
</AccordionItem>