Prepare FlatList component to be replaced

Maybe use react-window on web?

packages/components/src/components/cards/EventCards.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react'
-import { FlatList, FlatListProps, View } from 'react-native'
+import { View } from 'react-native'
 
 import {
   Column,
@@ -15,6 +15,7 @@ import useKeyPressCallback from '../../hooks/use-key-press-callback'
 import { useKeyboardScrolling } from '../../hooks/use-keyboard-scrolling'
 import { useReduxAction } from '../../hooks/use-redux-action'
 import { bugsnag, ErrorBoundary } from '../../libs/bugsnag'
+import { FlatList, FlatListProps } from '../../libs/flatlist'
 import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { Button } from '../common/Button'

packages/components/src/components/cards/IssueOrPullRequestCards.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react'
-import { FlatList, FlatListProps, View } from 'react-native'
+import { View } from 'react-native'
 
 import {
   Column,
@@ -16,6 +16,7 @@ import useKeyPressCallback from '../../hooks/use-key-press-callback'
 import { useKeyboardScrolling } from '../../hooks/use-keyboard-scrolling'
 import { useReduxAction } from '../../hooks/use-redux-action'
 import { bugsnag, ErrorBoundary } from '../../libs/bugsnag'
+import { FlatList, FlatListProps } from '../../libs/flatlist'
 import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { Button } from '../common/Button'

packages/components/src/components/cards/NotificationCards.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react'
-import { FlatList, FlatListProps, View } from 'react-native'
+import { View } from 'react-native'
 
 import {
   Column,
@@ -15,6 +15,7 @@ import useKeyPressCallback from '../../hooks/use-key-press-callback'
 import { useKeyboardScrolling } from '../../hooks/use-keyboard-scrolling'
 import { useReduxAction } from '../../hooks/use-redux-action'
 import { bugsnag, ErrorBoundary } from '../../libs/bugsnag'
+import { FlatList, FlatListProps } from '../../libs/flatlist'
 import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { Button } from '../common/Button'

packages/components/src/components/columns/Columns.tsx

@@ -1,18 +1,13 @@
 import _ from 'lodash'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import {
-  FlatList,
-  FlatListProps,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native'
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
 
 import { constants, Omit } from '@devhub/core'
 import { ColumnContainer } from '../../containers/ColumnContainer'
 import { useEmitter } from '../../hooks/use-emitter'
 import { useReduxState } from '../../hooks/use-redux-state'
 import { bugsnag } from '../../libs/bugsnag'
+import { FlatList, FlatListProps } from '../../libs/flatlist'
 import { Platform } from '../../libs/platform'
 import * as selectors from '../../redux/selectors'
 import { separatorThickSize } from '../common/Separator'

packages/components/src/components/common/FlatListWithOverlay.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { FlatList, FlatListProps } from 'react-native'
 
+import { FlatList, FlatListProps } from '../../libs/flatlist'
 import {
   ScrollViewWithOverlay,
   ScrollViewWithOverlayProps,

packages/components/src/components/common/ScrollViewWithOverlay.tsx

@@ -1,6 +1,5 @@
 import React, { Ref, useEffect, useRef } from 'react'
 import {
-  FlatList,
   ScrollView,
   ScrollViewProps,
   StyleSheet,
@@ -8,6 +7,7 @@ import {
   ViewProps,
 } from 'react-native'
 
+import { FlatList } from '../../libs/flatlist'
 import { contentPadding } from '../../styles/variables'
 import {
   AnimatedTransparentTextOverlay,

packages/components/src/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef } from 'react'
-import { FlatList, Image, StyleSheet, View, ViewStyle } from 'react-native'
+import { Image, StyleSheet, View, ViewStyle } from 'react-native'
 
 import { getGitHubURLForUser, ModalPayload } from '@devhub/core'
 import { useAppViewMode } from '../../hooks/use-app-view-mode'
@@ -8,6 +8,7 @@ import { useReduxAction } from '../../hooks/use-redux-action'
 import { useReduxState } from '../../hooks/use-redux-state'
 import { bugsnag } from '../../libs/bugsnag'
 import { emitter } from '../../libs/emitter'
+import { FlatList } from '../../libs/flatlist'
 import * as actions from '../../redux/actions'
 import * as selectors from '../../redux/selectors'
 import { sharedStyles } from '../../styles/shared'

packages/components/src/containers/ColumnContainer.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { FlatListProps } from 'react-native'
 
 import { EventColumn } from '../components/columns/EventColumn'
 import { IssueOrPullRequestColumn } from '../components/columns/IssueOrPullRequestColumn'
 import { NotificationColumn } from '../components/columns/NotificationColumn'
 import { useColumn } from '../hooks/use-column'
 import { bugsnag } from '../libs/bugsnag'
+import { FlatListProps } from '../libs/flatlist'
 
 export interface ColumnContainerProps {
   columnId: string

packages/components/src/hooks/use-keyboard-scrolling.ts

@@ -1,6 +1,6 @@
 import { RefObject, useCallback, useEffect, useRef } from 'react'
-import { FlatList } from 'react-native'
 
+import { FlatList } from '../libs/flatlist'
 import { useEmitter } from './use-emitter'
 import { useForceRerender } from './use-force-rerender'
 import useKeyPressCallback from './use-key-press-callback'

packages/components/src/libs/flatlist/index.tsx

@@ -0,0 +1 @@
+export { FlatList, FlatListProps } from 'react-native'