Add flashlist support for bottomsheet

Author: huderlem

package.json

@@ -66,6 +66,7 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-native": "*",
+    "@shopify/flash-list": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=1.10.1",

src/components/bottomSheetScrollable/BottomSheetFlashList.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {
+  FlashList as ShopifyFlashList,
+  FlashListProps,
+} from '@shopify/flash-list';
+import { SCROLLABLE_TYPE } from '../../constants';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetFlashListMethods,
+  BottomSheetFlashListProps,
+} from './types';
+import Animated from 'react-native-reanimated';
+import BottomSheetScrollView from './BottomSheetScrollView';
+
+const AnimatedShopifyFlashList =
+  Animated.createAnimatedComponent(ShopifyFlashList);
+const AnimatedFlashList = React.forwardRef<any, FlashListProps<any>>(
+  (props, ref) => (
+    <AnimatedShopifyFlashList
+      ref={ref}
+      // @ts-ignore
+      renderScrollComponent={BottomSheetScrollView}
+      {...props}
+    />
+  )
+);
+
+const BottomSheetFlashListComponent = createBottomSheetScrollableComponent<
+  BottomSheetFlashListMethods,
+  BottomSheetFlashListProps<any>
+>(SCROLLABLE_TYPE.FLASHLIST, AnimatedFlashList);
+
+const BottomSheetFlashList = React.memo(BottomSheetFlashListComponent);
+BottomSheetFlashList.displayName = 'BottomSheetFlashList';
+
+export default BottomSheetFlashList as <T>(
+  props: BottomSheetFlashListProps<T>
+) => ReturnType<typeof BottomSheetFlashList>;

src/components/bottomSheetScrollable/index.ts

@@ -1,10 +1,12 @@
 export { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
 export { default as BottomSheetSectionList } from './BottomSheetSectionList';
+export { default as BottomSheetFlashList } from './BottomSheetFlashList';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export { default as BottomSheetScrollView } from './BottomSheetScrollView';
 export { default as BottomSheetVirtualizedList } from './BottomSheetVirtualizedList';
 
 export type {
+  BottomSheetFlashListMethods,
   BottomSheetFlatListMethods,
   BottomSheetScrollViewMethods,
   BottomSheetSectionListMethods,

src/components/bottomSheetScrollable/types.d.ts

@@ -18,6 +18,7 @@ import type {
 } from 'react-native';
 import type Animated from 'react-native-reanimated';
 import type { ScrollEventsHandlersHookType } from '../../types';
+import type { FlashListProps } from '@shopify/flash-list';
 
 export interface BottomSheetScrollableProps {
   /**
@@ -62,6 +63,7 @@ export interface BottomSheetScrollableProps {
 export type ScrollableProps<T> =
   | ScrollViewProps
   | FlatListProps<T>
+  | FlashListProps<T>
   | SectionListProps<T>;
 
 //#region FlatList
@@ -142,6 +144,87 @@ export interface BottomSheetFlatListMethods {
 }
 //#endregion
 
+//#region FlatList
+export type BottomSheetFlashListProps<T> = Omit<
+  FlashListProps<T>,
+  | 'decelerationRate'
+  | 'onScroll'
+  | 'scrollEventThrottle'
+  | 'renderScrollComponent'
+> &
+  BottomSheetScrollableProps & {
+    ref?: Ref<BottomSheetFlashListMethods>;
+  };
+
+export interface BottomSheetFlashListMethods {
+  /**
+   * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+   */
+  scrollToEnd: (params?: { animated?: boolean | null }) => void;
+
+  /**
+   * Scrolls to the item at the specified index such that it is positioned in the viewable area
+   * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+   * Cannot scroll to locations outside the render window without specifying the getItemLayout prop.
+   */
+  scrollToIndex: (params: {
+    animated?: boolean | null;
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number;
+  }) => void;
+
+  /**
+   * Requires linear scan through data - use `scrollToIndex` instead if possible.
+   * May be janky without `getItemLayout` prop.
+   */
+  scrollToItem: (params: {
+    animated?: boolean | null;
+    item: any;
+    viewPosition?: number;
+  }) => void;
+
+  /**
+   * Scroll to a specific content pixel offset, like a normal `ScrollView`.
+   */
+  scrollToOffset: (params: {
+    animated?: boolean | null;
+    offset: number;
+  }) => void;
+
+  /**
+   * Tells the list an interaction has occured, which should trigger viewability calculations,
+   * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called
+   * by taps on items or by navigation actions.
+   */
+  recordInteraction: () => void;
+
+  /**
+   * Displays the scroll indicators momentarily.
+   */
+  flashScrollIndicators: () => void;
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder: () => ScrollResponderMixin | null | undefined;
+
+  /**
+   * Provides a reference to the underlying host component
+   */
+  getNativeScrollRef: () =>
+    | RefObject<View>
+    | RefObject<ScrollViewComponent>
+    | null
+    | undefined;
+
+  getScrollableNode: () => any;
+
+  // TODO: use `unknown` instead of `any` for Typescript >= 3.0
+  setNativeProps: (props: { [key: string]: any }) => void;
+}
+//#endregion
+
 //#region ScrollView
 export type BottomSheetScrollViewProps = Omit<
   Animated.AnimateProps<ScrollViewProps>,

src/constants.ts

@@ -32,6 +32,7 @@ enum SCROLLABLE_TYPE {
   SCROLLVIEW,
   SECTIONLIST,
   VIRTUALIZEDLIST,
+  FLASHLIST,
 }
 
 enum ANIMATION_STATE {

src/index.ts

@@ -24,6 +24,7 @@ export { useScrollableSetter } from './hooks/useScrollableSetter';
 export {
   BottomSheetScrollView,
   BottomSheetSectionList,
+  BottomSheetFlashList,
   BottomSheetFlatList,
   BottomSheetVirtualizedList,
 } from './components/bottomSheetScrollable';
@@ -55,6 +56,7 @@ export type { BottomSheetBackdropProps } from './components/bottomSheetBackdrop'
 export type { BottomSheetFooterProps } from './components/bottomSheetFooter';
 
 export type {
+  BottomSheetFlashListMethods,
   BottomSheetFlatListMethods,
   BottomSheetScrollViewMethods,
   BottomSheetSectionListMethods,

src/types.d.ts

@@ -15,6 +15,7 @@ import type {
   WithSpringConfig,
   WithTimingConfig,
 } from 'react-native-reanimated';
+import type { FlashList } from '@shopify/flash-list';
 import type { GESTURE_SOURCE } from './constants';
 
 //#region Methods
@@ -107,7 +108,7 @@ export interface BottomSheetVariables {
 }
 
 //#region scrollables
-export type Scrollable = FlatList | ScrollView | SectionList;
+export type Scrollable = FlashList | FlatList | ScrollView | SectionList;
 export type ScrollableRef = {
   id: number;
   node: React.RefObject<Scrollable>;
@@ -156,7 +157,7 @@ export type ScrollEventsHandlersHookType = (
   ref: React.RefObject<Scrollable>,
   contentOffsetY: SharedValue<number>,
   scrollBuffer: number | undefined,
-  preserveScrollMomentum: boolean | undefined,
+  preserveScrollMomentum: boolean | undefined
 ) => {
   handleOnScroll?: ScrollEventHandlerCallbackType;
   handleOnBeginDrag?: ScrollEventHandlerCallbackType;

yarn.lock

@@ -6381,7 +6381,7 @@ lodash.clonedeep@^4.5.0:
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
 lodash.escaperegexp@^4.1.2:
   version "4.1.2"