edit swiper

src/Screens/Home/SwiperComponent.js

@@ -7,12 +7,10 @@ import {HEIGHTXD} from '../../Config/Functions';
 
 const styles = StyleSheet.create({
   container: {
+    marginBottom: 10,
     width: '100%',
-    height: HEIGHTXD(500),
+    height: HEIGHTXD(400),
     marginTop: 25,
-    marginBottom: 10,
-    borderTopWidth: 0.5,
-    borderBottomWidth: 0.5,
     borderBottomColor: R.colors.borderGray,
     borderTopColor: R.colors.borderGray,
     shadowColor: '#000',
@@ -24,7 +22,6 @@ const styles = StyleSheet.create({
     shadowRadius: 2.84,
     elevation: 2,
   },
-
   text: {
     color: '#fff',
     fontSize: 30,
@@ -35,24 +32,28 @@ const styles = StyleSheet.create({
 const SwiperComponent = (props) => {
   return (
     <View style={styles.container}>
-      <Swiper style={styles.wrapper} loop={true} autoplay={true}>
-        <View>
+      <Swiper
+        paginationStyle={{bottom: 5}}
+        style={styles.wrapper}
+        loop={true}
+        autoplay={true}>
+        <View style={{marginHorizontal: 20, borderRadius: 10}}>
           <Image
-            style={{height: HEIGHTXD(500), width: '100%'}}
+            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
             source={{uri: props.listImage[0].url}}
             resizeMode={'cover'}
           />
         </View>
-        <View>
+        <View style={{marginHorizontal: 20, borderRadius: 10}}>
           <Image
-            style={{height: HEIGHTXD(500), width: '100%'}}
+            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
             source={{uri: props.listImage[1].url}}
             resizeMode={'cover'}
           />
         </View>
-        <View>
+        <View style={{marginHorizontal: 20, borderRadius: 10}}>
           <Image
-            style={{height: HEIGHTXD(500), width: '100%'}}
+            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
             source={{uri: props.listImage[2].url}}
             resizeMode={'cover'}
           />