resized images

App/Assets/Api/furniture.ts

@@ -99,6 +99,15 @@ export const furnitures: Furniture[] = [
     price: 1499,
     images: [require('../Images/013.png')],
   },
+  {
+    type: 'Sofa',
+    rating: 3,
+    id: '026',
+    name: 'Chesterfield Sofa',
+    desc: 'Chesterfield Sofa in Warm Chestnut Finish',
+    price: 1359,
+    images: [require('../Images/029.png')],
+  },
   {
     type: 'Bed',
     rating: 3.3,

App/Components/Carousel/Carousel.tsx

@@ -0,0 +1,96 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  useWindowDimensions,
+  StyleSheet,
+  Dimensions,
+  FlatList,
+  Animated,
+} from 'react-native';
+import CarouselItem from './CarouselItem';
+
+const {width} = Dimensions.get('window');
+
+type CarouselProps = {
+  images: Array<any>;
+};
+const Carousel = ({images}: CarouselProps) => {
+  const scrollX = useRef(new Animated.Value(0)).current;
+  let position = Animated.divide(scrollX, width);
+  const flatList = useRef(null);
+  const deviceHeight = useWindowDimensions().height;
+  if (images) {
+    return (
+      <View
+        style={{
+          height: deviceHeight * 0.4,
+          justifyContent: 'center',
+          backgroundColor: 'white',
+          alignItems: 'center',
+          marginHorizontal: 20,
+          padding: 10,
+          borderRadius: 8,
+        }}>
+        <FlatList
+          bouncesZoom
+          data={images}
+          ref={flatList}
+          keyExtractor={(item, index) => 'key' + index}
+          horizontal
+          pagingEnabled
+          scrollEnabled
+          snapToAlignment="center"
+          scrollEventThrottle={16}
+          decelerationRate={'fast'}
+          showsHorizontalScrollIndicator={false}
+          renderItem={({item}) => {
+            return <CarouselItem image={item} />;
+          }}
+          onScroll={Animated.event(
+            [
+              {
+                nativeEvent: {contentOffset: {x: scrollX}},
+              },
+            ],
+            {useNativeDriver: false},
+          )}
+        />
+
+        <View style={styles.dotView}>
+          {images.map((_, i) => {
+            let opacity = position.interpolate({
+              inputRange: [i - 1, i, i + 1],
+              outputRange: [0.2, 1, 0.2],
+              extrapolate: 'clamp',
+            });
+            return (
+              <Animated.View
+                key={i}
+                style={{
+                  opacity,
+                  height: 10,
+                  width: 10,
+                  backgroundColor: 'gray',
+                  margin: 8,
+                  borderRadius: 5,
+                }}
+              />
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  dotView: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: 15,
+  },
+});
+
+export default Carousel;

App/Components/Carousel/CarouselItem.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  Image,
+  Dimensions,
+  ImageBackground,
+} from 'react-native';
+
+const {width, height} = Dimensions.get('window');
+
+type CarouselItemProps = {
+  image: any;
+};
+const CarouselItem = ({image}: CarouselItemProps) => {
+  return (
+    <View
+      style={{
+        width: width - 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Image
+        resizeMethod={'resize'}
+        resizeMode="stretch"
+        style={{
+          width: width - 100,
+          height: height * 0.28,
+        }}
+        source={image}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default CarouselItem;

App/Components/SegmentFurnitureItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {
   StyleSheet,
   Text,
@@ -10,13 +10,16 @@ import {
 import {Furniture} from '../Assets/Api/furniture';
 import {colors} from '../Theme/index';
 import {Rating, AirbnbRating} from 'react-native-ratings';
+import Modal from 'react-native-modal';
+import Carousel from './Carousel/Carousel';
 
 type SegmentFurnitureItemProps = {
   item: Furniture;
   index: number;
 };
 const SegmentFurnitureItem = ({item, index}: SegmentFurnitureItemProps) => {
   const {width, height} = useWindowDimensions();
+  const [showModal, setModal] = useState(false);
   return (
     <View
       style={[
@@ -92,7 +95,8 @@ const SegmentFurnitureItem = ({item, index}: SegmentFurnitureItemProps) => {
             </TouchableOpacity>
           </View>
         </View>
-        <View
+        <TouchableOpacity
+          onPress={() => setModal(true)}
           style={[
             {
               width: width * 0.6 - 20,
@@ -103,15 +107,29 @@ const SegmentFurnitureItem = ({item, index}: SegmentFurnitureItemProps) => {
             },
           ]}>
           <Image
-            resizeMode={'contain'}
+            resizeMethod={'scale'}
+            resizeMode={'stretch'}
             style={{
               width: width * 0.5,
               height: height * 0.2,
             }}
             source={item.images[0]}
           />
-        </View>
+        </TouchableOpacity>
       </TouchableOpacity>
+      <Modal
+        onBackdropPress={() => {
+          setModal(false);
+        }}
+        onBackButtonPress={() => {
+          setModal(false);
+        }}
+        useNativeDriver={true}
+        animationIn={'zoomIn'}
+        animationOut={'zoomOut'}
+        isVisible={showModal}>
+        <Carousel images={item.images} />
+      </Modal>
     </View>
   );
 };

App/Pages/Home/HomePage.tsx

@@ -7,7 +7,9 @@ import {
   Text,
   StatusBar,
   Animated,
-  useWindowDimensions,
+  Dimensions,
+  FlatList,
+  ActivityIndicator,
 } from 'react-native';
 import {colors} from '../../Theme/index';
 import HomeHeader from '../../Components/HomeHeader';
@@ -21,10 +23,10 @@ import {
 import ExploreItem from '../../Components/ExploreItem';
 import SegmentButton from '../../Components/SegmentButton';
 import SegmentFurnitureItem from '../../Components/SegmentFurnitureItem';
+const {width, height} = Dimensions.get('window');
+const PADDING_TOP = width / 2.2 + 70;
 
 const HomePage = () => {
-  const {width, height} = useWindowDimensions();
-  const PADDING_TOP = width / 2.2 + 70;
   const exploreItems = exploreFurniture();
   console.log('exploreItems', exploreItems);
   const scrollY = useRef(new Animated.Value(0)).current;
@@ -90,10 +92,11 @@ const HomePage = () => {
             ))}
           </ScrollView>
         </View>
-        <ScrollView
+        <FlatList
           contentInsetAdjustmentBehavior="automatic"
           showsVerticalScrollIndicator={false}
           scrollEventThrottle={16}
+          data={segmentFurnitures}
           onScroll={Animated.event(
             [
               {
@@ -106,15 +109,23 @@ const HomePage = () => {
             ],
             {useNativeDriver: false},
           )}
-          style={styles.scrollView}>
-          {segmentFurnitures.map((furniture: Furniture, index: number) => (
-            <SegmentFurnitureItem
-              item={furniture}
-              key={furniture.id}
-              index={index + 1}
-            />
-          ))}
-        </ScrollView>
+          style={styles.scrollView}
+          keyExtractor={(item: Furniture) => item.id}
+          renderItem={({item, index}) => (
+            <SegmentFurnitureItem item={item} index={index + 1} />
+          )}
+          ListEmptyComponent={() => (
+            <View
+              style={{
+                flex: 1,
+                justifyContent: 'center',
+                height: 200,
+                alignItems: 'center',
+              }}>
+              <ActivityIndicator color={colors.button} />
+            </View>
+          )}
+        />
       </View>
     </>
   );
@@ -125,6 +136,7 @@ export default HomePage;
 const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
+    height: height,
   },
   safeAreaView: {
     flex: 1,