Add FlashList to optional dependencies (#2454)

Author: ethanshar

src/incubator/Calendar/Agenda.tsx

@@ -1,17 +1,20 @@
 import React, {useContext, useCallback, useRef} from 'react';
 import {runOnJS, useAnimatedReaction, useSharedValue} from 'react-native-reanimated';
-import {FlashList, ViewToken} from '@shopify/flash-list';
+import {FlashListPackage} from 'optionalDeps';
+import type {FlashList as FlashListType, ViewToken} from '@shopify/flash-list';
 import {BorderRadiuses} from 'style';
 import View from '../../components/view';
 import Text from '../../components/text';
 import {isSameDay, isSameMonth} from './helpers/DateUtils';
 import {InternalEvent, Event, DateSectionHeader, UpdateSource} from './types';
 import CalendarContext from './CalendarContext';
 
+const {FlashList} = FlashListPackage;
+
 // TODO: Fix initial scrolling
 function Agenda() {
   const {data, selectedDate, setDate, updateSource} = useContext(CalendarContext);
-  const flashList = useRef<FlashList<InternalEvent>>(null);
+  const flashList = useRef<FlashListType<InternalEvent>>(null);
   const closestSectionHeader = useSharedValue<DateSectionHeader | null>(null);
   const scrolledByUser = useSharedValue<boolean>(false);
 

src/incubator/Calendar/index.tsx

@@ -1,7 +1,7 @@
 import findIndex from 'lodash/findIndex';
 import React, {PropsWithChildren, useCallback, useMemo, useRef, useEffect} from 'react';
 import {useSharedValue, useAnimatedReaction, runOnJS} from 'react-native-reanimated';
-import {FlashList} from '@shopify/flash-list';
+import {FlashListPackage} from 'optionalDeps';
 import {Constants} from '../../commons/new';
 import {generateMonthItems} from './helpers/CalendarProcessor';
 import {addHeaders} from './helpers/DataProcessor';
@@ -13,6 +13,8 @@ import Agenda from './Agenda';
 import TodayButton from './TodayButton';
 import Header from './Header';
 
+const {FlashList} = FlashListPackage;
+
 // TODO: Move this logic elsewhere to pre-generate on install?
 const MONTH_ITEMS = generateMonthItems(2);
 const getIndex = (date: number) => {
@@ -105,7 +107,6 @@ function Calendar(props: PropsWithChildren<CalendarProps>) {
     <CalendarContext.Provider value={contextValue}>
       {staticHeader && <Header/>}
       <FlashList
-        // @ts-expect-error
         ref={flashListRef}
         estimatedItemSize={calendarWidth}
         data={MONTH_ITEMS}

src/optionalDependencies/FlashListPackage.ts

@@ -0,0 +1,6 @@
+let FlashListPackage: any;
+try {
+  FlashListPackage = require('@shopify/flash-list');
+} catch (error) {}
+
+export default FlashListPackage;

src/optionalDependencies/index.ts

@@ -1,4 +1,5 @@
 export {default as DateTimePickerPackage} from './DateTimePickerPackage';
+export {default as FlashListPackage} from './FlashListPackage';
 export {default as BlurViewPackage} from './BlurViewPackage';
 export {default as NetInfoPackage} from './NetInfoPackage';
 export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';