react-native-simple-accordian

Animated collapsible component for React Native

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

Installation

npm install --save react-native-simple-accordian

Accordion Usage

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

import SimpleAccordion from 'react-native-simple-accordian';
<SimpleAccordion
  sections={['Accordian 1', 'Accordian 2', 'Accordian 3']}
  renderSectionTitle={this._renderSectionTitle}
  renderHeader={this._renderHeader}
  renderContent={this._renderContent}
/>;

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 | | renderSectionTitle(content, index, isActive) | A function that should return a renderable representing the title of the section outside the touchable element | | onChange(index) | An optional function that is called when currently active section is changed, index === false when collapsed | | initiallyActiveSection | Set which index in the sections array is initially open. Defaults to none. | | activeSection | Control which index in the sections array is currently open. Defaults to none. If false, 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 | | expandFromBottom | Expand content from the bottom instead of the top | | style | Optional styling for the container |

Demo

Example

npm install --save react-native-simple-accordian lodash

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity,Image,Dimensions,ScrollView } from 'react-native';
import SimpleAccordion from 'react-native-simple-accordian';
const deviceWidth = Dimensions.get('window').width
const accordianData = 'This is sample Accordian Text....';
import * as _ from 'lodash'

const sampleAccordianData = [
  {
    title: 'Accordian 1 ',
    content: accordianData
  },
  {
    title: 'Accordian 2',
    content: accordianData
  },
  {
    title: 'Accordian 3',
    content: accordianData
  },
  {
    title: 'Accordian 4 ',
    content: accordianData
  },
  {
    title: 'Accordian 5',
    content: accordianData
  },
  {
    title: 'Accordian 6',
    content: accordianData
  },
  
];

export default class AccordianExample extends Component {
    constructor(props){
        super(props)
        this.state = ({
            content:'',
            open: false,
        });
    }

  onChangeAccordian(section) {
    this.setState({ open: section });

  }

  renderHeader(section, i, isOpen) {
    return (
      <View style={{backgroundColor:'#ffffff',flexDirection:'row'}}>
        <Text style={[styles.headerText,{width:deviceWidth-80,padding:10,textAlign:'left'}]}>{section.title}</Text>
      </View>
    );
  }

  renderContent(section, i, isOpen) {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={{flex: 1,}}>
        <View style={styles.headerTextView}>
          <Text style={styles.headerText1}>Accordian</Text>
        </View>
        <View style={styles.container}>
          <ScrollView >    
            <SimpleAccordion
              style= {{
                borderWidth:1,
                borderRadius:25,
                margin:10,
                padding:10,
                backgroundColor:'#ffffff'
              }}
              activeSection={this.state.open}
              sections={sampleAccordianData}
              touchableComponent={TouchableOpacity}
              renderHeader={this.renderHeader}
              renderContent={this.renderContent}
              duration={1000}
              onChange={this.onChangeAccordian.bind(this)}
            />
          </ScrollView>
        </View>
      </View>
      
    );
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor:'#2c2c2c'
      
    },
    headerText1:{
      color:'white',
      textAlign:'center',
      fontSize:22
     
    },
    headerTextView:{
      height:50,
      borderWidth:1,
      backgroundColor:'#383636',
      justifyContent:'center',
    },
    title: {
      textAlign: 'center',
      fontSize: 22,
      fontWeight: '300',
      marginBottom: 20,
      color:'#ffffff'
    },
    header:{
        flex:1
    },
    headerText: {
      textAlign: 'center',
      fontSize: 16,
      fontWeight: '500',
    },
    content: {
      padding: 20,
      backgroundColor: '#ffffff'
    },
  });