Merge branch 'fix/🪗-bugs-api' into develop

Author: dev-chief

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  extends: ['@react-native-community', 'prettier'],
+  rules: {
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'prettier/prettier': [
+      'error',
+      {
+        printWidth: 80,
+        arrowParens: 'avoid',
+        singleQuote: true,
+        tabWidth: 2,
+        trailingComma: 'es5',
+        useTabs: false,
+      },
+    ],
+  },
+};

README.md

@@ -1,4 +1,4 @@
-## Буду благодарен за отзыв
+## Thanks
 <p>Please, click on ⭐ button.</p>
 
 
@@ -11,16 +11,11 @@
 - [Props](#props)
 - [Methods](#methods)
 - [FAQ](#faq)
-  - [Is it supported and tested both on android and iOS?](#is-it-supported-and-tested-both-on-android-and-ios)
-  - [NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?](#nsurlresponse-allheaderfields-unrecognized-selector-sent-to-instance-xx-crash)
-- [Contributing](#contributing)
-  - [Step 1](#step-1)
-  - [Step 2](#step-2)
-  - [Step 3](#step-3)
 - [Support](#support)
 - [License](#license)
 - [Hire](#hire)
 
+
 ## Installation
 
 <p>Expo:</p>
@@ -41,6 +36,13 @@ and package:
 ```bash
 $ yarn add react-native-accordion
 ```
+## Built with ❤️ and
+
+- [expo](https://www.npmjs.com/package/react-native)
+- [react-native](https://www.npmjs.com/package/react-native)
+- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)
+
+
 
 ## Features
 
@@ -55,13 +57,14 @@ For more complete example open [App.tsx](https://github.com/garganurag893/react-
 
 ```
 
+
+
 ## Props
 
 - `isArrow?`: boolean
 - `initExpand?`: boolean
 - `isPointerEvents?`: boolean;
 - `isUnmountOnCollapse?`: boolean;
-- `isBackgroundChevron?`: boolean;
 - `colorIcon?`: string
 - `sizeIcon?`: number
 - `activeBackgroundIcon?`: string;
@@ -82,6 +85,14 @@ For more complete example open [App.tsx](https://github.com/garganurag893/react-
 - `onChangeState`: (value: boolean) => boolean
 
 
+## 🎉 Example
+
+Checkout the example [here](https://github.com/timelessco/react-native-reanimated-switch/tree/master/example/RNSearch).
+
+## ✌️ Contributing
+
+Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
+
 ## Support
 
 Reach out to me at one of the following places!

example/package.json

@@ -13,29 +13,29 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/bottom-tabs": "^5.11.11",
-    "@react-navigation/native": "^5.9.4",
-    "@react-navigation/stack": "^5.14.5",
-    "expo": "^40.0.0",
+    "@react-navigation/bottom-tabs": "5.11.11",
+    "@react-navigation/native": "5.9.4",
+    "@react-navigation/stack": "5.14.5",
+    "expo": "40.0.0",
     "expo-splash-screen": "~0.8.1",
     "expo-status-bar": "~1.0.3",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.4",
     "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "~1.13.0",
-    "react-native-redash": "^16.0.11",
+    "react-native-reanimated": "2.1.0",
+    "react-native-redash": "16.0.11",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.2",
-    "react-native-svg": "^12.1.1",
+    "react-native-svg": "12.1.1",
     "react-native-unimodules": "~0.12.0",
     "react-native-web": "~0.14.9"
   },
   "devDependencies": {
     "@babel/core": "~7.12.10",
     "@babel/runtime": "^7.9.6",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.0.13"
+    "expo-cli": "4.0.13"
   }
 }

example/src/screens/home/index.d..ts

@@ -0,0 +1,26 @@
+export type Sports = {
+  image: string;
+  title: string;
+};
+
+type Events = {
+  command: {
+    one: string;
+    two: string;
+  };
+  icon: {
+    one: string;
+    two: string;
+  };
+  score: {
+    one: 3;
+    two: 4;
+  };
+  type: string;
+};
+export type Array = {
+  image: string;
+  title: string;
+  county: string;
+  events: Events[];
+};

example/src/screens/home/index.tsx

@@ -11,8 +11,9 @@ import { AnimatedAccordion } from 'react-native-accordion';
 import { useCallback } from 'react';
 import { assets } from '../../assets';
 import { Sport, Event } from '../../components';
+import { Array, Sports } from './index.d.';
 
-const sports: any = [
+const sports: Sports[] = [
   { image: assets.pingpong, title: 'Ping-pong' },
   { image: assets.badminton, title: 'Badminton' },
   { image: assets.baseball, title: 'Baseball' },
@@ -21,7 +22,7 @@ const sports: any = [
   { image: assets.basketball, title: 'Basketball' },
 ];
 
-const events: any = [
+const array: Array[] = [
   {
     image: assets.flag_1,
     title: 'La League',
@@ -64,7 +65,7 @@ const HomeScreen = () => {
   );
 
   const handleContent = useCallback(
-    (data) =>
+    data =>
       data.map(({ command, icon, score, type }) => (
         <Event
           key={command.one}
@@ -129,16 +130,18 @@ const HomeScreen = () => {
       {hasBanner}
       {hasSports}
 
-      {events.map(({ image, events, county, title }) => (
+      {array.map(({ image, events, county, title }) => (
         <AnimatedAccordion
           key={title}
           // data={events} FIXME
-          onChangeState={(value: boolean) => console.log(value)}
+          // onChangeState={(value: boolean) => console.log(value)}
           handleContentTouchable={handleContentTouchable}
           renderContent={() => handleContent(events)}
-          styleTouchable={styles.touchable}
-          styleContainer={styles.content}
-          // isBackgroundChevron={'#181829'} //FIXME
+          styleTouchable={styles.touchable} //  work
+          styleContainer={styles.content} // work
+          // colorIcon={'#FFFFFF'} work
+          // handleIndicatorFetching={}
+          // isStatusFetching={true} //work
         />
       ))}
     </SafeAreaView>

package.json

@@ -63,9 +63,9 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "16.13.1",
-    "react-native": "0.63.4",
+    "react-native": "0.64.1",
     "react-native-builder-bob": "^0.18.1",
-    "release-it": "^14.2.2",
+    "release-it": "^14.6.2",
     "typescript": "^4.2.4"
   },
   "peerDependencies": {
@@ -152,8 +152,9 @@
     ]
   },
   "dependencies": {
-    "react-native-reanimated": "2.0.0-rc.0",
-    "react-native-redash": "^16.0.11",
-    "react-native-svg": "^12.1.1"
+    "@react-native-community/bob": "^0.17.1",
+    "react-native-reanimated": ">=1.9.0",
+    "react-native-redash": "16.0.11",
+    "react-native-svg": "12.1.1"
   }
 }

src/components/accordion/index.tsx

@@ -1,5 +1,9 @@
-import React, { useCallback, useState } from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -28,12 +32,13 @@ const AnimatedAccordion = ({
   configExpanded,
   styleContainer,
   configCollapsed,
+  isStatusFetching = false,
   isPointerEvents = false,
-  isBackgroundChevron = true,
   isUnmountOnCollapse = false,
   activeBackgroundIcon = '#e5f6ff',
   onAnimatedEndExpanded,
   handleCustomTouchable,
+  handleIndicatorFetching,
   handleContentTouchable,
   onAnimatedEndCollapsed,
   inactiveBackgroundIcon = '#fff0e4',
@@ -52,7 +57,7 @@ const AnimatedAccordion = ({
   );
 
   const handleExpandedCallback = useCallback(
-    (isFinished) => {
+    isFinished => {
       if (isUnmountOnCollapse && !open.value && isFinished) setUnmounted(true);
 
       onAnimatedEndCollapsed(isFinished);
@@ -78,39 +83,53 @@ const AnimatedAccordion = ({
     onChangeState && onChangeState(!open.value);
   }, [layout?.height, onChangeState, open, size]);
 
+  const hasLoader = useMemo(
+    () =>
+      isStatusFetching ? (
+        handleIndicatorFetching ? (
+          handleIndicatorFetching()
+        ) : (
+          <ActivityIndicator size="small" color="#AAAAAA" />
+        )
+      ) : (
+        <Chevron
+          sizeIcon={sizeIcon}
+          progress={progress}
+          colorIcon={colorIcon}
+          handleIcon={handleIcon}
+          styleChevron={styleChevron}
+          activeBackgroundIcon={activeBackgroundIcon}
+          inactiveBackgroundIcon={inactiveBackgroundIcon}
+        />
+      ),
+    [
+      activeBackgroundIcon,
+      colorIcon,
+      handleIcon,
+      handleIndicatorFetching,
+      inactiveBackgroundIcon,
+      isStatusFetching,
+      progress,
+      sizeIcon,
+      styleChevron,
+    ]
+  );
+
   const renderHeader = useCallback(() => {
     return handleCustomTouchable ? (
       handleCustomTouchable()
     ) : (
       <Animated.View style={[styles.header, styleTouchable]}>
         {handleContentTouchable ? handleContentTouchable() : null}
-        {isArrow ? (
-          <Chevron
-            sizeIcon={sizeIcon}
-            progress={progress}
-            colorIcon={colorIcon}
-            handleIcon={handleIcon}
-            styleChevron={styleChevron}
-            isBackgroundChevron={isBackgroundChevron}
-            activeBackgroundIcon={activeBackgroundIcon}
-            inactiveBackgroundIcon={inactiveBackgroundIcon}
-          />
-        ) : null}
+        {isArrow ? hasLoader : null}
       </Animated.View>
     );
   }, [
-    isArrow,
-    progress,
-    sizeIcon,
-    colorIcon,
-    handleIcon,
-    styleChevron,
-    styleTouchable,
-    isBackgroundChevron,
-    activeBackgroundIcon,
     handleCustomTouchable,
+    styleTouchable,
     handleContentTouchable,
-    inactiveBackgroundIcon,
+    isArrow,
+    hasLoader,
   ]);
 
   const pointerEvents = !isPointerEvents && open.value ? 'none' : 'auto';
@@ -129,7 +148,11 @@ const AnimatedAccordion = ({
         pointerEvents={pointerEvents}
       >
         <View onLayout={onLayout} style={[styles.container, styleContainer]}>
-          {isUnmounted ? null : renderContent ? renderContent() : null}
+          {isUnmounted || isStatusFetching
+            ? null
+            : renderContent
+            ? renderContent()
+            : null}
         </View>
       </Animated.View>
     </>

src/components/accordion/types.d.ts

@@ -25,11 +25,21 @@ export interface AccordionProps {
    */
   contentHeight?: number;
 
+  /**
+   *
+   */
+  isStatusFetching: boolean;
+
   /**
    *
    */
   handleCustomTouchable?: () => FC | null;
 
+  /**
+   *
+   */
+  handleIndicatorFetching?: () => FC | null;
+
   /**
    *
    */
@@ -57,10 +67,6 @@ export interface AccordionProps {
    */
   isUnmountOnCollapse?: boolean;
 
-  /**
-   *  background icon arrow
-   */
-  isBackgroundChevron?: boolean;
 
   /**
    * component icon.
@@ -78,7 +84,7 @@ export interface AccordionProps {
    */
   inactiveBackgroundIcon?: string;
 
-  isPointerEvents?: false;
+  isPointerEvents?: boolean;
 
   /**
    * color icon