Simple API for using FlashList as Scrollview

list-renderer.tsx

import { FlashList, FlashListProps } from "@shopify/flash-list";
import React, { forwardRef, ReactElement } from "react";

type ListProps<T> = Omit<FlashListProps<T>, "children"> & { as?: "list" };
type ScrollViewProps<T> = Omit<
  FlashListProps<T>,
  "children" | "data" | "renderItem"
> & {
  as?: "scroll-view";
  children: React.ReactNode | React.ReactNode[];
};
export type ListRendererProps<T> = ListProps<T> | ScrollViewProps<T>;
export type ListRendererRefType<T> = FlashList<T>;

function ListComponent<T>(
  {
    as = "list",
    bounces = false,
    showsHorizontalScrollIndicator = false,
    showsVerticalScrollIndicator = false,
    ...rest
  }: ListRendererProps<T>,
  ref: React.Ref<ListRendererRefType<T>>,
) {
  if (as === "scroll-view") {
    const props = rest as ScrollViewProps<T>;
    return (
      <FlashList
        data={
          (Array.isArray(props.children)
            ? props.children
            : [props.children]) as T[]
        }
        renderItem={({ item }) => <>{item}</>}
        {...{
          bounces,
          ref,
          showsHorizontalScrollIndicator,
          showsVerticalScrollIndicator,
        }}
        {...props}
      />
    );
  }

  return (
    <FlashList
      {...{
        bounces,
        ref,
        showsHorizontalScrollIndicator,
        showsVerticalScrollIndicator,
      }}
      {...(rest as ListProps<T>)}
    />
  );
}

export const ListRenderer = forwardRef(ListComponent) as <T>(
  props: ListRendererProps<T> & { ref?: React.Ref<ListRendererRefType<T>> },
) => ReactElement;