feat: Display like and share buttons

vgeorgiev0 · Sep 17, 2022 · a6d19ff · a6d19ff
1 parent c8bfa75
commit a6d19ff
Showing 1 changed file with 57 additions and 3 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,8 +1,11 @@
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View, Image } from "react-native";
-import { Entypo } from "@expo/vector-icons";
-// import LikeButton from "../assets/images/like.png";
-import { AntDesign } from "@expo/vector-icons";
+import {
+  Entypo,
+  AntDesign,
+  FontAwesome5,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
 const post = {
   id: "p1",
   createdAt: "19 m",
@@ -19,6 +22,15 @@ const post = {
   numberOfShares: 2,
 };
 
+const IconButton = (text: string) => {
+  return (
+    <View style={styles.iconButton}>
+      <AntDesign style={styles.likeIcon} name="like2" size={18} color="grey" />
+      <Text style={styles.iconBUttonText}>{text}</Text>
+    </View>
+  );
+};
+
 export default function App() {
   return (
     <View style={styles.container}>
@@ -63,6 +75,35 @@ export default function App() {
               {post.numberOfShares} shares
             </Text>
           </View>
+          <View style={styles.buttonsRow}>
+            <View style={styles.iconButton}>
+              <AntDesign
+                style={styles.likeIcon}
+                name="like2"
+                size={18}
+                color="grey"
+              />
+              <Text style={styles.iconBUttonText}>Like</Text>
+            </View>
+            <View style={styles.iconButton}>
+              <FontAwesome5
+                style={styles.likeIcon}
+                name="comment-alt"
+                size={18}
+                color="grey"
+              />
+              <Text style={styles.iconBUttonText}>Comment</Text>
+            </View>
+            <View style={styles.iconButton}>
+              <MaterialCommunityIcons
+                style={styles.likeIcon}
+                name="share-outline"
+                size={18}
+                color="grey"
+              />
+              <Text style={styles.iconBUttonText}>Share</Text>
+            </View>
+          </View>
         </View>
       </View>
       <StatusBar style="auto" />
@@ -130,4 +171,17 @@ const styles = StyleSheet.create({
     marginLeft: "auto",
     color: "grey",
   },
+  buttonsRow: {
+    marginVertical: 10,
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+  iconButton: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconBUttonText: {
+    color: "grey",
+    marginLeft: 5,
+  },
 });