Export createBottomSheetScrollableComponent

Feature Request

Why it is needed

With the new FlashList from shopify, it would be great to be able to use it with BottomSheet. For that I propose to export createBottomSheetScrollableComponent, so a -BottomSheetFlashList- can be build

I have a really big FlatList inside a BottomSheet, that has infinitive scrolling. It would be great to get the performance boost from FlashList

Possible implementation

I guess it would be straight forward to export createBottomSheetScrollableComponent. Perhaps it should be mentioned in the docs, that the component needs to be memoized as well.

Code sample

const BottomSheetFlashListComponent = createBottomSheetScrollableComponent<
  BottomSheetFlatListMethods,
  BottomSheetFlatListProps<any>
>(SCROLLABLE_TYPE.FLATLIST, AnimatedFlashList);

const BottomSheetFlashList = memo(BottomSheetFlashListComponent);

[BalogunofAfrica]

Pending when the implementation is available publicly, you can pass BottomSheetScrollView to renderScrollComponent in your FlashList rendered in a BottomSheet. This prop is the same as the externalScrollView of RecyclerListView.

import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
...
...
...
<BottomSheet>
    ....
    <FlashList
        ...
        renderScrollComponent={BottomSheetScrollView}
        ...
        />
    ...
</BottomSheet>

[RichardLindhout]

This works for me

import * as React from 'react';
import { FlashList, FlashListProps } from '@shopify/flash-list';

import Animated from 'react-native-reanimated';
import {
  BottomSheetFlatList as BSF,
  createBottomSheetScrollableComponent,
  SCROLLABLE_TYPE,
} from '@gorhom/bottom-sheet';

const F2 = React.forwardRef((props: any, ref) => {
  return (
    <FlashList
      {...props}
      overrideProps={{
        ref,
      }}
    />
  );
});

const AnimatedFlashList = Animated.createAnimatedComponent<FlashListProps<any>>(
  F2 as any,
);

const BottomSheetFlatListComponent = createBottomSheetScrollableComponent(
  SCROLLABLE_TYPE.FLATLIST,
  AnimatedFlashList,
);

const BottomSheetFlatList = React.memo(BottomSheetFlatListComponent);
BottomSheetFlatList.displayName = 'BottomSheetFlatList';

export default BottomSheetFlatList as typeof BSF;