Have ideas to improve npm?Join in the discussion! »

    react-native-collapsible
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0 • Public • Published

    react-native-collapsible

    Animated collapsible component for React Native using the Animated API

    Pure JavaScript, supports dynamic content heights and components that is aware of its collapsed state (good for toggling arrows etc).

    Installation

    npm install --save react-native-collapsible

    Collapsible Usage

    import Collapsible from 'react-native-collapsible';
    
    () => (
      <Collapsible collapsed={isCollapsed}>
        <SomeCollapsedView />
      </Collapsible>
    );

    Properties

    Prop Description Default
    align Alignment of the content when transitioning, can be 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). Collapsible will try to combine Easing functions for you if you name them like tween-functions. 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. Useful to avoid heavy layouting work during the animation () => {}

    Accordion Usage

    This is a convenience component for a common use case, see demo below.

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

    Properties

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

    Demo

    demo

    Example

    Check full example in the Example folder.

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

    Transition backgrounds

    If you combine with the react-native-animatable library you can easily transition the background color between the active and inactive state or add animations.

    Lets augment the example above with:

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

    To produce this (slowed down for visibility):

    accordion-demo

    Contributing

    Interested in contributing to this repo? Have a look at our Contributing Guide

    Maintainers


    Joel Arvidsson

    Author

    License

    MIT License. © Joel Arvidsson and contributors 2015-2021

    Install

    npm i react-native-collapsible

    DownloadsWeekly Downloads

    60,052

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar