From 58cc52ed18335074de244d46dab5e70f91916167 Mon Sep 17 00:00:00 2001
From: Burhan YILMAZ <burhan.yilmaaz@gmail.com>
Date: Tue, 23 Jan 2024 15:17:01 +0300
Subject: [PATCH] fix: home slider height and width

---
 src/components/HomeSlider/SliderItem.tsx | 48 +++++++++++++-----------
 src/components/HomeSlider/index.tsx      |  2 +-
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/HomeSlider/SliderItem.tsx b/src/components/HomeSlider/SliderItem.tsx
index 06d22f7..3aeadb2 100644
--- 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
index e2b2ed0..aba0db9 100644
--- 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