refactor: create one generic scrollable component

example/package.json

@@ -13,14 +13,14 @@
     "@gorhom/portal": "^1.0.4",
     "@gorhom/showcase-template": "^2.0.4",
     "@react-native-community/blur": "^3.6.0",
-    "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/masked-view": "0.1.11",
     "@react-navigation/material-top-tabs": "^5.3.15",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.4",
     "faker": "^4.1.0",
     "nanoid": "^3.1.20",
     "react": "17.0.1",
-    "react-native": "facebook/react-native#cf8a364767df830d7255339741350bb53ab1a68a",
+    "react-native": "0.64.1",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-maps": "^0.28.0",
     "react-native-pager-view": "^5.1.5",
@@ -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

@@ -1177,10 +1177,10 @@
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
 
-"@react-native-community/masked-view@0.1.10":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
-  integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
+"@react-native-community/masked-view@0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
+  integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
 
 "@react-native/assets@1.0.0":
   version "1.0.0"
@@ -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" "*"
@@ -3902,9 +3902,10 @@ react-native-tab-view@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.0.1.tgz#7ed8c5c4a0bb48fa8895e612d26e6d545ed03447"
   integrity sha512-L7qXtYz5Z+NdWyu38zaJrlHA/8H6rNFRZXe3ydym12UEEPPoefbVZ71b9YK2O6QP0u4pUlzMpMVM/Lsz2DJ4jg==
 
-react-native@facebook/react-native#cf8a364767df830d7255339741350bb53ab1a68a:
-  version "0.64.0"
-  resolved "https://codeload.github.com/facebook/react-native/tar.gz/cf8a364767df830d7255339741350bb53ab1a68a"
+react-native@0.64.1:
+  version "0.64.1"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.1.tgz#cd38f5b47b085549686f34eb0c9dcd466f307635"
+  integrity sha512-jvSj+hNAfwvhaSmxd5KHJ5HidtG0pDXzoH6DaqNpU74g3CmAiA8vuk58B5yx/DYuffGq6PeMniAcwuh3Xp4biQ==
   dependencies:
     "@jest/create-cache-key-function" "^26.5.0"
     "@react-native-community/cli" "^5.0.1-alpha.0"

package.json

@@ -48,8 +48,8 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@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.24.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';