Untitled

import { AntDesign, Entypo, FontAwesome } from "@expo/vector-icons";
import React from "react";
import { View, Text, Image } from "react-native";

function Story(props: any) {
  const { profile, username } = props;
  return (
    <View style={{ marginRight: 8, alignItems: "center" }}>
      <Image
        style={{ width: 80, height: 80, borderRadius: 100 }}
        source={profile}
      />
      <Text>{username}</Text>
    </View>
  );
}

function Feed(props: any) {
  const { profile, username, post } = props;
  return (
    <View>
      {/* Part  1*/}
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          margin: 8,
        }}
      >
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Image
            source={profile}
            style={{ width: 40, height: 40, borderRadius: 100 }}
          />
          <Text style={{ marginLeft: 8, fontWeight: "bold" }}>{username}</Text>
        </View>
        <Entypo name="dots-three-vertical" size={24} color="black" />
      </View>

      {/* Part  2*/}
      <Image source={{ uri: post }} style={{ width: "100%", height: 300 }} />
      {/* Part  3*/}
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <View style={{ flexDirection: "row" }}>
          <View style={{ margin: 8 }}>
            <AntDesign name="hearto" size={24} color="black" />
          </View>
          <View style={{ margin: 8 }}>
            <FontAwesome name="comment-o" size={24} color="black" />
          </View>
          <View style={{ margin: 8 }}>
            <FontAwesome name="paper-plane-o" size={24} color="black" />
          </View>
        </View>
        <View style={{ margin: 8 }}>
          <FontAwesome name="bookmark-o" size={24} color="black" />
        </View>
      </View>
    </View>
  );
}

export { Feed, Story };

//Single Item
// export default {Feed, Story};