Miss any of our Open RFC calls?Watch the recordings here! »

react-native-simple-accordian

1.0.2 • Public • Published

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

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

Install

npm i react-native-simple-accordian

DownloadsWeekly Downloads

11

Version

1.0.2

License

ISC

Unpacked Size

3.57 MB

Total Files

7

Last publish

Collaborators

  • avatar