React Native Accordion With Animation Example

When “React Native Accordion With Animation Example” moves through design, development and browser testing, the complete guide can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

Hi Dev,

In this tutorial, I will learn you how to add accordion with animation using react native.

Here, i will give you complete example for implementing accordion using react-native-collapsible package and we will also use react-native-animatable package for animation as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init NicesnippetsApp 

Step 2 - Install Package

In the step,I will install react-native-datepicker package using yarn.

yarn add react-native-animatable
yarn add react-native-collapsible

Step 3 - App.js

In this step, You will open App.js file and get the code.

import React, { Component } from 'react';
import { Switch, ScrollView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Accordion from 'react-native-collapsible/Accordion';
const DUMMY_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
const CONTENT = [
  {
    title: 'First',
    content: DUMMY_TEXT,
  },
  {
    title: 'Second',
    content: DUMMY_TEXT,
  },
  {
    title: 'Third',
    content: DUMMY_TEXT,
  }
];
export default class AccordionExample extends Component {
  state = {
    activeSections: [],
    collapsed: true,
    multipleSelect: false,
  };
  toggleExpanded = () => {
    this.setState({ collapsed: !this.state.collapsed });
  };
  setSections = (sections) => {
    this.setState({
      activeSections: sections.includes(undefined) ? [] : sections,
    });
  };
  renderHeader = (section, _, isActive) => {
    return (
      <Animatable.View
        duration={400}
        style={[styles.header, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
      >
        <Text style={styles.headerText}>{section.title}</Text>
      </Animatable.View>
    );
  };
  renderContent(section, _, isActive) {
    return (
      <Animatable.View
        duration={400}
        style={[styles.content, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
      >
        <Animatable.Text animation={isActive ? 'bounceIn' : undefined}>
          {section.content}
        </Animatable.Text>
      </Animatable.View>
    );
  }
  render() {
    const { multipleSelect, activeSections } = this.state;
    return (
      <View style={styles.container}>
        <ScrollView contentContainerStyle={{ paddingTop: 200 }}>
          <Text style={styles.title}>Accordion Example</Text>
          <Accordion
            activeSections={activeSections}
            sections={CONTENT}
            touchableComponent={TouchableOpacity}
            expandMultiple={multipleSelect}
            renderHeader={this.renderHeader}
            renderContent={this.renderContent}
            duration={400}
            onChange={this.setSections}
            renderAsFlatList={false}
          />
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  title: {
    textAlign: 'center',
    fontSize: 22,
    fontWeight: '700',
    marginBottom: 20
  },
  header: {
    backgroundColor: '#F5FCFF',
    padding: 10,
  },
  headerText: {
    textAlign: 'center',
    fontSize: 16,
    fontWeight: '500',
  },
  content: {
    padding: 20,
    backgroundColor: '#fff',
  },
  active: {
    backgroundColor: 'rgba(100,255,255,1)',
  },
  inactive: {
    backgroundColor: 'rgba(245,252,255,1)',
  },
  selectors: {
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  selector: {
    backgroundColor: '#F5FCFF',
    padding: 10,
  }
});

Step 4 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...