React Native Accordion With Animation Example
Oct 16, 2021 . Admin
Hi Guys,
Today, I will learn you how to add accordion with animation in react native. we will show example of react native accordion with animation.You can easily implement accordion in react native. First i will import react-native-collapsible package after I will implement accordion in react native.
Here, I will give you full example for accordion with animation using react native as bellow.
Step 1 - Create projectIn the first step Run the following command for create project.
expo init MyWebtutsProjectStep 2 - Install Package
In the step,I will install package react-native-animatable for animation and react-native-collapsible for accorsion using yarn.
yarn add react-native-animatable yarn add react-native-collapsibleStep 3 - App.js
In this step, You will open App.js file and put 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.
expo startOutput
It will help you..