Registry / web-framework / react-native-reanimated-animated-accordion

react-native-reanimated-animated-accordion

library0.6.2jsnpmunverified

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.

web-framework

npm install react-native-reanimated-animated-accordion

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-REANI

react-native-reanimated-animated-accordion

web-frameworkjavascriptv0.6.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Expandable

✓ import Expandable from 'react-native-reanimated-animated-accordion';

✗ import { Expandable } from 'react-native-reanimated-animated-accordion';

The primary accordion component is a default export.

Easing

✓ import { Easing } from 'react-native-reanimated';

✗ import Easing from 'react-native-reanimated';

Easing functions for animations are named exports from `react-native-reanimated`, not from this package directly.

ExpandableProps

✓ import type { ExpandableProps } from 'react-native-reanimated-animated-accordion';

TypeScript users should import component props as a type.

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.

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, alignSelf: 'center', marginTop: 50 }} > <TouchableOpacity style={{ padding: 20 }} onPress={() => setExpanded(!expanded)}> <Text style={{ fontWeight: 'bold' }}>Toggle Accordion</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>This is the content that will expand and collapse. It demonstrates the core functionality of the Reanimated Accordion. You can place any React Native components here. The `renderWhenCollapsed={false}` prop ensures this content is unmounted when collapsed. </Text> </View> </Expandable> </View> </View> ); }

Debug

Known issues

breakingVersions 0.4.0 and higher of this library are exclusively compatible with the New React Native Architecture (Fabric). Projects still using the Old Architecture will need to use version 0.3.0 or upgrade their React Native project architecture.

fix

Upgrade your React Native project to the New Architecture or downgrade the `react-native-reanimated-animated-accordion` package to `0.3.0` if sticking with the Old Architecture.

affects: >=0.4.0

breakingThis package requires `react-native-reanimated` version 4.0.0 or higher. Older versions of Reanimated are not compatible and will likely cause runtime errors or unexpected animation behavior.

fix

Ensure `react-native-reanimated` is updated to a compatible version (e.g., `>=4.0.0`) in your `package.json` and reinstall dependencies.

affects: >=0.2.0

gotchaUsing `renderWhenCollapsed={false}` means the content within the `Expandable` component will be unmounted when collapsed. Be aware of state loss or re-initialization if your child components manage their own internal state.

fix

If child component state needs to persist, either avoid `renderWhenCollapsed={false}` or lift the state up to a parent component that remains mounted.

affects: >=0.2.0

gotchaThe `easing` prop directly expects an Easing function from `react-native-reanimated`. Providing an incorrect or undefined easing function will result in default or broken animation curves.

fix

Always import `Easing` from `react-native-reanimated` and use its provided functions, e.g., `Easing.out(Easing.cubic)`.

affects: >=0.2.0

Errors

Common errors & fixes

Invariant Violation: `react-native-reanimated` is not installed. Please make sure to install it.

The `react-native-reanimated` peer dependency is missing or not correctly linked.

fix

Install `react-native-reanimated` via `npm install react-native-reanimated` or `yarn add react-native-reanimated` and ensure it's properly configured for your React Native project (follow Reanimated's installation guide).

TypeError: Cannot read property 'useSharedValue' of undefined

An outdated or incompatible version of `react-native-reanimated` is installed, or its initialization is incorrect.

fix

Update `react-native-reanimated` to version `4.0.0` or newer and verify its setup in `babel.config.js` and `MainApplication.java`/`AppDelegate.mm`.

Error: Node with tag ### not found!

Often related to issues with the new architecture or improper linking of native modules for `react-native-reanimated`.

fix

If on version >=0.4.0, ensure your React Native project is fully on the New Architecture (Fabric). Clean your build caches (`yarn start --reset-cache`, `cd ios && pod deintegrate && pod install`, `cd android && ./gradlew clean`).

Upgrade

Version history

0.6.2latest on npm

Audit

Dependencies

reactrequiredCore React dependency for component rendering.

react-nativerequiredCore React Native dependency for mobile UI components.

react-native-reanimatedrequiredRequired for animations and gestures. Version 4.x is explicitly supported.

react-native-workletsrequiredPotentially required by react-native-reanimated or for specific worklet-based animations within the accordion. This peer dependency suggests deep integration with Reanimated's modern architecture.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/Malaa-tech/react-native-reanimated-accordion ↗

packagehttps://www.npmjs.com/package/react-native-reanimated-animated-accordion ↗