[Web] Disable virtualization for now

Scrolling is junky necolas/react-native-web#1337
devhubapp · May 4, 2019 · 52645c9 · 52645c9
1 parent 26ffec2
commit 52645c9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/packages/components/src/components/cards/EventCards.tsx b/packages/components/src/components/cards/EventCards.tsx
@@ -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 { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { Button } from '../common/Button'
 import { fabSize } from '../common/FAB'
@@ -332,6 +333,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
       bounces
       contentContainerStyle={contentContainerStyle}
       data={items}
+      disableVirtualization={Platform.OS === 'web'}
       extraData={rerender}
       initialNumToRender={15}
       keyExtractor={keyExtractor}
@@ -340,7 +342,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
       onViewableItemsChanged={handleViewableItemsChanged}
       pointerEvents={pointerEvents}
       refreshControl={refreshControl}
-      removeClippedSubviews
+      removeClippedSubviews={Platform.OS !== 'web'}
       renderItem={renderItem}
       viewabilityConfig={viewabilityConfig}
       windowSize={2}

diff --git a/packages/components/src/components/cards/IssueOrPullRequestCards.tsx b/packages/components/src/components/cards/IssueOrPullRequestCards.tsx
@@ -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 { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { Button } from '../common/Button'
 import { fabSize } from '../common/FAB'
@@ -348,6 +349,7 @@ export const IssueOrPullRequestCards = React.memo(
         bounces
         contentContainerStyle={contentContainerStyle}
         data={items}
+        disableVirtualization={Platform.OS === 'web'}
         extraData={rerender}
         initialNumToRender={15}
         keyExtractor={keyExtractor}
@@ -356,7 +358,7 @@ export const IssueOrPullRequestCards = React.memo(
         onViewableItemsChanged={handleViewableItemsChanged}
         pointerEvents={pointerEvents}
         refreshControl={refreshControl}
-        removeClippedSubviews
+        removeClippedSubviews={Platform.OS !== 'web'}
         renderItem={renderItem}
         viewabilityConfig={viewabilityConfig}
         windowSize={2}

diff --git a/packages/components/src/components/cards/NotificationCards.tsx b/packages/components/src/components/cards/NotificationCards.tsx
@@ -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 { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { Button } from '../common/Button'
 import { fabSize } from '../common/FAB'
@@ -334,6 +335,7 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
       bounces
       contentContainerStyle={contentContainerStyle}
       data={items}
+      disableVirtualization={Platform.OS === 'web'}
       extraData={rerender}
       initialNumToRender={15}
       keyExtractor={keyExtractor}
@@ -342,7 +344,7 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
       onViewableItemsChanged={handleViewableItemsChanged}
       pointerEvents={pointerEvents}
       refreshControl={refreshControl}
-      removeClippedSubviews
+      removeClippedSubviews={Platform.OS !== 'web'}
       renderItem={renderItem}
       viewabilityConfig={viewabilityConfig}
       windowSize={2}

diff --git a/packages/components/src/components/columns/Columns.tsx b/packages/components/src/components/columns/Columns.tsx
@@ -13,6 +13,7 @@ import { ColumnContainer } from '../../containers/ColumnContainer'
 import { useEmitter } from '../../hooks/use-emitter'
 import { useReduxState } from '../../hooks/use-redux-state'
 import { bugsnag } from '../../libs/bugsnag'
+import { Platform } from '../../libs/platform'
 import * as selectors from '../../redux/selectors'
 import { separatorThickSize } from '../common/Separator'
 import { useFocusedColumn } from '../context/ColumnFocusContext'
@@ -187,6 +188,7 @@ export const Columns = React.memo((props: ColumnsProps) => {
       className="pagingEnabledFix"
       bounces={!swipeable}
       data={columnIds}
+      disableVirtualization={Platform.OS === 'web'}
       getItemLayout={getItemLayout}
       horizontal
       initialNumToRender={4}
@@ -196,7 +198,7 @@ export const Columns = React.memo((props: ColumnsProps) => {
       // onViewableItemsChanged={onViewableItemsChanged}
       pagingEnabled={pagingEnabled}
       pointerEvents={pointerEvents}
-      removeClippedSubviews
+      removeClippedSubviews={Platform.OS !== 'web'}
       scrollEnabled={!swipeable}
       windowSize={2}
       {...otherProps}