Accordion Component

A flexible and animated accordion component for React Native applications that allows users to expand and collapse content sections with smooth animations.

Features

📁 Collapsible Sections - Expand and collapse content with smooth animations
🎨 Customizable Styling - Full control over headers, content, and container styling
🔄 Multiple Modes - Single or multiple section expansion support
🎪 Smooth Animations - Configurable animation types and durations
🎯 Custom Rendering - Custom header and content rendering capabilities
♿ Accessibility Ready - Screen reader support and proper semantics

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { Accordion } from 'rn-base-component'

const sections = [
  {
    title: 'What is React Native?',
    content: 'React Native is a framework for building mobile applications using React.',
  },
  {
    title: 'How does it work?',
    content: 'React Native uses native components instead of web components as building blocks.',
  },
  {
    title: 'Is it production ready?',
    content: 'Yes, many popular apps like Facebook, Instagram, and Airbnb use React Native.',
  },
]

export default function App() {
  return  console.log('Section pressed:', key)} />
}

Advanced Usage

Multiple Expansion

⚛️TSX

 console.log('Toggled section:', key)} />

Custom Key Extractor

⚛️TSX

 `section-${item.id || index}`}
  expandMultiple={false}
/>

Custom Styling

⚛️TSX



const styles = StyleSheet.create({
  wrapper: {
    padding: 16,
  },
  itemContainer: {
    backgroundColor: '#f8f9fa',
    marginBottom: 8,
    borderRadius: 8,
  },
  headerContainer: {
    backgroundColor: '#007AFF',
    padding: 16,
    borderRadius: 8,
  },
  contentContainer: {
    backgroundColor: 'white',
    padding: 16,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
  },
  title: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
})

API Reference

AccordionProps

Prop	Type	Default	Description
`sections`	`Section[]`	Required	Array of section data
`keyExtractor`	`(item: Section, index: number) => string`	`index.toString()`	Function to extract unique keys
`expandMultiple`	`boolean`	`false`	Allow multiple sections to be expanded
`wrapperStyle`	`StyleProp<ViewStyle>`	`undefined`	Style for the accordion wrapper
`onPress`	`(key: string) => void`	`undefined`	Callback when section is pressed
`renderHeader`	`(item, index, expanded, key) => ReactNode`	`undefined`	Custom header renderer
`renderSectionTitle`	`(item, index, expanded) => ReactNode`	`undefined`	Custom title renderer
`renderContent`	`(item, index, expanded, key) => ReactNode`	`undefined`	Custom content renderer
`title`	`string`	`undefined`	Accordion title
`itemContainerStyle`	`StyleProp<ViewStyle>`	`undefined`	Style for each item container
`titleStyle`	`StyleProp<TextStyle>`	`undefined`	Style for section titles
`headerContainerStyle`	`StyleProp<ViewStyle>`	`undefined`	Style for header containers
`contentContainerStyle`	`StyleProp<ViewStyle>`	`undefined`	Style for content containers
`openAnimation`	`AnimationType`	`'easeInEaseOut'`	Animation type for opening
`closeAnimation`	`AnimationType`	`'easeInEaseOut'`	Animation type for closing
`openDuration`	`number`	`300`	Duration for open animation (ms)
`closeDuration`	`number`	`300`	Duration for close animation (ms)

Common Use Cases

FAQ Section

⚛️TSX

const faqData = [
  {
    title: 'How do I reset my password?',
    content: 'You can reset your password by clicking the "Forgot Password" link on the login page and following the instructions sent to your email.',
  },
  {
    title: 'Can I change my subscription plan?',
    content: 'Yes, you can upgrade or downgrade your subscription plan at any time from your account settings.',
  },
  {
    title: 'Is my data secure?',
    content: 'We use industry-standard encryption and security measures to protect your data.',
  },
]

⚛️TSX

const settingsData = [
  {
    title: 'Account Settings',
    content: 'Manage your profile, email preferences, and account security.',
    icon: 'user',
  },
  {
    title: 'Privacy & Security',
    content: 'Control who can see your information and how it\'s used.',
    icon: 'shield',
  },
  {
    title: 'Notifications',
    content: 'Choose what notifications you want to receive and how.',
    icon: 'bell',
  },
]

 (
    
      
      {item.title}
      
    
  )}
/>

Accessibility

⚛️TSX

 (
    
      {item.title}
    
  )}
/>

Best Practices

Content Organization - Group related content logically
Clear Titles - Use descriptive, scannable section titles
Performance - Avoid complex content in collapsed sections
Visual Feedback - Provide clear indicators for expandable sections
Animation Timing - Keep animations quick but noticeable
Accessibility - Ensure proper accessibility labels and states

Performance

Use React.memo for sections with complex content and consider lazy loading for accordion content with heavy assets.