Using accordion in React Native app

Great instruction from naoufal.

react-native-accordion is an easy to use Accordion component for React Native app.

Install

npm i --save react-native-accordion

Usage

Using an Accordion in your app will usually look like this:

var Accordion = require('react-native-accordion');

var YourComponent = React.createClass({
  getInitialState() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(_.range(25)),
    };
  },

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  },

  _renderRow() {
    var header = (
      <View style={...}>
        <Text>Click to Expand</Text>
      </View>
    );

    var content = (
      <View style={...}>
        <Text>This content is hidden in the accordion</Text>
      </View>
    );

    return (
      <Accordion
        header={header}
        content={content}
        easing="easeOutCubic"
      />
    );
  }
});

Example

Here are a few examples of how you can use an accordion in your app:

Props

The following props can be used to modify the Accordion's style and/or behaviour:

Prop	Type	Opt/Required	Default	Note
activeOpacity	Number	Optional	1	The active opacity of the TouchableHighlight.
animationDuration	Number	Optional	300	The duration of the animation.
content	Element	Required	N/A	The content you want hidden in the collapse accordion.
easing	String	Optional	linear	A tweening function from tween-functions.
header	Element	Required	N/A	The element that will expand the accordion when pressed.
underlayColor	String	Optional	#000	The underlay color of the TouchableHighlight.
style	Object	Optional	{}	The styles you want to set on the accordion element.

Source: https://github.com/naoufal/react-native-accordion