react-native-accordion-list-view - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

animations/toggleAnimation.d.ts

 import { LayoutAnimationConfig } from 'react-native';
 /**
- * Toggle animation config
- * @param animationDuration
- * @return LayoutAnimationConfig
+ * Generates a layout animation configuration for toggling the visibility of an element.
+ *
+ * @param {number} animationDuration - The duration of the animation in milliseconds.
+ * @returns {LayoutAnimationConfig} - The layout animation configuration object.
  */
 export declare const toggleAnimation: (animationDuration?: number) => LayoutAnimationConfig;

animations/toggleAnimation.js

@@ -6,5 +6,6 @@ "use strict";
 /**
- * Toggle animation config
- * @param animationDuration
- * @return LayoutAnimationConfig
+ * Generates a layout animation configuration for toggling the visibility of an element.
+ *
+ * @param {number} animationDuration - The duration of the animation in milliseconds.
+ * @returns {LayoutAnimationConfig} - The layout animation configuration object.
  */
@@ -11,0 +12,0 @@ const toggleAnimation = (animationDuration = 300) => {

components/AccordionItem/index.d.ts

 import { AccordionItemProps } from '../../models/AccordionItem';
-declare const AccordionItem: ({ customBody, customTitle, customIcon, containerStyle, animationDuration, isRTL, isOpen, onPress, }: AccordionItemProps) => JSX.Element;
+/**
+ * An individual item within an accordion list that can be expanded or collapsed.
+ * @param {AccordionItemProps} props - Props for configuring the AccordionItem.
+ * @returns {JSX.Element} - The AccordionItem component.
+ */
+declare const AccordionItem: ({ customBody, customTitle, customIcon, containerStyle, animationDuration, isRTL, isOpen, onPress, pressableProps, }: AccordionItemProps) => JSX.Element;
 export default AccordionItem;

components/AccordionItem/index.js

@@ -34,10 +34,30 @@ "use strict";
 const styles_1 = require("./styles");
-const AccordionItem = ({ customBody, customTitle, customIcon = undefined, containerStyle = {}, animationDuration = 300, isRTL = false, isOpen = false, onPress = undefined, }) => {
+/**
+ * An individual item within an accordion list that can be expanded or collapsed.
+ * @param {AccordionItemProps} props - Props for configuring the AccordionItem.
+ * @returns {JSX.Element} - The AccordionItem component.
+ */
+const AccordionItem = ({ customBody, customTitle, customIcon = undefined, containerStyle = {}, animationDuration = 300, isRTL = false, isOpen = false, onPress = undefined, pressableProps = {}, }) => {
+    /**
+     * Indicates whether the content of the accordion item is currently displayed.
+     * @type {boolean}
+     */
     const [showContent, setShowContent] = (0, react_1.useState)(isOpen);
+    /**
+     * A controller for managing the animation of the accordion item.
+     * @type {Animated.Value}
+     */
     const animationController = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
+    /**
+     * Toggles the visibility of the accordion item's content when the `isOpen` prop changes.
+     * This effect is triggered when the `isOpen` prop changes.
+     */
     (0, react_1.useEffect)(() => {
-        if (showContent && !isOpen) {
+        if (isOpen !== showContent) {
             toggleListItem();
         }
     }, [isOpen]);
+    /**
+     * Toggles the visibility of the accordion item's content.
+     */
     const toggleListItem = () => {
@@ -55,2 +75,6 @@ const config = {
     };
+    /**
+     * An animated transformation for rotating the arrow icon based on the animation state.
+     * @type {Animated.AnimatedInterpolation}
+     */
     const arrowTransform = animationController.interpolate({
@@ -61,3 +85,3 @@ inputRange: [0, 1],
     return (react_1.default.createElement(react_native_1.View, { style: [styles_1.styles.container, containerStyle] },
-        react_1.default.createElement(react_native_1.Pressable, { onPress: () => toggleListItem() },
+        react_1.default.createElement(react_native_1.Pressable, { ...pressableProps, onPress: () => toggleListItem() },
             react_1.default.createElement(react_native_1.View, { style: styles_1.styles.titleContainer },
@@ -64,0 +88,0 @@ (!isRTL || react_native_1.I18nManager.isRTL) && customTitle(),

components/AccordionItem/styles.d.ts

@@ -0,2 +1,10 @@
+/**
+ * Styles for the AccordionItem component.
+ * @constant {object}
+ */
 export declare const styles: {
+    /**
+     * Styles for the container that wraps the entire AccordionItem.
+     * @type {object}
+     */
     container: {
@@ -10,2 +18,6 @@ width: string;
     };
+    /**
+     * Styles for the title text within the AccordionItem.
+     * @type {object}
+     */
     title: {
@@ -16,2 +28,6 @@ fontSize: number;
     };
+    /**
+     * Styles for the body content within the AccordionItem.
+     * @type {object}
+     */
     body: {
@@ -21,2 +37,6 @@ paddingHorizontal: string;
     };
+    /**
+     * Styles for the container of the title and optional icon.
+     * @type {object}
+     */
     titleContainer: {
@@ -23,0 +43,0 @@ flexDirection: "row";

components/AccordionItem/styles.js

@@ -5,3 +5,11 @@ "use strict";
 const react_native_1 = require("react-native");
+/**
+ * Styles for the AccordionItem component.
+ * @constant {object}
+ */
 exports.styles = react_native_1.StyleSheet.create({
+    /**
+     * Styles for the container that wraps the entire AccordionItem.
+     * @type {object}
+     */
     container: {
@@ -15,2 +23,6 @@ width: '100%',
     },
+    /**
+     * Styles for the title text within the AccordionItem.
+     * @type {object}
+     */
     title: {
@@ -21,2 +33,6 @@ fontSize: 16,
     },
+    /**
+     * Styles for the body content within the AccordionItem.
+     * @type {object}
+     */
     body: {
@@ -26,2 +42,6 @@ paddingHorizontal: '2%',
     },
+    /**
+     * Styles for the container of the title and optional icon.
+     * @type {object}
+     */
     titleContainer: {
@@ -28,0 +48,0 @@ flexDirection: 'row',

components/AccordionList/index.d.ts

 import { AccordionListProps } from '../../models/AccordionList';
-declare const AccordionList: ({ data, customTitle, customBody, customIcon, containerItemStyle, animationDuration, isRTL, expandMultiple, ...props }: AccordionListProps) => JSX.Element;
+/**
+ * A component for rendering an accordion list with expandable items.
+ *
+ * @param {AccordionListProps} props - Props for configuring the AccordionList.
+ * @param {any[]} props.data - The data to render in the accordion list.
+ * @param {(item: any) => JSX.Element} props.customTitle - Function that returns a React element for the custom title of each item.
+ * @param {(item: any) => JSX.Element} props.customBody - Function that returns a React element for the custom body of each item.
+ * @param {() => JSX.Element | undefined} [props.customIcon] - Function that returns a React element for a custom icon, or undefined to use default icons.
+ * @param {object} [props.containerItemStyle] - Additional styles for the container of each accordion item.
+ * @param {number} [props.animationDuration] - The duration of the animation when expanding/collapsing items.
+ * @param {boolean} [props.isRTL] - Whether to use right-to-left layout.
+ * @param {boolean} [props.expandMultiple] - Whether to allow multiple items to be expanded at the same time.
+ * @param {number[]} [props.defaultOpenIndices] - An array of indices specifying which items should be open by default.
+ * @param {object} [props.pressableProps] - Additional props for the Pressable component.
+ * @returns {JSX.Element} - The AccordionList component.
+ */
+declare const AccordionList: ({ data, customTitle, customBody, customIcon, containerItemStyle, animationDuration, isRTL, expandMultiple, defaultOpenIndices, pressableProps, ...props }: AccordionListProps) => JSX.Element;
 export default AccordionList;

components/AccordionList/index.js

@@ -32,9 +32,60 @@ "use strict";
 const AccordionItem_1 = __importDefault(require("../AccordionItem"));
-const AccordionList = ({ data, customTitle, customBody, customIcon = undefined, containerItemStyle = {}, animationDuration = 300, isRTL = false, expandMultiple = false, ...props }) => {
+/**
+ * A component for rendering an accordion list with expandable items.
+ *
+ * @param {AccordionListProps} props - Props for configuring the AccordionList.
+ * @param {any[]} props.data - The data to render in the accordion list.
+ * @param {(item: any) => JSX.Element} props.customTitle - Function that returns a React element for the custom title of each item.
+ * @param {(item: any) => JSX.Element} props.customBody - Function that returns a React element for the custom body of each item.
+ * @param {() => JSX.Element | undefined} [props.customIcon] - Function that returns a React element for a custom icon, or undefined to use default icons.
+ * @param {object} [props.containerItemStyle] - Additional styles for the container of each accordion item.
+ * @param {number} [props.animationDuration] - The duration of the animation when expanding/collapsing items.
+ * @param {boolean} [props.isRTL] - Whether to use right-to-left layout.
+ * @param {boolean} [props.expandMultiple] - Whether to allow multiple items to be expanded at the same time.
+ * @param {number[]} [props.defaultOpenIndices] - An array of indices specifying which items should be open by default.
+ * @param {object} [props.pressableProps] - Additional props for the Pressable component.
+ * @returns {JSX.Element} - The AccordionList component.
+ */
+const AccordionList = ({ data, customTitle, customBody, customIcon = undefined, containerItemStyle = {}, animationDuration = 300, isRTL = false, expandMultiple = false, defaultOpenIndices = [], pressableProps = {}, ...props }) => {
+    /**
+     * State variable to track the currently open item in the accordion.
+     * @type {any}
+     */
     const [currentlyOpen, setCurrentlyOpen] = (0, react_1.useState)(null);
-    const renderItem = ({ item }) => (react_1.default.createElement(AccordionItem_1.default, { containerStyle: containerItemStyle, customTitle: () => customTitle(item), customBody: () => customBody(item), customIcon: customIcon, animationDuration: animationDuration, isRTL: isRTL, isOpen: JSON.stringify(currentlyOpen) === JSON.stringify(item), onPress: (status) => {
+    /**
+     * State variable to store an array of default open indices in the accordion.
+     * @type {number[]}
+     */
+    const [defaultOpen, setDefaultOpen] = (0, react_1.useState)(defaultOpenIndices);
+    /**
+     * Checks if an accordion item is open based on its index.
+     *
+     * @param {any} item - The data item of the accordion.
+     * @param {number} index - The index of the accordion item.
+     * @returns {boolean} - True if the item is open; otherwise, false.
+     */
+    const checkIfOpen = (0, react_1.useCallback)((item, index) => {
+        return JSON.stringify(currentlyOpen) === JSON.stringify(item) || (defaultOpen?.includes(index) ?? false);
+    }, [currentlyOpen, defaultOpen]);
+    /**
+     * useEffect to initialize the default open indices and show an error if necessary.
+     */
+    (0, react_1.useEffect)(() => {
+        setDefaultOpen(defaultOpenIndices || []);
+        if (defaultOpenIndices?.length > 1 && !expandMultiple) {
+            console.error('Error: You have multiple items opened by default, but expandMultiple is disabled.');
+        }
+    }, [defaultOpenIndices, expandMultiple]);
+    /**
+     * Renders an individual item within the accordion.
+     *
+     * @param {{ item: any; index: number }} - The item and its index.
+     * @returns {JSX.Element} - The rendered AccordionItem component.
+     */
+    const renderItem = ({ item, index }) => (react_1.default.createElement(AccordionItem_1.default, { containerStyle: containerItemStyle, customTitle: () => customTitle(item), customBody: () => customBody(item), customIcon: customIcon, animationDuration: animationDuration, isRTL: isRTL, isOpen: checkIfOpen(item, index), onPress: (status) => {
             if (status && !expandMultiple) {
+                setDefaultOpen([]);
                 setCurrentlyOpen(item);
             }
-        } }));
+        }, pressableProps: pressableProps }));
     return react_1.default.createElement(react_native_1.FlatList, { data: data, renderItem: renderItem, keyExtractor: (item, index) => index.toString(), ...props });
@@ -41,0 +92,0 @@ };

index.d.ts

 import AccordionItem from './components/AccordionItem';
 import AccordionList from './components/AccordionList';
+/**
+ * Exported components from the Accordion module.
+ *
+ * @module Accordion
+ * @exports AccordionItem - An individual accordion item component.
+ * @exports AccordionList - A component for rendering a list of expandable accordion items.
+ */
 export { AccordionItem, AccordionList };

models/AccordionItem.d.ts

 import { ViewStyle } from 'react-native';
+import { AccordionPressableProps } from './AccordionPressable';
+/**
+ * Props for the AccordionItem component.
+ * @interface AccordionItemProps
+ */
 export interface AccordionItemProps {
     /**
-     * Function that returns a React element to display as Accordion title
+     * Function that returns a React element to display as Accordion title.
+     * @function
+     * @returns {JSX.Element} - The React element for the title.
      */
     customTitle: () => JSX.Element;
     /**
-     * Function that returns a React element to display as Accordion body
+     * Function that returns a React element to display as Accordion body.
+     * @function
+     * @returns {JSX.Element} - The React element for the body.
      */
     customBody: () => JSX.Element;
     /**
-     * An optional Function that returns a React element to display as Accordion icon
-     * default icon keyboard-arrow-left
+     * An optional function that returns a React element to display as Accordion icon.
+     * Default icon is keyboard-arrow-left.
+     * @function
+     * @returns {JSX.Element} - The React element for the icon.
      */
     customIcon?: () => JSX.Element;
     /**
-     * An optional param to add custom container style
+     * An optional parameter to add custom container style.
+     * @type {ViewStyle}
      */
     containerStyle?: ViewStyle;
     /**
-     *  An optional param to control Accordion animation duration
-     *  default value is 300
+     * An optional parameter to control Accordion animation duration.
+     * Default value is 300.
+     * @type {number}
      */
     animationDuration?: number;
     /**
-     *  An optional param to support RTL layout
-     *  default value is false
+     * An optional parameter to support RTL layout.
+     * Default value is false.
+     * @type {boolean}
      */
     isRTL?: boolean;
     /**
-     *  An optional param to make accordion item already open
-     *  default value is false
+     * An optional parameter to make the accordion item already open.
+     * Default value is false.
+     * @type {boolean}
      */
     isOpen?: boolean;
     /**
-     *  An optional param to call a function when a click happen to accordion item
-     *  default value is undefined
-     *  @param {boolean} isOpen the current state of the accordion item
+     * An optional parameter to call a function when a click happens to the accordion item.
+     * Default value is undefined.
+     * @param {boolean} isOpen - The current state of the accordion item.
      */
     onPress?: (isOpen: boolean) => void;
+    /**
+     * Additional props for configuring the Pressable component.
+     * @type {AccordionPressableProps}
+     */
+    pressableProps?: AccordionPressableProps;
 }

models/AccordionList.d.ts

 import { FlatListProps, ViewStyle } from 'react-native';
+import { AccordionPressableProps } from './AccordionPressable';
+/**
+ * Props for the AccordionList component.
+ * Extends FlatListProps from react-native.
+ * @interface AccordionListProps
+ * @extends FlatListProps<any>
+ */
 export interface AccordionListProps extends Omit<FlatListProps<any>, 'data' | 'renderItem'> {
     /**
-     * For simplicity, data is a plain array.
-     * If you want to use something else, like an immutable list
+     * An array of data to be displayed in the AccordionList.
+     * @type {any[]}
      */
     data: any[];
     /**
-     * Function that returns a React element to display as Accordion title
+     * Function that returns a React element to display as Accordion title.
+     * @function
+     * @param {any} item - The data item for the Accordion.
+     * @returns {JSX.Element} - The React element for the title.
      */
     customTitle: (item: any) => JSX.Element;
     /**
-     * Function that returns a React element to display as Accordion body
+     * Function that returns a React element to display as Accordion body.
+     * @function
+     * @param {any} item - The data item for the Accordion.
+     * @returns {JSX.Element} - The React element for the body.
      */
     customBody: (item: any) => JSX.Element;
     /**
-     * An optional Function that returns a React element to display as Accordion icon
-     * default icon keyboard-arrow-left
+     * An optional function that returns a React element to display as Accordion icon.
+     * Default icon is keyboard-arrow-left.
+     * @function
+     * @returns {JSX.Element} - The React element for the icon.
      */
     customIcon?: () => JSX.Element;
     /**
-     * An optional param to add custom container item style
+     * An optional parameter to add custom container item style.
+     * @type {ViewStyle}
      */
     containerItemStyle?: ViewStyle;
     /**
-     *  An optional param to control Accordion animation duration
-     *  default value is 300
+     * An optional parameter to control Accordion animation duration.
+     * Default value is 300.
+     * @type {number}
      */
     animationDuration?: number;
     /**
-     *  An optional param to support RTL layout
-     *  default value is false
+     * An optional parameter to support RTL layout.
+     * Default value is false.
+     * @type {boolean}
      */
@@ -37,5 +55,16 @@ isRTL?: boolean;
      * Allow more than one section to be expanded.
-     * default value is false
+     * Default value is false.
+     * @type {boolean}
      */
     expandMultiple?: boolean;
+    /**
+     * An array of indices indicating which sections should be expanded by default.
+     * @type {number[]}
+     */
+    defaultOpenIndices?: number[];
+    /**
+     * Additional props for configuring the Pressable component.
+     * @type {AccordionPressableProps}
+     */
+    pressableProps?: AccordionPressableProps;
 }

package.json

 {
   "name": "react-native-accordion-list-view",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Animated accordion collapsable List for react native.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -7,4 +7,4 @@ ## react-native-accordion-list-view
 <p align="left">
-  <a href="https://www.npmjs.com/package/react-native-accordion-list-view"><img src="https://img.shields.io/badge/npm-v2.0.1-blue"></a>
-  <a href="https://travis-ci.org/louay12/react-native-accordion-list-view"><img src="https://img.shields.io/travis/react-native-elements/react-native-elements/master.svg"></a>
+  <a href="https://www.npmjs.com/package/react-native-accordion-list-view"><img src="https://img.shields.io/badge/npm-v2.0.2-blue"></a>
+  <a href="https://travis-ci.org/louay12/react-native-accordion-list-view"><img src="https://img.shields.io/badge/Build-Passing-pass"></a>
 </p>
@@ -45,5 +45,5 @@
 if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
+    if (UIManager.setLayoutAnimationEnabledExperimental) {
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
 }
@@ -53,6 +53,10 @@ ```
 ### Demo
+<div style="display: flex; gap: 12px; flex-wrap: wrap">
 <p>
-   <img width="200" src="https://raw.githubusercontent.com/louaySleman/react-native-accordion-list-view/master/examples/singleSelect.gif" />
+   <img width="200" src="https://raw.githubusercontent.com/louaySleman/react-native-accordion-list-view/master/examples/android.gif" />
 </p>
-
+<p>
+   <img width="200" src="https://raw.githubusercontent.com/louaySleman/react-native-accordion-list-view/master/examples/ios.gif" />
+</p>
+</div>
 ## Versioning
@@ -63,2 +67,7 @@ This project follows semantic versioning. We do not hesitate to release breaking changes but they will be in a major version.
 
+- [2.0.2](https://www.npmjs.com/package/react-native-accordion-list-view/v/2.0.2) - New Features
+
+  **defaultOpenIndices**: You can now specify an array of indices in the `defaultOpenIndices` prop for the accordion list. These indices indicate which sections should be expanded by default, allowing you to control the initial state of the accordion.
+
+  **pressableProps**: We've added a new prop called `pressableProps` to both the accordion list and accordion item components. This allows you to customize the styles and ripple effects for the pressable component, giving you more control over the user interaction experience.
 - [2.0.1](https://www.npmjs.com/package/react-native-accordion-list-view/v/2.0.1) - Allow single/multiple expanding, allow `AccordionItem` to be opened by default using `isOpen` property, add `onPress` for `AccordionItem`.
@@ -74,13 +83,15 @@ - [2.0.0](https://www.npmjs.com/package/react-native-accordion-list-view/v/2.0.0) - Change library code to typescript and Replacing `TouchableOpacity` with `Pressable`.
 
-| Props              | Params                   | isRequire | Default             | Description                                                                                      | 
-|--------------------|--------------------------|-----------|---------------------|--------------------------------------------------------------------------------------------------|
-| data               | Array                    | Yes       |                     | For simplicity, data is a plain array. If you want to use something else, like an immutable list |
-| customTitle        | (item) => JSX.Element    | Yes       |                     | Function that returns a React element to display as Accordion title                              |
-| customBody         | (item) => JSX.Element    | Yes       |                     | Function that returns a React element to display as Accordion body                               |
-| customIcon         | () => JSX.Element        | No        | keyboard-arrow-left | Function that returns a React element to display as Accordion icon                               |
-| containerItemStyle | ViewStyle                   | No        | {}                  | Styling for Accordion item container view                                                        |
-| style              | ViewStyle                | No        | {}                  | Styling for container view                                                                       |
-| animationDuration  | Number                   | No        | 300                 | Accordion animation duration                                                                     |
-| isRTL             | Boolean                   | No        | false               | Support RTL                                                                                      |
-| expandMultiple             | Boolean                   | No        | false               | Allow more than one section to be expanded                                                                                      |
+| Props              | Params                                                            | isRequire | Default             | Description                                                                                                                                      | 
+|--------------------|-------------------------------------------------------------------|-----------|---------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| data               | Array                                                             | Yes       |                     | For simplicity, data is a plain array. If you want to use something else, like an immutable list                                                 |
+| customTitle        | (item) => JSX.Element                                             | Yes       |                     | Function that returns a React element to display as Accordion title                                                                              |
+| customBody         | (item) => JSX.Element                                             | Yes       |                     | Function that returns a React element to display as Accordion body                                                                               |
+| customIcon         | () => JSX.Element                                                 | No        | keyboard-arrow-left | Function that returns a React element to display as Accordion icon                                                                               |
+| containerItemStyle | ViewStyle                                                         | No        | {}                  | Styling for Accordion item container view                                                                                                        |
+| style              | ViewStyle                                                         | No        | {}                  | Styling for container view                                                                                                                       |
+| animationDuration  | Number                                                            | No        | 300                 | Accordion animation duration                                                                                                                     |
+| isRTL             | Boolean                                                           | No        | false               | Support RTL                                                                                                                                      |
+| expandMultiple             | Boolean                                                           | No        | false               | Allow more than one section to be expanded                                                                                                       |
+| defaultOpenIndices             | number[]                                                          | No        | []                  | An array of indices indicating which sections should be expanded by default. If `expandMultiple` is set to `false`, it can only contain a single index. |
+| pressableProps             | [AccordionPressableProps](https://reactnative.dev/docs/pressable) | No        | {}                  | Additional props for configuring the Pressable component.                                                                                                       |
 
@@ -94,2 +105,3 @@
 
+#### Without Custom Styles
 ```javascript
@@ -147,2 +159,81 @@ import React, { useEffect } from 'react';
 
+#### With Custom Styles
+```javascript
+import React, { useEffect } from 'react';
+import {View, SafeAreaView, StyleSheet, Text, Platform, UIManager} from 'react-native';
+import {AccordionList} from 'react-native-accordion-list-view';
+
+const App = () => {
+    const data = [
+        {
+            id: 0,
+            title: 'Lorem Ipsum is simply dummy',
+            body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+        {
+            id: 1,
+            title: 'Lorem Ipsum is simply dummy',
+            body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+        {
+            id: 2,
+            title: 'Lorem Ipsum is simply dummy',
+            body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+        {
+            id: 3,
+            title: 'Lorem Ipsum is simply dummy',
+            body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+    ];
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            if (UIManager.setLayoutAnimationEnabledExperimental) {
+                UIManager.setLayoutAnimationEnabledExperimental(true);
+            }
+        }
+    }, []);
+    return (
+        <SafeAreaView>
+            <View style={styles.container}>
+                <AccordionList
+                    data={data}
+                    customTitle={item => <Text>{item.title}</Text>}
+                    customBody={item => <Text>{item.body}</Text>}
+                    animationDuration={400}
+                    defaultOpenIndices={[0, 2]}
+                    expandMultiple={true}
+                    containerItemStyle={{padding: 0}}
+                    pressableProps={{
+                        style: ({pressed}) => [
+                            {
+                                padding: '2%',
+                                backgroundColor:
+                                    pressed && Platform.OS == 'ios'
+                                        ? 'rgb(210, 230, 255)'
+                                        : 'transparent',
+                            },
+                        ],
+                        android_ripple: {
+                            color: 'rgb(210, 230, 255)',
+                        },
+                    }}
+                />
+            </View>
+        </SafeAreaView>
+    );
+};
+
+export default App;
+const styles = StyleSheet.create({
+    container: {
+        paddingVertical: '2%',
+        paddingHorizontal: '3%',
+        height: '100%',
+        backgroundColor: '#e7e7e7',
+    },
+});
+
+```
+
 ### Accordion Item
@@ -161,2 +252,3 @@ This component allows you to use `Accordion Item` component in any place if you have your own wrapper or if you have a problem with using `FlatList` in your screen.
 | onPress             | (isOpen: boolean) => void       | No        | -                   | An optional callback function called when a click happen to the accordion item and return the current state (if it's open or not) |
+| pressableProps             | [AccordionPressableProps](https://reactnative.dev/docs/pressable) | No        | {}                  | Additional props for configuring the Pressable component.                                                                                                       |
 
@@ -171,37 +263,37 @@ ### Example
 const App = () => {
-  const data = [
-    {
-      id: 0,
-      title: 'Lorem Ipsum is simply dummy',
-      body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-    },
-    {
-      id: 1,
-      title: 'Lorem Ipsum is simply dummy',
-      body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-    },
-  ];
-  useEffect(() => {
-      if (Platform.OS === 'android') {
-          if (UIManager.setLayoutAnimationEnabledExperimental) {
-              UIManager.setLayoutAnimationEnabledExperimental(true);
-          }
-      }
-  }, []);
-  return (
-    <SafeAreaView>
-      <ScrollView style={styles.container}>
-        {data.map(item => (
-          <AccordionItem
-            key={item.id}
-            customTitle={() => <Text>{item.title}</Text>}
-            customBody={() => <Text>{item.body}</Text>}
-            animationDuration={400}
-            isOpen={false}
-            onPress={(isOpen) => console.log(isOpen)}
-          />
-        ))}
-      </ScrollView>
-    </SafeAreaView>
-  );
+    const data = [
+        {
+            id: 0,
+            title: 'Lorem Ipsum is simply dummy',
+            body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+        {
+            id: 1,
+            title: 'Lorem Ipsum is simply dummy',
+            body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        },
+    ];
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            if (UIManager.setLayoutAnimationEnabledExperimental) {
+                UIManager.setLayoutAnimationEnabledExperimental(true);
+            }
+        }
+    }, []);
+    return (
+        <SafeAreaView>
+            <ScrollView style={styles.container}>
+                {data.map(item => (
+                    <AccordionItem
+                        key={item.id}
+                        customTitle={() => <Text>{item.title}</Text>}
+                        customBody={() => <Text>{item.body}</Text>}
+                        animationDuration={400}
+                        isOpen={false}
+                        onPress={(isOpen) => console.log(isOpen)}
+                    />
+                ))}
+            </ScrollView>
+        </SafeAreaView>
+    );
 };
@@ -211,10 +303,23 @@
 const styles = StyleSheet.create({
-  container: {
-    paddingVertical: '2%',
-    paddingHorizontal: '3%',
-    height: '100%',
-    backgroundColor: '#e7e7e7',
-  },
+    container: {
+        paddingVertical: '2%',
+        paddingHorizontal: '3%',
+        height: '100%',
+        backgroundColor: '#e7e7e7',
+    },
 });
 
 ```
+### Common Issues and Errors
+
+Error: You have multiple items opened by default, but expandMultiple is disabled, If you encounter the following error message in your console:
+
+```javascript
+console.error('Error: You have multiple items opened by default, but expandMultiple is disabled.');
+```
+This error occurs when you have set expandMultiple to false and provided an array with multiple indices in the defaultOpenIndices prop. Remember that when expandMultiple is set to false, you can only specify a single index in the defaultOpenIndices array.
+
+To resolve this issue, make sure that defaultOpenIndices contains only one index when expandMultiple is false.
+
+### License
+MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54389

increased by75.57%

Number of package files

27

increased by17.39%

Lines of code

600

increased by102.02%

Number of lines in readme file

316

increased by49.76%

No dependency changes