refactor: create one generic scrollable component (#442)

* chore: updated react-native in example

* chore: updated react/react native types

* chore: updated scrollable hooks

* chore: deleted old scrollable components

* refactor: added the new generic scrollable method

example/package.json

@@ -34,8 +34,8 @@
     "@babel/core": "^7.13.10",
     "@babel/runtime": "^7.13.10",
     "@types/faker": "^4.1.12",
-    "@types/react": "^17.0.3",
-    "@types/react-native": "^0.64.4",
+    "@types/react": "^17.0.5",
+    "@types/react-native": "^0.64.5",
     "metro-react-native-babel-preset": "^0.65.2",
     "typescript": "^4.2.4"
   }

example/yarn.lock

@@ -1312,10 +1312,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-native@^0.64.4":
-  version "0.64.4"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.4.tgz#9f11bef7dd5520801884829c73b19d75aa42e73c"
-  integrity sha512-VqnlmadGkD5usREvnuyVpWDS1W8f6cCz6MP5fZdgONsaZ9/Ijfb9Iq9MZ5O3bnW1OyJixDX9HtSp3COsFSLD8Q==
+"@types/react-native@^0.64.5":
+  version "0.64.5"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.5.tgz#219738b52b2e372ec057d3c8f20fbd6c37b245cd"
+  integrity sha512-k0r8MnQX7UFboZDvMKLov26gFLXKrNgLhCfSVhjaZ6wMUofKijxvee7/wgfAqtT2zS5FR4an4+qn0r72SCbw3g==
   dependencies:
     "@types/react" "*"
 
@@ -1327,10 +1327,10 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.3":
-  version "17.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
-  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
+"@types/react@^17.0.5":
+  version "17.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
+  integrity sha512-bj4biDB9ZJmGAYTWSKJly6bMr4BLUiBrx9ujiJEoP9XIDY9CTaPGxE5QWN/1WjpPLzYF7/jRNnV2nNxNe970sw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"

package.json

@@ -48,8 +48,8 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.1",
     "@types/invariant": "^2.2.34",
-    "@types/react": "^16.9.46",
-    "@types/react-native": "^0.63.8",
+    "@types/react": "^17.0.5",
+    "@types/react-native": "^0.64.5",
     "auto-changelog": "^2.2.1",
     "copyfiles": "^2.4.1",
     "eslint": "^7.26.0",

src/components/bottomSheet/BottomSheet.tsx

@@ -1063,6 +1063,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               animatedPosition,
               animatedSheetHeight,
               animatedSheetState,
+              animatedScrollableState,
               animatedContainerHeight,
               animatedHandleHeight,
               isLayoutCalculated,

src/components/bottomSheetScrollable/BottomSheetFlatList.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import {
+  FlatList as RNFlatList,
+  FlatListProps as RNFlatListProps,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetFlatListMethods,
+  BottomSheetFlatListProps,
+} from './types';
+
+const AnimatedFlatList = Animated.createAnimatedComponent<RNFlatListProps<any>>(
+  RNFlatList
+);
+
+const BottomSheetFlatListComponent = createBottomSheetScrollableComponent<
+  BottomSheetFlatListMethods,
+  BottomSheetFlatListProps<any>
+>(AnimatedFlatList);
+
+const BottomSheetFlatList = memo(BottomSheetFlatListComponent);
+BottomSheetFlatList.displayName = 'BottomSheetFlatList';
+
+export default BottomSheetFlatList as <T>(
+  props: BottomSheetFlatListProps<T>
+) => ReturnType<typeof BottomSheetFlatList>;

src/components/bottomSheetScrollable/BottomSheetScrollView.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import {
+  ScrollView as RNScrollView,
+  ScrollViewProps as RNScrollViewProps,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps,
+} from './types';
+
+const AnimatedScrollView = Animated.createAnimatedComponent<RNScrollViewProps>(
+  RNScrollView
+);
+
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps
+>(AnimatedScrollView);
+
+const BottomSheetScrollView = memo(BottomSheetScrollViewComponent);
+BottomSheetScrollView.displayName = 'BottomSheetScrollView';
+
+export default BottomSheetScrollView as (
+  props: BottomSheetScrollViewProps
+) => ReturnType<typeof BottomSheetScrollView>;

src/components/bottomSheetScrollable/BottomSheetSectionList.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import {
+  SectionList as RNSectionList,
+  SectionListProps as RNSectionListProps,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetSectionListMethods,
+  BottomSheetSectionListProps,
+} from './types';
+
+const AnimatedSectionList = Animated.createAnimatedComponent<
+  RNSectionListProps<any>
+>(RNSectionList);
+
+const BottomSheetSectionListComponent = createBottomSheetScrollableComponent<
+  BottomSheetSectionListMethods,
+  BottomSheetSectionListProps<any>
+>(AnimatedSectionList);
+
+const BottomSheetSectionList = memo(BottomSheetSectionListComponent);
+BottomSheetSectionList.displayName = 'BottomSheetSectionList';
+
+export default BottomSheetSectionList as <T>(
+  props: BottomSheetSectionListProps<T>
+) => ReturnType<typeof BottomSheetSectionList>;

src/components/flatList/FlatList.tsx → src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -1,58 +1,46 @@
 import React, {
   forwardRef,
-  Ref,
-  useRef,
-  useImperativeHandle,
   useEffect,
-  memo,
+  useImperativeHandle,
+  useRef,
 } from 'react';
-import {
-  FlatList as RNFlatList,
-  FlatListProps as RNFlatListProps,
-} from 'react-native';
-import Animated from 'react-native-reanimated';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
 import { useScrollableInternal, useBottomSheetInternal } from '../../hooks';
-import type {
-  BottomSheetFlatListProps,
-  BottomSheetFlatListType,
-} from './types';
 import { styles } from './styles';
 
-const AnimatedFlatList = Animated.createAnimatedComponent<RNFlatListProps<any>>(
-  RNFlatList
-);
-
-const BottomSheetFlatListName = 'FlatList';
-
-const BottomSheetFlatListComponent = forwardRef(
-  (props: BottomSheetFlatListProps<any>, ref: Ref<RNFlatList>) => {
+export function createBottomSheetScrollableComponent<T, P>(
+  ScrollableComponent: any
+) {
+  return forwardRef<T, P>((props, ref) => {
     // props
     const {
       focusHook: useFocusHook = useEffect,
       overScrollMode = 'never',
       ...rest
-    } = props;
+    }: any = props;
 
-    // refs
+    //#region refs
     const nativeGestureRef = useRef<NativeViewGestureHandler>(null);
+    //#endregion
 
-    // hooks
+    //#region hooks
     const {
       scrollableRef,
       scrollableAnimatedProps,
       handleScrollEvent,
       handleSettingScrollable,
-    } = useScrollableInternal(BottomSheetFlatListName);
+    } = useScrollableInternal();
     const { enableContentPanningGesture } = useBottomSheetInternal();
+    //#endregion
 
-    // effects
+    //#region effects
     // @ts-ignore
     useImperativeHandle(ref, () => scrollableRef.current);
     useFocusHook(handleSettingScrollable);
+    //#endregion
 
-    // render
+    //#region render
     return (
       <BottomSheetDraggableView
         nativeGestureRef={nativeGestureRef}
@@ -63,23 +51,18 @@ const BottomSheetFlatListComponent = forwardRef(
           enabled={enableContentPanningGesture}
           shouldCancelWhenOutside={false}
         >
-          <AnimatedFlatList
+          <ScrollableComponent
             {...rest}
             // @ts-ignore
             ref={scrollableRef}
             overScrollMode={overScrollMode}
             scrollEventThrottle={16}
             onScrollBeginDrag={handleScrollEvent}
-            // @ts-ignore
             animatedProps={scrollableAnimatedProps}
           />
         </NativeViewGestureHandler>
       </BottomSheetDraggableView>
     );
-  }
-);
-
-const BottomSheetFlatList = memo(BottomSheetFlatListComponent);
-BottomSheetFlatList.displayName = 'BottomSheetFlatList';
-
-export default (BottomSheetFlatList as any) as typeof BottomSheetFlatListType;
+    //#endregion
+  });
+}

src/components/bottomSheetScrollable/index.ts

@@ -0,0 +1,9 @@
+export { default as BottomSheetSectionList } from './BottomSheetSectionList';
+export { default as BottomSheetFlatList } from './BottomSheetFlatList';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+
+export type {
+  BottomSheetFlatListMethods,
+  BottomSheetScrollViewMethods,
+  BottomSheetSectionListMethods,
+} from './types';