chore: Remove horizontal flatlist scroll in gallery.

This is because TabbedHeaderPager has swipe gesture which cause horizontal flatlist scroll not working in android.
yujune · Apr 16, 2023 · fc58895 · fc58895
1 parent 63efca6
commit fc58895
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/screens/gallery/GalleryScreen.style.ts b/src/screens/gallery/GalleryScreen.style.ts
@@ -1,5 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {AppSpacing} from '../../themes/theme';
+import {windowWidth} from '../../utils/constants';
 
 export const style = StyleSheet.create({
   flatList: {
@@ -9,4 +10,11 @@ export const style = StyleSheet.create({
     marginVertical: AppSpacing.small,
     fontWeight: 'bold',
   },
+  imageListContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  imageContainer: {
+    width: windowWidth / 3.4,
+  },
 });
diff --git a/src/screens/gallery/GalleryScreen.tsx b/src/screens/gallery/GalleryScreen.tsx
@@ -39,14 +39,16 @@ export const GalleryScreen: FC = () => {
             <Text style={[theme.text?.bodyMedium, style.categoryTitle]}>
               {item.name}
             </Text>
-            <FlatList
-              horizontal
-              data={item.data}
-              keyExtractor={(_, index) => index.toString()}
-              renderItem={({item: pokemon}) => (
-                <PokemonListItem name={pokemon.name} customUrl={pokemon.url} />
-              )}
-            />
+            <View style={style.imageListContainer}>
+              {item.data.map((pokemon, index) => (
+                <PokemonListItem
+                  containerStyle={style.imageContainer}
+                  key={pokemon.name + index.toString()}
+                  name={pokemon.name}
+                  customUrl={pokemon.url}
+                />
+              ))}
+            </View>
           </View>
         )}
       />