react-native-magic-accordian

A customizable and lightweight accordion component for React Native that works seamlessly with dynamic API data.

Installation

To get started, install the library using npm or yarn:

npm install react-native-magic-accordian
# or
yarn add react-native-magic-accordian

Mandatory Plugin's to add 
npm i react-native-svg-transformer
npm i react-native-svg

add metro.config.js

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
 
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = { 
// add this lines for svg
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};
 
module.exports = mergeConfig(defaultConfig, config);


Mandatory Prop
The menudata prop is required to render the accordion. This prop must contain the API data used to populate the menu items.

Usage
Here's a basic example of how to use react-native-magic-accordian:

import React from 'react';
import { View } from 'react-native';
import MagicAccordian from 'react-native-magic-accordian';

const App = () => {
  const apiData = [
    {
      title: 'Section 1',
      content: 'This is the content for Section 1',
    },
    {
      title: 'Section 2',
      content: 'This is the content for Section 2',
    },
  ];

  return (
    <View style={{ flex: 1, padding: 10 }}>
      <MagicAccordian menudata={apiData} />
    </View>
  )
};

export default App;