react-native-animated-accordion

Animated accordion and collapsible using react-native-reanimated

Supports dynamic content heights and components.

Demo

https://user-images.githubusercontent.com/50287765/187772673-45f73f77-1bd4-4317-827b-4c6e449e5e6b.mp4

Installation

Using npm

npm install --save react-native-animated-accordion react-native-reanimated react-native-svg

Using yarn

yarn add react-native-animated-accordion react-native-reanimated react-native-svg

Before using the package setup packages on your project

For react-native-reanimated follow this documentation

Usage

import { Accordion } from 'react-native-animated-accordion';

<Accordion headerText="Light Theme">
  <View style={{ padding: 10 }}>
    <Text style={{ color: '#000000' }}>Accordion</Text>
  </View>
</Accordion>;

Properties

| Prop | Description | Default | | --------------------------- | --------------------------------------------------- | ---------------- | | isOpen | if you want to control the collapsed state yourself | null | | headerText | Name of header | "" | | parentContainerStyles | Styles for main container of accordion | default styles | | bodyContainerStyles | Styles for content body of accordion | default styles | | headerStyles | Styles for header of accordion | default styles | | headerTextStyles | Styles for header text of accordion | default styles | | headerIconStyles | Styles for header arrow icon of accordion | default styles | | headerIconColor | Icon color of header | #000000 | | headerIconSize | Icon size of header | 20 | | onPress | Function triggered when user clicks on header | null | | duration | Duration of animation in milliseconds | 300 |

Accordion Usage Examples

This is a convenience component for a common use case, see below.

import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Accordion } from 'react-native-animated-accordion';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ScrollView contentContainerStyle={styles.mainContainer}>
      <Text style={{ color: '#000000', marginVertical: 20 }}>Light Theme</Text>
      <Accordion headerText="Light Theme">
        <View style={{ padding: 10 }}>
          <Text style={{ color: '#000000' }}>Light Theme</Text>
          <Text style={{ color: '#000000' }}>Light Theme</Text>
          <Text style={{ color: '#000000' }}>Light Theme</Text>
          <Text style={{ color: '#000000' }}>Light Theme</Text>
          <Text style={{ color: '#000000' }}>Light Theme</Text>
        </View>
      </Accordion>

      <Text style={{ color: '#000000', marginVertical: 20 }}>Dark Theme</Text>
      <Accordion
        bodyStyles={{
          backgroundColor: 'black',
        }}
        headerText="Dark Theme"
        headerStyles={{ paddingVertical: 15, backgroundColor: '#000000' }}
        headerTextStyles={{ color: '#ffffff' }}
        headerIconStyles={{ fontSize: 15, color: '#ffffff' }}
      >
        <View style={{ padding: 10 }}>
          <Text style={{ color: '#ffffff' }}>Dark Theme</Text>
          <Text style={{ color: '#ffffff' }}>Dark Theme</Text>
          <Text style={{ color: '#ffffff' }}>Dark Theme</Text>
          <Text style={{ color: '#ffffff' }}>Dark Theme</Text>
          <Text style={{ color: '#ffffff' }}>Dark Theme</Text>
        </View>
      </Accordion>

      <Text style={{ color: '#000000', marginVertical: 20 }}>Props Intro</Text>
      <Accordion
        parentContainerStyles={{
          marginTop: 20,
        }}
        bodyStyles={{
          backgroundColor: 'yellow',
        }}
        headerText="Header"
        headerStyles={{ paddingVertical: 20 }}
        headerTextStyles={{ fontStyle: 'italic' }}
        headerIconStyles={{ fontSize: 15 }}
        isOpen={isOpen}
        onPress={() => setIsOpen(!isOpen)}
      >
        <View style={{ padding: 10 }}>
          <Text style={{ color: '#000000' }}>Header</Text>
          <Text style={{ color: '#000000' }}>Header</Text>
          <Text style={{ color: '#000000' }}>Header</Text>
          <Text style={{ color: '#000000' }}>Header</Text>
          <Text style={{ color: '#000000' }}>Header</Text>
        </View>
      </Accordion>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    backgroundColor: '#ffffff',
    padding: 20,
    flexGrow: 1,
  },
});

export default App;

Maintainers

License

MIT License. © Waseem Munir