Merge pull request #1 from yujune/fix/20230416-june-fix-android-issues

fix: Fix android issues.
yujune · Apr 16, 2023 · 7544c64 · 7544c64
2 parents 08573d7 + fc58895
commit 7544c64
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -177,6 +177,8 @@ dependencies {
 
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
 
+    implementation 'com.facebook.fresco:animated-gif:2.6.0'
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'

diff --git a/src/components/StatsListItem/StatsListItem.style.ts b/src/components/StatsListItem/StatsListItem.style.ts
@@ -5,6 +5,7 @@ export const style = StyleSheet.create({
   container: {
     flexDirection: 'row',
     marginVertical: AppSpacing.small,
+    alignItems: 'center',
   },
   name: {
     flex: 1.5,
@@ -14,5 +15,6 @@ export const style = StyleSheet.create({
   },
   progressBar: {
     flex: 2,
+    height: 15,
   },
 });
diff --git a/src/components/StatsListItem/StatsListItem.tsx b/src/components/StatsListItem/StatsListItem.tsx
@@ -10,10 +10,12 @@ export const StatsListItem: FC<Props> = ({stat}) => {
   const {theme} = useCustomTheme();
   return (
     <View style={style.container}>
-      <Text numberOfLines={1} style={style.name}>
+      <Text numberOfLines={1} style={[theme.text?.bodyMedium, style.name]}>
         {stat?.stat.name}
       </Text>
-      <Text style={style.stat}>{stat?.base_stat}</Text>
+      <Text style={[theme.text?.bodyMedium, style.stat]}>
+        {stat?.base_stat}
+      </Text>
       {/* TODO: animation not working */}
       <Bar
         style={style.progressBar}

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>
         )}
       />