react-native-simple-accordian v1.0.2

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

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