### Start Example App Packager

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Starts the Metro server packager for the example application. This is necessary to run the example app on various platforms.

```sh
yarn example start
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. Requires iOS development environment setup.

```sh
yarn example ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. Requires Android development environment setup.

```sh
yarn example android
```

--------------------------------

### Run Example App on Web

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Builds and runs the example application on the web platform. This allows testing the library's compatibility with React Native for Web.

```sh
yarn example web
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies using Yarn workspaces. This command should be run in the root directory of the monorepo.

```sh
yarn
```

--------------------------------

### Install @animatereactnative/accordion and react-native-reanimated

Source: https://github.com/animate-react-native/accordion/blob/main/README.md

Installs the accordion component and its peer dependency, react-native-reanimated. Ensure you follow the reanimated installation instructions separately.

```sh
npm install @animatereactnative/accordion

```

--------------------------------

### Publish New Version with Release-it

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Initiates the release process using release-it. This includes version bumping, tag creation, and publishing to npm. Requires proper setup and permissions.

```sh
yarn release
```

--------------------------------

### Example: Using Accordion.Sibling with Multiple Accordions in React Native

Source: https://context7.com/animate-react-native/accordion/llms.txt

This example demonstrates how to use the Accordion.Sibling component to wrap elements like banners, dividers, and footers that appear alongside Accordion components. It ensures these elements animate smoothly with layout transitions when the accordions expand or collapse, maintaining a cohesive UI. The code uses basic React Native components and StyleSheet for styling.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

export function MultipleAccordionsWithSiblings() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Accordion.Sibling>
        <View style={styles.banner}>
          <Text style={styles.bannerText}>Welcome to our FAQ section</Text>
        </View>
      </Accordion.Sibling>

      <Accordion.Accordion style={styles.accordion}>
        <Accordion.Header>
          <Text style={styles.headerText}>Question 1</Text>
        </Accordion.Header>
        <Accordion.Expanded>
          <Text style={styles.content}>Answer to question 1</Text>
        </Accordion.Expanded>
      </Accordion.Accordion>

      <Accordion.Sibling>
        <View style={styles.divider} />
      </Accordion.Sibling>

      <Accordion.Accordion style={styles.accordion}>
        <Accordion.Header>
          <Text style={styles.headerText}>Question 2</Text>
        </Accordion.Header>
        <Accordion.Expanded>
          <Text style={styles.content}>Answer to question 2</Text>
        </Accordion.Expanded>
      </Accordion.Accordion>

      <Accordion.Sibling>
        <View style={styles.footer}>
          <Text style={styles.footerText}>Still have questions? Contact us!</Text>
        </View>
      </Accordion.Sibling>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { padding: 16, gap: 12 },
  banner: { padding: 20, backgroundColor: '#4caf50', borderRadius: 8 },
  bannerText: { color: '#fff', fontSize: 18, fontWeight: 'bold', textAlign: 'center' },
  accordion: { backgroundColor: '#fff', borderRadius: 8, padding: 8 },
  headerText: { fontSize: 16, fontWeight: '600' },
  content: { padding: 12, color: '#666' },
  divider: { height: 1, backgroundColor: '#ddd', marginVertical: 8 },
  footer: { padding: 16, backgroundColor: '#ff9800', borderRadius: 8 },
  footerText: { color: '#fff', textAlign: 'center', fontWeight: '600' },
});

```

--------------------------------

### Display Persistent Information with Accordion.Always (React Native)

Source: https://context7.com/animate-react-native/accordion/llms.txt

Illustrates the use of Accordion.Always to display content that remains visible irrespective of the accordion's expanded or collapsed state. This is useful for metadata or persistent UI elements. The example uses React Native core components for styling and layout.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text, StyleSheet } from 'react-native';

export function AccordionWithPersistentInfo() {
  return (
    <Accordion.Accordion style={{ gap: 8 }}>
      <Accordion.Header>
        <View style={styles.header}>
          <Text style={styles.title}>Product Details</Text>
        </View>
      </Accordion.Header>

      <Accordion.Always>
        <View style={styles.metadata}>
          <Text style={styles.metaText}>Price: $99.99</Text>
          <Text style={styles.metaText}>Stock: In Stock</Text>
          <Text style={styles.metaText}>Rating: 4.5/5</Text>
        </View>
      </Accordion.Always>

      <Accordion.Collapsed>
        <Text style={styles.hint}>Tap to see full description</Text>
      </Accordion.Collapsed>

      <Accordion.Expanded>
        <View style={styles.description}>
          <Text>Full product description and specifications...</Text>
        </View>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}

const styles = StyleSheet.create({
  header: { padding: 16, backgroundColor: '#2196f3', borderRadius: 8 },
  title: { color: '#fff', fontSize: 16, fontWeight: '600' },
  metadata: {
    padding: 12,
    backgroundColor: '#e8f4f8',
    borderRadius: 8,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  metaText: { fontSize: 12, color: '#333' },
  hint: { padding: 8, color: '#666', fontSize: 12 },
  description: { padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8 },
});
```

--------------------------------

### Accordion with Configurable Icon Rotation Direction

Source: https://context7.com/animate-react-native/accordion/llms.txt

Illustrates how to control the rotation direction of the icon within `Accordion.HeaderIcon`. The `rotation` prop can be set to 'clockwise' (default) or 'counter-clockwise' to change the animation's direction. This example showcases both options. Requires React Native and an icon library.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text } from 'react-native';
import { ChevronDown, ChevronUp } from 'lucide-react-native';

export function AccordionWithRotatingIcons() {
  return (
    <View style={{ gap: 12 }}>
      <Accordion.Accordion>
        <Accordion.Header>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>Clockwise rotation (default)</Text>
            <Accordion.HeaderIcon>
              <ChevronUp size={20} color="#000" />
            </Accordion.HeaderIcon>
          </View>
        </Accordion.Header>
        <Accordion.Expanded>
          <Text>Content with clockwise icon rotation</Text>
        </Accordion.Expanded>
      </Accordion.Accordion>

      <Accordion.Accordion>
        <Accordion.Header>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>Counter-clockwise rotation</Text>
            <Accordion.HeaderIcon rotation="counter-clockwise">
              <ChevronDown size={20} color="#000" />
            </Accordion.HeaderIcon>
          </View>
        </Accordion.Header>
        <Accordion.Expanded>
          <Text>Content with counter-clockwise icon rotation</Text>
        </Accordion.Expanded>
      </Accordion.Accordion>
    </View>
  );
}
```

--------------------------------

### Run Unit Tests with Jest

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Executes all defined unit tests for the project using the Jest testing framework. Ensures core functionality is working as expected.

```sh
yarn test
```

--------------------------------

### Basic Accordion Usage in React Native

Source: https://github.com/animate-react-native/accordion/blob/main/README.md

Demonstrates how to import and use the Accordion component in a React Native application. It shows the structure for headers, expandable content, collapsed content, and always-visible content.

```javascript
import { Accordion } from '@animatereactnative/accordion';

// ...

export function Example() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <Text>AnimateReactNative.com</Text>
        <Accordion.HeaderIcon>
          <ChevronUp />
        </Accordion.HeaderIcon>
      </Accordion.Header>

      <Accordion.Collapsed>
        <Text>Visible !expanded</Text>
      </Accordion.Collapsed>
      <Accordion.Always>
        <Text>Always visible</Text>
      </Accordion.Always>

      <Accordion.Expanded>
        <Text>Expanded content</Text>
        {loading && <ActivityIndicator />}
        {data && <MyList data={data} />}
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}

```

--------------------------------

### Lint Project Files with ESLint

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Lints all project files using ESLint to check for code style violations and potential errors. Does not fix errors.

```sh
yarn lint
```

--------------------------------

### Typecheck Project with TypeScript

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Performs type checking on the entire project using TypeScript. Ensures code adheres to defined types.

```sh
yarn typecheck
```

--------------------------------

### Fix Linting Errors with ESLint

Source: https://github.com/animate-react-native/accordion/blob/main/CONTRIBUTING.md

Lints project files with ESLint and automatically fixes discoverable formatting errors. Use after making code changes.

```sh
yarn lint --fix
```

--------------------------------

### Display Expanded Accordion Content with Dynamic Data (React Native)

Source: https://context7.com/animate-react-native/accordion/llms.txt

Shows how to use Accordion.Expanded to display dynamically loaded content. It integrates with React Query to fetch data when the accordion is active, showing a loading indicator or the fetched data. Dependencies include React Native core components and @tanstack/react-query.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text, ActivityIndicator } from 'react-native';
import { useQuery } from '@tanstack/react-query';

export function AccordionWithAsyncContent() {
  const [isActive, setIsActive] = React.useState(false);

  const { data, isLoading } = useQuery({
    queryKey: ['content', isActive],
    enabled: isActive,
    queryFn: async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
  });

  return (
    <Accordion.Accordion onChange={(value) => setIsActive(value)}>
      <Accordion.Header>
        <Text>Load data dynamically</Text>
      </Accordion.Header>

      <Accordion.Expanded
        style={{
          backgroundColor: '#f5f5f5',
          padding: 16,
          borderRadius: 8,
          marginTop: 8,
        }}
      >
        {isLoading && (
          <ActivityIndicator size="large" color="#0000ff" />
        )}
        {!isLoading && data && (
          <View>
            <Text>{JSON.stringify(data, null, 2)}</Text>
          </View>
        )}
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```

--------------------------------

### Show Collapsed Accordion Preview Text (React Native)

Source: https://context7.com/animate-react-native/accordion/llms.txt

Demonstrates the Accordion.Collapsed component for displaying preview text when the accordion is not expanded. This component is complementary to Accordion.Expanded and helps in creating a user-friendly interface for collapsible content. It uses React Native core components for UI.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text, StyleSheet } from 'react-native';

export function AccordionWithPreview() {
  return (
    <Accordion.Accordion style={{ gap: 8 }}>
      <Accordion.Header>
        <View style={styles.header}>
          <Text style={styles.title}>Article Title</Text>
        </View>
      </Accordion.Header>

      <Accordion.Collapsed>
        <View style={styles.preview}>
          <Text style={styles.previewText}>
            Click to read the full article...
          </Text>
        </View>
      </Accordion.Collapsed>

      <Accordion.Expanded>
        <View style={styles.content}>
          <Text style={styles.paragraph}>
            This is the full article content that appears when expanded.
            It can contain multiple paragraphs, images, and other components.
          </Text>
          <Text style={styles.paragraph}>
            The collapsed preview text is automatically hidden when this content is visible.
          </Text>
        </View>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}

const styles = StyleSheet.create({
  header: { padding: 16, backgroundColor: '#4a90e2', borderRadius: 8 },
  title: { color: '#fff', fontSize: 18, fontWeight: 'bold' },
  preview: { padding: 12, backgroundColor: '#e3f2fd' },
  previewText: { color: '#666', fontSize: 14, fontStyle: 'italic' },
  content: { padding: 16, backgroundColor: '#fff', borderRadius: 8 },
  paragraph: { marginBottom: 12, lineHeight: 20 },
});
```

--------------------------------

### Accordion.Accordion Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

The main provider component for managing accordion state and wrapping other accordion components. It accepts an initial state and an optional change callback.

```APIDOC
## Accordion.Accordion Component

### Description
Main provider component that manages the accordion state and wraps all child accordion components. Accepts `isOpen` prop for initial state control and `onChange` callback for state change notifications. Uses React Context to share state with nested components.

### Component
`Accordion.Accordion`

### Props
- **isOpen** (boolean) - Optional - The initial open state of the accordion.
- **onChange** (function) - Optional - Callback function that is called when the accordion state changes. Receives the new boolean state as an argument.
- **style** (object) - Optional - Custom styles to apply to the main accordion container.

### Usage Example
```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text } from 'react-native';

export function ControlledAccordion() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Accordion.Accordion
      isOpen={isOpen}
      onChange={(value) => {
        console.log('Accordion state changed:', value);
        setIsOpen(value);
      }}
      style={{ padding: 16, backgroundColor: '#f0f0f0' }}
    >
      <Accordion.Header>
        <Text>Click to toggle</Text>
      </Accordion.Header>
      <Accordion.Expanded>
        <Text>This is expanded content</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```
```

--------------------------------

### Controlled Accordion with State Management

Source: https://context7.com/animate-react-native/accordion/llms.txt

Demonstrates how to use the `Accordion.Accordion` component in a controlled manner, managing its open/closed state via React's `useState` hook. It includes a header and expanded content, showing how to pass an `isOpen` prop and handle `onChange` events. Requires React and React Native.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text } from 'react-native';

export function ControlledAccordion() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Accordion.Accordion
      isOpen={isOpen}
      onChange={(value) => {
        console.log('Accordion state changed:', value);
        setIsOpen(value);
      }}
      style={{ padding: 16, backgroundColor: '#f0f0f0' }}
    >
      <Accordion.Header>
        <Text>Click to toggle</Text>
      </Accordion.Header>
      <Accordion.Expanded>
        <Text>This is expanded content</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```

--------------------------------

### Accordion.Sibling Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

Component designed to render content that is visually associated with the accordion but not necessarily part of its direct expanded/collapsed content. It can be used for supplementary information or actions.

```APIDOC
## Accordion.Sibling Component

### Description
Component designed to render content that is visually associated with the accordion but not necessarily part of its direct expanded/collapsed content. It can be used for supplementary information or actions.

### Component
`Accordion.Sibling`

### Props
No specific props are required for `Accordion.Sibling` beyond standard React component props (like `children`).

### Usage Example
```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text, Button } from 'react-native';

export function AccordionWithSiblingAction() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <Text>Section Title</Text>
      </Accordion.Header>
      <Accordion.Sibling>
        <Button title="Learn More" onPress={() => console.log('Learn More clicked')} />
      </Accordion.Sibling>
      <Accordion.Expanded>
        <Text>Detailed information about the section.</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```
```

--------------------------------

### Accordion.Header Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

The clickable header component responsible for toggling the accordion's expanded or collapsed state. It automatically wraps its children in a pressable component.

```APIDOC
## Accordion.Header Component

### Description
Clickable header component that toggles the accordion state. Automatically wraps children in an animated pressable component. No additional props required beyond children.

### Component
`Accordion.Header`

### Props
No specific props are required for `Accordion.Header` beyond standard React component props (like `children`).

### Usage Example
```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text, StyleSheet } from 'react-native';
import { ChevronUp } from 'lucide-react-native';

export function AccordionWithHeader() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <View style={styles.header}>
          <Text style={styles.title}>Frequently Asked Questions</Text>
          <Accordion.HeaderIcon>
            <ChevronUp size={24} color="#333" />
          </Accordion.HeaderIcon>
        </View>
      </Accordion.Header>
      <Accordion.Expanded>
        <Text>FAQ content goes here</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
});
```
```

--------------------------------

### Accordion.Expanded Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

Component that renders its children only when the accordion is in the expanded state. It handles the animated appearance of content.

```APIDOC
## Accordion.Expanded Component

### Description
Component that renders its children only when the accordion is in the expanded state. It handles the animated appearance of content.

### Component
`Accordion.Expanded`

### Props
No specific props are required for `Accordion.Expanded` beyond standard React component props (like `children`).

### Usage Example
See the example for `Accordion.Accordion` component, which includes `Accordion.Expanded`.
```

--------------------------------

### Accordion.Always Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

Component that renders its children regardless of the accordion's expanded or collapsed state. Useful for persistent elements within the accordion structure.

```APIDOC
## Accordion.Always Component

### Description
Component that renders its children regardless of the accordion's expanded or collapsed state. Useful for persistent elements within the accordion structure.

### Component
`Accordion.Always`

### Props
No specific props are required for `Accordion.Always` beyond standard React component props (like `children`).

### Usage Example
```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text } from 'react-native';

export function AccordionWithAlwaysVisibleContent() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <Text>Click to toggle</Text>
      </Accordion.Header>
      <Accordion.Always>
        <Text style={{ fontWeight: 'bold' }}>This is always visible</Text>
      </Accordion.Always>
      <Accordion.Expanded>
        <Text>This is expanded content</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```
```

--------------------------------

### Accordion.HeaderIcon Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

A wrapper component for icons within the Accordion.Header. It applies a rotation animation when the accordion state changes, indicating expansion or collapse.

```APIDOC
## Accordion.HeaderIcon Component

### Description
Icon wrapper component that applies rotation animation when accordion toggles. Supports `clockwise` (default) or `counter-clockwise` rotation directions. Rotates 180 degrees with spring animation.

### Component
`Accordion.HeaderIcon`

### Props
- **rotation** (string) - Optional - Specifies the rotation direction. Can be either `"clockwise"` (default) or `"counter-clockwise"`.

### Usage Example
```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text } from 'react-native';
import { ChevronDown, ChevronUp } from 'lucide-react-native';

export function AccordionWithRotatingIcons() {
  return (
    <View style={{ gap: 12 }}>
      <Accordion.Accordion>
        <Accordion.Header>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>Clockwise rotation (default)</Text>
            <Accordion.HeaderIcon>
              <ChevronUp size={20} color="#000" />
            </Accordion.HeaderIcon>
          </View>
        </Accordion.Header>
        <Accordion.Expanded>
          <Text>Content with clockwise icon rotation</Text>
        </Accordion.Expanded>
      </Accordion.Accordion>

      <Accordion.Accordion>
        <Accordion.Header>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>Counter-clockwise rotation</Text>
            <Accordion.HeaderIcon rotation="counter-clockwise">
              <ChevronDown size={20} color="#000" />
            </Accordion.HeaderIcon>
          </View>
        </Accordion.Header>
        <Accordion.Expanded>
          <Text>Content with counter-clockwise icon rotation</Text>
        </Accordion.Expanded>
      </Accordion.Accordion>
    </View>
  );
}
```
```

--------------------------------

### Accordion.Collapsed Component

Source: https://context7.com/animate-react-native/accordion/llms.txt

Component that renders its children only when the accordion is in the collapsed state. This is typically used for content that should be visible when the accordion is not expanded.

```APIDOC
## Accordion.Collapsed Component

### Description
Component that renders its children only when the accordion is in the collapsed state. This is typically used for content that should be visible when the accordion is not expanded.

### Component
`Accordion.Collapsed`

### Props
No specific props are required for `Accordion.Collapsed` beyond standard React component props (like `children`).

### Usage Example
```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text } from 'react-native';

export function AccordionWithCollapsedContent() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <Text>Click to toggle</Text>
      </Accordion.Header>
      <Accordion.Collapsed>
        <Text>This is collapsed content</Text>
      </Accordion.Collapsed>
      <Accordion.Expanded>
        <Text>This is expanded content</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}
```
```

--------------------------------

### Accordion with Custom Header and Icon Animation

Source: https://context7.com/animate-react-native/accordion/llms.txt

Shows how to customize the accordion header with a title and an icon using `Accordion.Header` and `Accordion.HeaderIcon`. The `HeaderIcon` component automatically applies a rotation animation to the child icon when the accordion state changes. Requires React Native and a library like `lucide-react-native` for icons.

```tsx
import { Accordion } from '@animatereactnative/accordion';
import { View, Text, StyleSheet } from 'react-native';
import { ChevronUp } from 'lucide-react-native';

export function AccordionWithHeader() {
  return (
    <Accordion.Accordion>
      <Accordion.Header>
        <View style={styles.header}>
          <Text style={styles.title}>Frequently Asked Questions</Text>
          <Accordion.HeaderIcon>
            <ChevronUp size={24} color="#333" />
          </Accordion.HeaderIcon>
        </View>
      </Accordion.Header>
      <Accordion.Expanded>
        <Text>FAQ content goes here</Text>
      </Accordion.Expanded>
    </Accordion.Accordion>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.