feature: creating the feature that allows user to zoom images on plac…

package.json

@@ -13,6 +13,7 @@
     "react-native": "0.59.5",
     "react-native-fast-image": "^6.0.0",
     "react-native-gesture-handler": "^1.2.1",
+    "react-native-image-zoom-viewer": "^2.2.25",
     "react-native-maps": "^0.24.2",
     "react-native-maps-directions": "^1.6.0",
     "react-native-vector-icons": "^6.4.2",

src/components/common/place-detail/components/sections/images-list/ImagesList.js

@@ -1,38 +1,86 @@
 // @flow
 
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import { FlatList } from 'react-native';
+import ImageViewer from 'react-native-image-zoom-viewer';
+
 import styled from 'styled-components';
 
+import ImagesListWithZoom from './ImagesListWithZoom';
 import PlaceImagesListItem from './ImagesListItem';
 
 const ImagesList = styled(FlatList)`
-  flex: 1;
   width: 100%;
   height: ${({ theme }) => theme.metrics.getWidthFromDP('50%')}px;
   margin-top: ${({ theme }) => theme.metrics.extraLargeSize}px;
   margin-bottom: ${({ theme }) => 1.5 * theme.metrics.extraLargeSize}px;
 `;
 
 const IMAGES = [
-  'https://s3-sa-east-1.amazonaws.com/bon-appetit-resources/restaurants/medium/coco-bambu-sul.jpeg',
-  'https://s3-sa-east-1.amazonaws.com/bon-appetit-resources/restaurants/medium/misaki.jpeg',
-  'https://s3-sa-east-1.amazonaws.com/bon-appetit-resources/restaurants/medium/cabana-riomar.jpeg',
+  {
+    url:
+      'https://s3-sa-east-1.amazonaws.com/bon-appetit-resources/restaurants/medium/coco-bambu-sul.jpeg',
+  },
+  {
+    url:
+      'https://s3-sa-east-1.amazonaws.com/bon-appetit-resources/restaurants/medium/misaki.jpeg',
+  },
+  {
+    url:
+      'https://s3-sa-east-1.amazonaws.com/bon-appetit-resources/restaurants/medium/cabana-riomar.jpeg',
+  },
 ];
 
-const PlaceImagesList = (): Object => (
-  <ImagesList
-    keyExtractor={imageURL => imageURL}
-    showsHorizontalScrollIndicator={false}
-    data={IMAGES}
-    horizontal
-    renderItem={({ item, index }) => (
-      <PlaceImagesListItem
-        isFirst={index === 0}
-        imageURL={item}
-      />
-    )}
-  />
-);
+class PlaceImagesList extends Component {
+  state = {
+    isModalImagesOpen: false,
+    indexImageSelected: 0,
+  };
+
+  onToggleModalImages = (): void => {
+    const { isModalImagesOpen } = this.state;
+
+    this.setState({
+      isModalImagesOpen: !isModalImagesOpen,
+    });
+  };
+
+  onPressImage = (indexImageSelected: number): void => {
+    this.setState({
+      isModalImagesOpen: true,
+      indexImageSelected,
+    });
+  };
+
+  render() {
+    const { indexImageSelected, isModalImagesOpen } = this.state;
+
+    return (
+      <Fragment>
+        <ImagesList
+          showsHorizontalScrollIndicator={false}
+          keyExtractor={item => item.url}
+          data={IMAGES}
+          horizontal
+          renderItem={({ item, index }) => (
+            <PlaceImagesListItem
+              onPressImage={() => this.onPressImage(index)}
+              isFirst={index === 0}
+              imageURL={item.url}
+            />
+          )}
+        />
+        {isModalImagesOpen && (
+          <ImagesListWithZoom
+            onToggleModalImages={this.onToggleModalImages}
+            indexImageSelected={indexImageSelected}
+            isModalImagesOpen={isModalImagesOpen}
+            images={IMAGES}
+          />
+        )}
+      </Fragment>
+    );
+  }
+}
 
 export default PlaceImagesList;

src/components/common/place-detail/components/sections/images-list/ImagesListItem.js

@@ -1,29 +1,44 @@
 // @flow
 
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styled from 'styled-components';
 
-const PlaceImage = styled(FastImage).attrs(({ uri }) => ({
-  source: { priority: FastImage.priority.low, uri },
-}))`
+const Wrapper = styled(TouchableOpacity)`
   width: ${({ theme }) => theme.metrics.getWidthFromDP('90%')}px;
   height: 100%;
   margin-right: ${({ theme }) => theme.metrics.mediumSize}px;
   margin-left: ${({ isFirst, theme }) => (isFirst ? theme.metrics.mediumSize : 0)}px;
+`;
+
+const PlaceImage = styled(FastImage).attrs(({ uri }) => ({
+  source: { priority: FastImage.priority.low, uri },
+}))`
+  width: 100%;
+  height: 100%;
   border-radius: 6px;
 `;
 
 type Props = {
+  onPressImage: Function,
   isFirst: boolean,
   imageURL: string,
 };
 
-const PlaceImageListItem = ({ isFirst, imageURL }: Props): Object => (
-  <PlaceImage
+const PlaceImageListItem = ({
+  onPressImage,
+  imageURL,
+  isFirst,
+}: Props): Object => (
+  <Wrapper
+    onPress={onPressImage}
     isFirst={isFirst}
-    uri={imageURL}
-  />
+  >
+    <PlaceImage
+      uri={imageURL}
+    />
+  </Wrapper>
 );
 
 export default PlaceImageListItem;

src/components/common/place-detail/components/sections/images-list/ImagesListWithZoom.js

@@ -0,0 +1,86 @@
+// @flow
+
+import React, { Fragment } from 'react';
+import {
+  TouchableOpacity,
+  Platform,
+  Modal,
+  StatusBar,
+  View,
+} from 'react-native';
+import ImageViewer from 'react-native-image-zoom-viewer';
+import styled from 'styled-components';
+
+import appStyles from '../../../../../../styles';
+import Icon from '../../../../Icon';
+
+const FooterWrapper = styled(View)`
+  width: ${({ theme }) => theme.metrics.width}px;
+  height: ${({ theme }) => theme.metrics.getWidthFromDP('30%')}px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const BackButton = styled(TouchableOpacity)`
+  width: ${({ theme }) => theme.metrics.getWidthFromDP('16%')}px;
+  height: ${({ theme }) => theme.metrics.getWidthFromDP('16%')}px;
+  justify-content: center;
+  align-items: center;
+  padding-top: ${({ theme }) => Platform.select({
+    android: 0,
+    ios: 4,
+  })}px;
+  border-radius: ${({ theme }) => theme.metrics.getWidthFromDP('8%')}px;
+  background-color: ${({ theme }) => theme.colors.contrastColor};
+`;
+
+type Images = {
+  url: string,
+};
+
+type Props = {
+  onToggleModalImages: Function,
+  indexImageSelected: number,
+  isModalImagesOpen: boolean,
+  images: Array<Images>,
+};
+
+const ImagesListWithZoom = ({
+  onToggleModalImages,
+  indexImageSelected,
+  isModalImagesOpen,
+  images,
+}: Props): Object => (
+  <Fragment>
+    <StatusBar
+      backgroundColor={appStyles.colors.black}
+      barStyle="light-content"
+    />
+    <Modal
+      visible={isModalImagesOpen}
+      hardwareAccelerated
+      transparent
+    >
+      <ImageViewer
+        index={indexImageSelected}
+        imageUrls={images}
+        enableImageZoom
+        renderFooter={() => (
+          <FooterWrapper>
+            <BackButton
+              onPress={onToggleModalImages}
+            >
+              <Icon
+                name="arrow-left"
+                color={appStyles.colors.white}
+                size={32}
+              />
+            </BackButton>
+          </FooterWrapper>
+        )}
+      />
+    </Modal>
+  </Fragment>
+);
+
+export default ImagesListWithZoom;

src/components/screens/home/HomeContainer.js

@@ -101,8 +101,6 @@ class HomeContainer extends Component {
       [CONSTANTS.PARAMS.ON_SEARCH_PLACE]: place => console.tron.log(place),
       [CONSTANTS.PARAMS.TOGGLE_FILTER]: this.onToggleFilter,
     });
-
-    this.onPressListItem();
   }
 
   onPressListItem = (id: string): void => {
@@ -156,17 +154,16 @@ class HomeContainer extends Component {
     const { shouldShowDarkLayer, isFilterOpen, mapHeight } = this.state;
 
     return (
-      <View />
-      // <HomeComponent
-      //   shouldShowDarkLayer={shouldShowDarkLayer}
-      //   onSetFlatListRef={this.onSetFlatListRef}
-      //   onPressListItem={this.onPressListItem}
-      //   onSetMapHeight={this.onSetMapHeight}
-      //   onToggleFilter={this.onToggleFilter}
-      //   isFilterOpen={isFilterOpen}
-      //   mapHeight={mapHeight}
-      //   places={PLACES}
-      // />
+      <HomeComponent
+        shouldShowDarkLayer={shouldShowDarkLayer}
+        onSetFlatListRef={this.onSetFlatListRef}
+        onPressListItem={this.onPressListItem}
+        onSetMapHeight={this.onSetMapHeight}
+        onToggleFilter={this.onToggleFilter}
+        isFilterOpen={isFilterOpen}
+        mapHeight={mapHeight}
+        places={PLACES}
+      />
     );
   }
 }

src/styles/colors.js

@@ -7,6 +7,7 @@ export default {
   darkLayer: 'rgba(0, 0, 0, 0.5)',
   subText: 'rgba(0, 0, 0, 0.5)',
   white: '#FDFDFD',
+  black: '#000',
   defaultWhite: '#FFFFFF',
   inactiveTabIcon: '#909090',
   textInputBackgroundColor: '#E3E3E3',

yarn.lock

@@ -5471,6 +5471,18 @@ react-native-gesture-handler@^1.2.1:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
+react-native-image-pan-zoom@^2.1.11, react-native-image-pan-zoom@^2.1.9:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.11.tgz#61bcb69219d95e76a9797d23e4a2e8e0bd654ae9"
+  integrity sha512-ZCisGUFpPchHXsjT7ZI0anlSLPgcTmjRKXqpVnPu3RDWFXfKjuL4zpY57DX4Y8YgGZCpbf9fApN7KjVYody2Mw==
+
+react-native-image-zoom-viewer@^2.2.25:
+  version "2.2.25"
+  resolved "https://registry.yarnpkg.com/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.25.tgz#61d0978b26d5a07bbbdfe04791818e49d1e538a0"
+  integrity sha512-/w3GsUD9F5c6ZE+3GC1UmE0I9yCAfTf/5Jjz5bDCvIQFp2MoMod3BQzRnZ1PjZbCq6a90eZ5rnB2Zvm1rFOgeQ==
+  dependencies:
+    react-native-image-pan-zoom "^2.1.9"
+
 react-native-maps-directions@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/react-native-maps-directions/-/react-native-maps-directions-1.6.0.tgz#d56e6119fd9ca9984e408970ae150fea3f9863c3"