react-native-reanimated-accordion

A simple animated expandable section for react native apps using reanimated

🦄 Features

• ✅ Customizable
• ✅ Includes option to not render collapsed component (for less rendering).
• ✅ Uses Reanimated v4

How it looks

Installation

npm install react-native-reanimated-animated-accordion

or using yarn

yarn add react-native-reanimated-animated-accordion

⚠️ Make sure you have react-native-reanimated installed in your project.

Version compatibility

Version	React Native architecture
0.4.0+	New architecture only
0.3.0	Old architecture

Usage

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Easing } from 'react-native-reanimated';
import Expandable from 'react-native-reanimated-animated-accordion';

export default function Example() {
  const [expanded, setExpanded] = React.useState(false);

  return (
    <View
      style={{
        width: '80%',
        borderRadius: 20,
        backgroundColor: 'white',
        shadowOffset: { height: -2, width: 0 },
        elevation: 2,
        shadowRadius: 20,
        shadowOpacity: 0.07,
      }}
    >
      <TouchableOpacity style={{ padding: 20 }} onPress={() => setExpanded(!expanded)}>
        <Text>Toggle</Text>
      </TouchableOpacity>
      <View style={{ width: '100%' }}>
        <Expandable
          expanded={expanded}
          expandDuration={300}
          collapseDuration={300}
          renderWhenCollapsed={false}
          easing={Easing.out(Easing.cubic)}
        >
          <View style={{ width: '100%', padding: 20, paddingTop: 0 }}>
            <Text>Lorem ipsum dolor sit amet consectetur...</Text>
          </View>
        </Expandable>
      </View>
    </View>
  );
}

Reduce Rendering

If you would like to prevent collapsed components from being rendered, add renderWhenCollapsed={false}. This can help if you have heavy collapsed components (e.g. reduces boot time and RAM).

<Expandable
  expanded={expanded}
  expandDuration={300}
  collapseDuration={300}
  renderWhenCollapsed={false}
>
  {/* your content */}
</Expandable>

License

MIT

---

Made with create-react-native-library