📦 React Native Collapsible Component

A simple and customizable React Native component for collapsible content, supporting smooth expand/collapse animations and accordion behavior.

Perfect for creating accordion UIs, toggle sections, or dynamically hiding/showing content with smooth animations.

✨ Features

• 🧩 Simple API
• ⚙️ Custom animation duration and easing
• 📐 Supports alignments (top, center, bottom)
• 📱 Built using React Native's Animated
• ⚡ High performance, uses useNativeDriver option where applicable

📦 Installation

npm install @jkrmarmol/react-native-collapsible
# or
yarn add @jkrmarmol/react-native-collapsible

🚀 Usage

import React, { useState } from 'react';
import { Text, Button, View } from 'react-native';
import { Collapsible } from '@jkrmarmol/react-native-collapsible';

const MyComponent = () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <View>
      <Button title="Toggle" onPress={() => setCollapsed(!collapsed)} />
      <Collapsible collapsed={collapsed}>
        <Text>This content can be collapsed and expanded.</Text>
      </Collapsible>
    </View>
  );
};

Prop	Type	Default	Description
align	'top' | 'center' | 'bottom'	'top'	Alignment of the content when expanding.
collapsed	boolean	true	If true, the component is collapsed.
collapsedHeight	number	0	The height of the view when collapsed.
duration	number	300	Duration of the expand/collapse animation in ms.
easing	string	'easeOutCubic'	Easing function used in animation. Accepts built-in Easing keys or custom string like easeInOutCubic.
onAnimationEnd	() => void	() => null	Callback called after the animation completes.
renderChildrenCollapsed	boolean	true	Whether to render children while collapsed. Useful for keeping state/mounting.
style	StyleProp<ViewStyle>	undefined	Optional styling for the animated content container.
enablePointerEvents	boolean	false	If false, disables pointer events when collapsed.
children	ReactNode	-	The content to show/hide.

🧪 Examples

Basic Collapsible

<Collapsible collapsed={true}>
  <Text>Hidden content</Text>
</Collapsible>

Collapsible with Alignment

<Collapsible collapsed={false} align="bottom">
  <Text>This will slide in from the bottom.</Text>
</Collapsible>

Custom Animation

<Collapsible collapsed={false} duration={500} easing="easeInOutQuart">
  <Text>Custom easing and duration</Text>
</Collapsible>

📌 Notes

• This component uses React Native’s layout measurement for animation, so make sure content is rendered properly.

• To ensure performance, do not use complex nested views inside the collapsible unless necessary.

👨‍💻 Contributing

PRs, issues, and feature requests are welcome! If you like this library, consider giving it a ⭐️.

📝 License

MIT License © 2025 Kurt Russelle Marmol