{"library":"react-native-reanimated-animated-accordion","title":"React Native Reanimated Accordion","description":"react-native-reanimated-accordion is a React Native library providing a simple, animated expandable section using `react-native-reanimated` for smooth transitions. The current stable version is 0.6.2. The project shows an active development cadence, with several releases in early 2026, though with a prior gap since 2024. Key differentiators include its reliance on Reanimated v4 for performance, high customizability, and an option (`renderWhenCollapsed={false}`) to prevent the rendering of collapsed content, which can improve performance for complex components by reducing initial rendering time and memory usage. It is specifically designed for mobile applications on iOS and Android.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-reanimated-animated-accordion"],"cli":null},"imports":["import Expandable from 'react-native-reanimated-animated-accordion';","import { Easing } from 'react-native-reanimated';","import type { ExpandableProps } from 'react-native-reanimated-animated-accordion';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as React from 'react';\nimport { View, Text, TouchableOpacity } from 'react-native';\nimport { Easing } from 'react-native-reanimated';\nimport Expandable from 'react-native-reanimated-animated-accordion';\n\nexport default function Example() {\n  const [expanded, setExpanded] = React.useState(false);\n\n  return (\n    <View\n      style={{\n        width: '80%',\n        borderRadius: 20,\n        backgroundColor: 'white',\n        shadowOffset: { height: -2, width: 0 },\n        elevation: 2,\n        shadowRadius: 20,\n        shadowOpacity: 0.07,\n        alignSelf: 'center',\n        marginTop: 50\n      }}\n    >\n      <TouchableOpacity style={{ padding: 20 }} onPress={() => setExpanded(!expanded)}>\n        <Text style={{ fontWeight: 'bold' }}>Toggle Accordion</Text>\n      </TouchableOpacity>\n      <View style={{ width: '100%' }}>\n        <Expandable\n          expanded={expanded}\n          expandDuration={300}\n          collapseDuration={300}\n          renderWhenCollapsed={false}\n          easing={Easing.out(Easing.cubic)}\n        >\n          <View style={{ width: '100%', padding: 20, paddingTop: 0 }}>\n            <Text>This is the content that will expand and collapse.\n              It demonstrates the core functionality of the Reanimated Accordion.\n              You can place any React Native components here.\n              The `renderWhenCollapsed={false}` prop ensures this content is unmounted when collapsed.\n            </Text>\n          </View>\n        </Expandable>\n      </View>\n    </View>\n  );\n}","lang":"typescript","description":"This example demonstrates how to integrate the Expandable component, manage its expanded state, and customize animation properties like duration and easing. It also shows the `renderWhenCollapsed` prop.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}