fix: problematic android infinite scroll grids

artsy · Jul 19, 2023 · f76ec4c · f76ec4c
1 parent 786e380
commit f76ec4c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/src/app/Components/Gene/GeneArtworks.tsx b/src/app/Components/Gene/GeneArtworks.tsx
@@ -6,6 +6,7 @@ import { useArtworkFilters } from "app/Components/ArtworkFilter/useArtworkFilter
 import { FilteredArtworkGridZeroState } from "app/Components/ArtworkGrids/FilteredArtworkGridZeroState"
 import { InfiniteScrollArtworksGridContainer as InfiniteScrollArtworksGrid } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
 import { GeneArtworksFilterHeader } from "app/Components/Gene/GeneArtworksFilterHeader"
+import { TabsFlatList } from "app/Components/TabsFlatlist"
 
 import { Schema } from "app/utils/track"
 import React, { useRef, useState } from "react"
@@ -86,7 +87,7 @@ const GeneArtworksContainer: React.FC<GeneArtworksContainerProps> = (props) => {
 
   return (
     <ArtworkFiltersStoreProvider>
-      <Tabs.ScrollView disableScrollViewPanResponder>
+      <TabsFlatList keyboardShouldPersistTaps="handled" disableScrollViewPanResponder>
         <Tabs.SubTabBar>
           <GeneArtworksFilterHeader openFilterArtworksModal={openFilterArtworksModal} />
         </Tabs.SubTabBar>
@@ -100,7 +101,7 @@ const GeneArtworksContainer: React.FC<GeneArtworksContainerProps> = (props) => {
           closeModal={closeFilterArtworksModal}
           mode={FilterModalMode.Gene}
         />
-      </Tabs.ScrollView>
+      </TabsFlatList>
     </ArtworkFiltersStoreProvider>
   )
 }

diff --git a/src/app/Components/TabsFlatlist.tsx b/src/app/Components/TabsFlatlist.tsx
@@ -12,9 +12,9 @@ export interface TabsFlatListProps
 }
 
 /**
- * @deprecated
  * This component was introduced to solve https://artsyproduct.atlassian.net/browse/DIA-63 issue and only this.
- * Please do not use it for any other purpose.
+ * Please do not use it for any other purpose. It will be removed once we have a better solution.
+ * Used **only** for sticky surfaces that include the infiniteScrollArtworkGrid
  */
 export const TabsFlatList: React.FC<Omit<TabsFlatListProps, "data">> = ({
   children,

diff --git a/src/app/Scenes/MyCollection/MyCollection.tsx b/src/app/Scenes/MyCollection/MyCollection.tsx
@@ -10,6 +10,7 @@ import { ArtworkFiltersStoreProvider } from "app/Components/ArtworkFilter/Artwor
 import { useSelectedFiltersCount } from "app/Components/ArtworkFilter/useArtworkFilters"
 import { PlaceholderGrid } from "app/Components/ArtworkGrids/GenericGrid"
 import { LoadFailureView } from "app/Components/LoadFailureView"
+import { TabsFlatList } from "app/Components/TabsFlatlist"
 import { useToast } from "app/Components/Toast/toastHook"
 import { PAGE_SIZE } from "app/Components/constants"
 import { MyCollectionArtworksKeywordStore } from "app/Scenes/MyCollection/Components/MyCollectionArtworksKeywordStore"
@@ -171,7 +172,7 @@ const MyCollection: React.FC<{
   }
 
   return (
-    <Tabs.ScrollView
+    <TabsFlatList
       contentContainerStyle={{ justifyContent: "flex-start", paddingHorizontal: 0 }}
       refreshControl={<RefreshControl onRefresh={refetch} refreshing={isRefreshing} />}
       keyboardDismissMode="on-drag"
@@ -214,7 +215,7 @@ const MyCollection: React.FC<{
           Add Random Work
         </Button>
       )}
-    </Tabs.ScrollView>
+    </TabsFlatList>
   )
 }
 

diff --git a/src/app/Scenes/Partner/Components/PartnerArtwork.tsx b/src/app/Scenes/Partner/Components/PartnerArtwork.tsx
@@ -1,4 +1,4 @@
-import { Spacer, Tabs } from "@artsy/palette-mobile"
+import { Spacer } from "@artsy/palette-mobile"
 import { PartnerArtwork_partner$data } from "__generated__/PartnerArtwork_partner.graphql"
 import {
   AnimatedArtworkFilterButton,
@@ -8,6 +8,7 @@ import {
 import { useArtworkFilters } from "app/Components/ArtworkFilter/useArtworkFilters"
 import { InfiniteScrollArtworksGridContainer as InfiniteScrollArtworksGrid } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
 import { TabEmptyState } from "app/Components/TabEmptyState"
+import { TabsFlatList } from "app/Components/TabsFlatlist"
 
 import { get } from "app/utils/get"
 import React, { useState } from "react"
@@ -33,7 +34,7 @@ export const PartnerArtwork: React.FC<{
 
   return (
     <>
-      <Tabs.ScrollView>
+      <TabsFlatList>
         <Spacer y={2} />
 
         {artworksCount > 0 ? (
@@ -45,7 +46,7 @@ export const PartnerArtwork: React.FC<{
         ) : (
           <TabEmptyState text={emptyText} />
         )}
-      </Tabs.ScrollView>
+      </TabsFlatList>
 
       <AnimatedArtworkFilterButton
         isVisible

diff --git a/src/app/Scenes/Tag/TagArtworks.tsx b/src/app/Scenes/Tag/TagArtworks.tsx
@@ -6,6 +6,7 @@ import { ArtworkFiltersStoreProvider } from "app/Components/ArtworkFilter/Artwor
 import { useArtworkFilters } from "app/Components/ArtworkFilter/useArtworkFilters"
 import { FilteredArtworkGridZeroState } from "app/Components/ArtworkGrids/FilteredArtworkGridZeroState"
 import { InfiniteScrollArtworksGridContainer } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
+import { TabsFlatList } from "app/Components/TabsFlatlist"
 import { TagArtworksFilterHeader } from "app/Scenes/Tag/TagArtworksFilterHeader"
 import { Schema } from "app/utils/track"
 import React, { useRef, useState } from "react"
@@ -90,7 +91,7 @@ const TagArtworksContainer: React.FC<TagArtworksContainerProps> = (props) => {
 
   return (
     <ArtworkFiltersStoreProvider>
-      <Tabs.ScrollView keyboardShouldPersistTaps="handled">
+      <TabsFlatList keyboardShouldPersistTaps="handled">
         <TagArtworks {...props} openFilterModal={openFilterArtworksModal} />
         <ArtworkFilterNavigator
           {...props}
@@ -101,7 +102,7 @@ const TagArtworksContainer: React.FC<TagArtworksContainerProps> = (props) => {
           closeModal={closeFilterArtworksModal}
           mode={FilterModalMode.Tag}
         />
-      </Tabs.ScrollView>
+      </TabsFlatList>
     </ArtworkFiltersStoreProvider>
   )
 }