Merge branch 'develop' into main

Author: dev-chief

README.md

@@ -75,7 +75,7 @@ For more complete example open [App.tsx](https://github.com/dev-event/react-nati
 ```tsx
 import React, { useState, useCallback } from "react";
 import { StyleSheet, View, Text,  StatusBar} from "react-native";
-import { AnimatedAccordion } from 'react-native-accordion';
+import AnimatedAccordion from 'react-native-accordion';
 
 
 const App: React.FC = () => {
@@ -97,6 +97,7 @@ const App: React.FC = () => {
             sizeIcon={16}
             styleChevron={styles.icon}
             renderContent={handleContent}
+            onChangeState={(isShow) => setShow(isShow)}
             styleTouchable={styles.touchable}
             activeBackgroundIcon={theme.light_gray}
             inactiveBackgroundIcon={theme.light_gray}
@@ -147,6 +148,8 @@ const styles = StyleSheet.create({
 - `inactiveBackgroundIcon?`: string;
 - `contentHeight?`:  number
 - `handleIcon?`:  () => void
+- `onAnimatedEndExpanded?`:  () => void
+- `onAnimatedEndCollapsed?`:  () => void
 - `handleCustomTouchable?`:  () => void
 - `handleContentTouchable?`:  () => void
 - `renderContent?`:  () => void;
@@ -191,5 +194,3 @@ Reach out to me at one of the following places!
 [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)
 
 - **[MIT license](http://opensource.org/licenses/mit-license.php)**
-
-[react-native-country-picker-modal]: https://github.com/xcarpentier/react-native-country-picker-modal

example/src/screens/home/index.tsx

@@ -7,7 +7,7 @@ import {
   Image,
   ScrollView,
 } from 'react-native';
-import { AnimatedAccordion } from 'react-native-accordion';
+import AnimatedAccordion from '../../../../src';
 import { useCallback } from 'react';
 import { assets } from '../../assets';
 import { Sport, Event } from '../../components';
@@ -167,13 +167,18 @@ const HomeScreen = () => {
   );
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingBottom: 100}}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: 100 }}
+      >
         {hasHeader}
         {hasBanner}
         {hasSports}
         {array.map(({ image, events, county, title }) => (
           <AnimatedAccordion
             key={title}
+            onAnimatedEndExpanded={() => console.log('expanded')}
+            onAnimatedEndCollapsed={() => console.log('collapsed')}
             handleContentTouchable={() =>
               handleContentTouchable(title, image, county)
             }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-event/react-native-accordion",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A performant interactive collapsed view with fully configurable options",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,6 +26,7 @@
     "typescript": "tsc --noEmit",
     "prepare": "bob build",
     "release": "release-it",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
@@ -42,7 +43,7 @@
     "animated view"
   ],
   "repository": "https://github.com/dev-event/react-native-accordion",
-  "author": "Aliaksei Petrusevich <effectwaater@gmail.com> (https://github.com/dev-event)",
+  "author": "dev-event <effectwaater@gmail.com> (https://github.com/dev-event)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/dev-event/react-native-accordion/issues"

src/components/accordion/accordion.tsx renamed to src/accordion/accordion.tsx

@@ -10,13 +10,14 @@ import Animated, {
   useDerivedValue,
   withTiming,
   runOnUI,
+  runOnJS,
 } from 'react-native-reanimated';
-import { Chevron } from '../chevron';
-import type { AnimatedAccordionProps } from '../accordion/types';
-import { styles } from '../accordion/styles';
-import { useLayout } from '../../hooks';
+import Chevron from '../chevron';
+import type { IAccordionProps } from './types';
+import { styles } from './styles';
+import { useLayout } from '../hooks';
 
-const AnimatedAccordion: FC<AnimatedAccordionProps> = ({
+const AnimatedAccordion: FC<IAccordionProps> = ({
   isArrow = true,
   sizeIcon = 16,
   disabled = false,
@@ -35,9 +36,11 @@ const AnimatedAccordion: FC<AnimatedAccordionProps> = ({
   isStatusFetching = false,
   activeBackgroundIcon = '#e5f6ff',
   handleCustomTouchable,
-  handleIndicatorFetching,
+  onAnimatedEndExpanded,
+  onAnimatedEndCollapsed,
   handleContentTouchable,
   inactiveBackgroundIcon = '#fff0e4',
+  handleIndicatorFetching,
 }) => {
   const [layout, onLayout] = useLayout(0);
 
@@ -63,7 +66,15 @@ const AnimatedAccordion: FC<AnimatedAccordionProps> = ({
   }, [isStatusFetching, layout, size]);
 
   const progress = useDerivedValue(() =>
-    open.value ? withTiming(1, configExpanded) : withTiming(0, configCollapsed)
+    open.value
+      ? withTiming(1, configExpanded, () => {
+          'worklet';
+          runOnJS(onAnimatedEndExpanded)();
+        })
+      : withTiming(0, configCollapsed, () => {
+          'worklet';
+          runOnJS(onAnimatedEndCollapsed)();
+        })
   );
 
   const style = useAnimatedStyle(() => ({
@@ -154,4 +165,4 @@ const AnimatedAccordion: FC<AnimatedAccordionProps> = ({
   );
 };
 
-export { AnimatedAccordion };
+export default AnimatedAccordion;

src/accordion/index.ts

@@ -0,0 +1,2 @@
+export { default } from './accordion';
+export type { IAccordionProps } from './types';

src/components/accordion/styles.ts renamed to src/accordion/styles.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { ViewStyle, ViewProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
-export interface AnimatedAccordionProps {
+export interface IAccordionProps {
   /**
    *  active/inactive TouchableWithoutFeedback
    */
@@ -50,6 +50,16 @@ export interface AnimatedAccordionProps {
    */
   onChangeState: (value: boolean) => void;
 
+  /**
+   *
+   */
+  onAnimatedEndExpanded?: () => void;
+
+  /**
+   *
+   */
+  onAnimatedEndCollapsed?: () => void;
+
   /**
    *
    */

src/components/accordion/types.d.ts renamed to src/accordion/types.d.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { mix, mixColor } from 'react-native-redash';
-import type { AccordionIconProps } from './types';
+import type { IChevronProps } from './types';
 
 const Chevron = ({
   sizeIcon,
@@ -13,7 +13,7 @@ const Chevron = ({
   styleChevron,
   activeBackgroundIcon,
   inactiveBackgroundIcon,
-}: AccordionIconProps) => {
+}: IChevronProps) => {
   const style = useAnimatedStyle(() => ({
     // @ts-ignore
     backgroundColor: mixColor(
@@ -55,7 +55,7 @@ const Chevron = ({
   );
 };
 
-export { Chevron };
+export default Chevron;
 
 const styles = StyleSheet.create({
   container: {

src/components/chevron/index.tsx renamed to src/chevron/chevron.tsx

@@ -0,0 +1,2 @@
+export { default } from './chevron';
+export type { IChevronProps } from './types';

src/chevron/index.ts

@@ -1,7 +1,7 @@
 import Animated from 'react-native-reanimated';
 import { FC } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-export interface AccordionIconProps {
+export interface IChevronProps {
   progress: Animated.SharedValue<number>;
   sizeIcon?: number;
   /**