nomadcoders#15.1 Post Component Swiper

DmytroSkrypnyk · Jun 24, 2019 · 450c63a · 450c63a
1 parent 524cdfa
commit 450c63a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/components/Post.js b/components/Post.js
@@ -1,7 +1,10 @@
 import React from "react";
-import { Image } from "react-native";
+import { Image, Platform } from "react-native";
 import styled from "styled-components";
+import { Ionicons } from "@expo/vector-icons";
 import PropTypes from "prop-types";
+import Swiper from "react-native-swiper";
+import constants from "../constants";
 
 const Container = styled.View``;
 const Header = styled.View`
@@ -19,8 +22,15 @@ const Bold = styled.Text`
 const Location = styled.Text`
   font-size: 12px;
 `;
+const IconsContainer = styled.View`
+  padding: 10px;
+  flex-direction: row;
+`;
+const IconContainer = styled.View`
+  margin-right: 10px;
+`;
 
-const Post = ({ user, location }) => {
+const Post = ({ user, location, files = [] }) => {
   return (
     <Container>
       <Header>
@@ -37,6 +47,40 @@ const Post = ({ user, location }) => {
           </HeaderUserContainer>
         </Touchable>
       </Header>
+      <Swiper
+        showsPagination={false}
+        style={{ height: constants.height / 2.5 }}
+      >
+        {files.map(file => (
+          <Image
+            style={{ width: constants.width, height: constants.height / 2.5 }}
+            key={file.id}
+            source={{ uri: file.url }}
+          />
+        ))}
+      </Swiper>
+      <IconsContainer>
+        <Touchable>
+          <IconContainer>
+            <Ionicons
+              size={28}
+              name={
+                Platform.OS === "ios" ? "ios-heart-empty" : "md-heart-empty"
+              }
+            />
+          </IconContainer>
+        </Touchable>
+        <Touchable>
+          <IconContainer>
+            <Ionicons
+              size={28}
+              name={
+                Platform.OS === "ios" ? "ios-message-empty" : "md-message-empty"
+              }
+            />
+          </IconContainer>
+        </Touchable>
+      </IconsContainer>
     </Container>
   );
 };

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-apollo-hooks": "^0.4.5",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-swiper": "^1.5.14",
     "react-native-web": "^0.11.4",
     "react-navigation": "^3.11.0",
     "styled-components": "^4.3.2"

diff --git a/yarn.lock b/yarn.lock
@@ -4794,6 +4794,13 @@ react-native-svg@9.4.0:
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.4.0.tgz#e428e0eae55aebd2355f1ff4f22675dad4611960"
   integrity sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg==
 
+react-native-swiper@^1.5.14:
+  version "1.5.14"
+  resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.5.14.tgz#1c6f949ca377186300f972bb0f30d24062c899aa"
+  integrity sha512-Kn0fxKooN7Shwu1qJYHB+Y8ssXXnvrIwReHXU5jCdyYNfz2QbBv0Cv3sa2Mqzr+XgzORCFFIokc8uCCUITDrVA==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-native-tab-view@^1.2.0, react-native-tab-view@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz#f113cd87485808f0c991abec937f70fa380478b9"