fix: home slider height and width

burhanyilmaz · Jan 23, 2024 · 58cc52e · 58cc52e
1 parent 1389ef8
commit 58cc52e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/src/components/HomeSlider/SliderItem.tsx b/src/components/HomeSlider/SliderItem.tsx
@@ -1,5 +1,5 @@
 import { text } from '@theme/text';
-import { ImageBackground, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { SLIDER_ITEM_HEIGHT, SLIDER_ITEM_WIDTH } from '.';
 
@@ -12,30 +12,36 @@ type Props = {
 
 const SliderItem = ({ image, categoryName, title, onPress }: Props) => (
   <Pressable className="bg-white mb-4 pl-4" style={styles.sliderItemContainer} onPress={onPress}>
-    <View className="bg-zinc-100 mt-4 overflow-hidden rounded-lg  self-center">
-      <ImageBackground
+    <View
+      className="bg-zinc-100 overflow-hidden rounded-lg justify-end"
+      style={{ height: SLIDER_ITEM_HEIGHT }}>
+      <Image
         source={{ uri: image }}
-        className="rounded-lg justify-end overflow-hidden"
-        style={styles.sliderImageBg}>
-        <View className="rounded-lg absolute z-0 bg-black-o-40" style={styles.sliderImageBg} />
-        <View className="px-4 mb-4">
-          <View className="bg-zinc-50 rounded-full px-2 self-start  mb-3">
-            <Text
-              numberOfLines={1}
-              className={text({
-                type: 'subtitle1',
-                class: 'text-zinc-800 my-1 min-w-[50px] text-center',
-              })}>
-              {categoryName}
-            </Text>
-          </View>
+        resizeMode="cover"
+        style={{ width: SLIDER_ITEM_WIDTH }}
+        className="rounded-lg justify-end  absolute z-0 h-full"
+      />
+      <View
+        className="rounded-lg absolute z-10 bg-black-o-40 h-full "
+        style={{ width: SLIDER_ITEM_WIDTH }}
+      />
+      <View className="px-4 mb-4 z-20" style={{ width: SLIDER_ITEM_WIDTH - 16 }}>
+        <View className="bg-zinc-50 rounded-full px-2 self-start  mb-3">
           <Text
-            numberOfLines={2}
-            className={text({ type: 'title4', class: 'text-zinc-50 min-h-[36px]' })}>
-            {title}
+            numberOfLines={1}
+            className={text({
+              type: 'subtitle1',
+              class: 'text-zinc-800 my-1 min-w-[50px] text-center',
+            })}>
+            {categoryName}
           </Text>
         </View>
-      </ImageBackground>
+        <Text
+          numberOfLines={2}
+          className={text({ type: 'title4', class: 'text-zinc-50 min-h-[36px]' })}>
+          {title}
+        </Text>
+      </View>
     </View>
   </Pressable>
 );

diff --git a/src/components/HomeSlider/index.tsx b/src/components/HomeSlider/index.tsx
@@ -46,7 +46,7 @@ const HomeSlider = ({ posts, onPressPost }: Props) => {
   );
 
   return (
-    <View>
+    <View className="mt-4">
       <FlatList
         horizontal
         pagingEnabled