DOCSEARCHbyAlgolia
Submit Docs

react-native-collapsible

repository·master·Indexed 25 days ago

https://github.com/oblador/react-native-collapsible

An animated component library for React Native that provides collapsible views and accordion patterns using the Animated API. It includes a Collapsible component for dynamic content heights and an Accordion component for managing multiple collapsible sections.

Tokens
2.7K
Snippets
6
Records
10
Agent score
83%

What's inside react-native-collapsible

  2. Run the Example project

    master

    To run the provided example project, follow these steps after ensuring your React Native environment is set up:

    1. Start the Metro Server: Open a terminal at the project root and run:

      npm start
# OR
yarn start

    2. Start the Application: Open a new terminal and run the command for your target platform:

      For Android:

      npm run android
# OR
yarn android

      For iOS:

      npm run ios
# OR
yarn ios

    3. Reload the App: To see changes made in App.tsx:

      • Android: Press <kbd>R</kbd> twice or open the Developer Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux, <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS) and select Reload.
      • iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in the iOS Simulator.

  3. How the `align` property affects animation

    master

    The align prop determines how the content is positioned inside the container as the height animates. This is achieved using translateY interpolations:

    • top (default): The content stays anchored to the top. As the container expands, the content appears to grow downwards.
    • center: The content is centered. As the container expands, the content moves from a negative translateY (offset upwards) towards 0.
    • bottom: The content is anchored to the bottom. As the container expands, the content moves from a negative translateY (offset upwards by the full content height) towards 0.

  4. Animate Accordion transitions with react-native-animatable

    master

    You can enhance the Accordion UI by combining it with react-native-animatable. This allows you to transition background colors or add entry animations (like zoomIn) to headers and content when they become active.

    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
    );
  }

(...)

  5. Use the Accordion component

    master

    The Accordion component is a convenience component for managing multiple collapsible sections. It requires a sections array and several render functions to define how headers, content, and titles appear.

    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}
  />
);

  6. Use the Collapsible component

    master

    The Collapsible component is an animated component that uses the React Native Animated API. It supports dynamic content heights and can be aware of its collapsed state. Wrap your content in <Collapsible> and control its visibility via the collapsed prop.

    import Collapsible from 'react-native-collapsible';

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

  7. Implement a full Accordion example

    master

    This example demonstrates a complete implementation of an Accordion using a stateful component to manage activeSections and custom render functions for headers and content.

    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}
      />
    );
  }
}

  9. Collapsible properties reference

    master

    The following props are available on the Collapsible component:

    | Prop | Description | Default |
| --- | --- | --- |
| **`align`** | Alignment of the content when transitioning (`top`, `center`, or `bottom`) | `top` |
| **`collapsed`** | Whether to show the child components or not | `true` |
| **`collapsedHeight`** | Which height should the component collapse to | `0` |
| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
| **`duration`** | Duration of transition in milliseconds | `300` |
| **`easing`** | Function or function name from `Easing` (or `tween-functions` if < RN 0.8) | `easeOutCubic` |
| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible | `true` |
| **`style`** | Optional styling for the container | |
| **`onAnimationEnd`** | Callback when the toggle animation is done | `() => {}` |

  10. Configure Collapsible properties

    master

    The Collapsible component accepts the following props to control its behavior and appearance:

    PropTypeDefaultDescription
    collapsedbooleantrueDetermines if the content is collapsed or expanded.
    collapsedHeightnumber0The height of the component when it is in the collapsed state.
    durationnumber300The animation duration in milliseconds.
    easingstring'easeOutCubic'The easing function for the animation. Supports prefixes like easeInOut, easeOut, or easeIn followed by the easing name (e.g., easeOutCubic).
    align'top' | 'center' | 'bottom''top'The alignment of the content within the collapsible container during animation.
    onAnimationEndfunction() => nullCallback function executed when the animation finishes.
    renderChildrenCollapsedbooleantrueIf true, children are rendered even when collapsed. If false, children are unmounted when collapsed.
    enablePointerEventsbooleanfalseIf false, pointer events are disabled on the component when it is collapsed.
    styleViewStyleundefinedStyles applied to the inner content container.