### Start Metro Server (npm)

Source: https://github.com/oblador/react-native-collapsible/blob/master/Example/README.md

Use this command to start the Metro bundler when using npm.

```bash
npm start
```

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

### Start Android Application (npm)

Source: https://github.com/oblador/react-native-collapsible/blob/master/Example/README.md

Run this command to start your Android application using npm.

```bash
npm run android
```

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

### Start Metro Server (Yarn)

Source: https://github.com/oblador/react-native-collapsible/blob/master/Example/README.md

Use this command to start the Metro bundler when using Yarn.

```bash
yarn start
```

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

### Start iOS Application (npm)

Source: https://github.com/oblador/react-native-collapsible/blob/master/Example/README.md

Run this command to start your iOS application using npm.

```bash
npm run ios
```

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

### Start Android Application (Yarn)

Source: https://github.com/oblador/react-native-collapsible/blob/master/Example/README.md

Run this command to start your Android application using Yarn.

```bash
yarn android
```

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

### Install react-native-collapsible

Source: https://github.com/oblador/react-native-collapsible/blob/master/README.md

Install the library using npm. This is the first step before using the component in your project.

```bash
npm install --save react-native-collapsible
```

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

### Accordion with Animated Transitions

Source: https://github.com/oblador/react-native-collapsible/blob/master/README.md

Augments the basic accordion example with react-native-animatable for background color transitions and content animations. Ensure both libraries are installed.

```javascript
import * as Animatable from 'react-native-animatable';

(...)

  _renderHeader(section, index, isActive, sections) {
    return (
      <Animatable.View
        duration={300}
        transition="backgroundColor"
        style={{ backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)') }}>
        <Text style={styles.headerText}>{section.title}</Text>
      </Animatable.View>
    );
  }

  _renderContent(section, i, isActive, sections) {
    return (
      <Animatable.View
        duration={300}
        transition="backgroundColor"
        style={{ backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)') }}>
        <Animatable.Text
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          {section.content}
        </Animatable.Text>
      </Animatable.View>
    );
  }

(...)
```

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

### Start iOS Application (Yarn)

Source: https://github.com/oblador/react-native-collapsible/blob/master/Example/README.md

Run this command to start your iOS application using Yarn.

```bash
yarn ios
```

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

### Accordion Usage Example

Source: https://github.com/oblador/react-native-collapsible/blob/master/README.md

Shows how to implement an accordion pattern using the Accordion component from react-native-collapsible. This component manages multiple collapsible sections.

```javascript
import Accordion from 'react-native-collapsible/Accordion';

() => (
  <Accordion
    activeSections={[0]}
    sections={['Section 1', 'Section 2', 'Section 3']}
    renderSectionTitle={this._renderSectionTitle}
    renderHeader={this._renderHeader}
    renderContent={this._renderContent}
    onChange={this._updateSections}
  />
);
```

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

### Basic Accordion Implementation

Source: https://github.com/oblador/react-native-collapsible/blob/master/README.md

Demonstrates how to set up a basic accordion component using react-native-collapsible. Requires importing React, Component, and Accordion.

```javascript
import React, { Component } from 'react';
import Accordion from 'react-native-collapsible/Accordion';

const SECTIONS = [
  {
    title: 'First',
    content: 'Lorem ipsum...',
  },
  {
    title: 'Second',
    content: 'Lorem ipsum...',
  },
];

class AccordionView extends Component {
  state = {
    activeSections: [],
  };

  _renderSectionTitle = (section) => {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  };

  _renderHeader = (section) => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.title}</Text>
      </View>
    );
  };

  _renderContent = (section) => {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  };

  _updateSections = (activeSections) => {
    this.setState({ activeSections });
  };

  render() {
    return (
      <Accordion
        sections={SECTIONS}
        activeSections={this.state.activeSections}
        renderSectionTitle={this._renderSectionTitle}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
        onChange={this._updateSections}
      />
    );
  }
}
```

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

### Basic Collapsible Usage

Source: https://github.com/oblador/react-native-collapsible/blob/master/README.md

Demonstrates how to use the Collapsible component to conditionally render content. Import the component and use the `collapsed` prop to control its visibility.

```javascript
import Collapsible from 'react-native-collapsible';

() => (
  <Collapsible collapsed={isCollapsed}>
    <SomeCollapsedView />
  </Collapsible>
);
```

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

### Collapsible Component Properties

Source: https://github.com/oblador/react-native-collapsible/blob/master/README.md

This section details the various properties available for the Collapsible component, allowing for customization of its behavior, rendering, and interactions.

```APIDOC
## Collapsible Component Properties

### Description
This section details the various properties available for the Collapsible component, allowing for customization of its behavior, rendering, and interactions.

### Properties

- **`sections`** (array) - An array of sections passed to the render methods.
- **`renderHeader(content, index, isActive, sections)`** (function) - A function that should return a renderable representing the header.
- **`renderContent(content, index, isActive, sections)`** (function) - A function that should return a renderable representing the content.
- **`renderFooter(content, index, isActive, sections)`** (function) - A function that should return a renderable representing the footer.
- **`renderSectionTitle(content, index, isActive)`** (function) - A function that should return a renderable representing the title of the section outside the touchable element.
- **`onChange(indexes)`** (function) - A function that is called when the currently active section(s) are updated.
- **`keyExtractor(item, index)`** (function) - Used to extract a unique key for a given item at the specified index.
- **`activeSections`** (array) - Control which indices in the `sections` array are currently open. If empty, closes all sections.
- **`underlayColor`** (color) - The color of the underlay that will show through when tapping on headers. Defaults to black.
- **`touchableComponent`** (component) - The touchable component used in the Accordion. Defaults to `TouchableHighlight`.
- **`touchableProps`** (object) - Properties for the `touchableComponent`.
- **`disabled`** (boolean) - Set whether the user can interact with the Accordion.
- **`align`** (string) - See `Collapsible`.
- **`duration`** (number) - See `Collapsible`.
- **`easing`** (string) - See `Collapsible`.
- **`onAnimationEnd(key, index)`** (function) - See `Collapsible`.
- **`expandFromBottom`** (boolean) - Expand content from the bottom instead of the top.
- **`expandMultiple`** (boolean) - Allow more than one section to be expanded. Defaults to false.
- **`sectionContainerStyle`** (style) - Optional styling for the section container.
- **`containerStyle`** (style) - Optional styling for the Accordion container.
- **`renderAsFlatList`** (boolean) - Optional rendering as FlatList (defaults to false).
```

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