feat: create Ecosystem Detail Screen

src/screens/ecosystem/EcosystemDetailScreen.tsx

 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, Image } from "react-native";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
+import SmallButton from "../../components/button/SmallButton";
+import Spacer from "../../components/Spacer/Spacer";
+import { MaterialIcons } from "@expo/vector-icons";
+import Layout from "../../constants/Layout";
 
 const EcosystemDetailScreen = () => {
   const nav = useNavigation();
-
   return (
     <View style={styles.container}>
-      <View>
-        <Text>Layar Detail Ekosistem</Text>
+      <View style={styles.imageWrapper}>
+        <Image
+          style={styles.image}
+          source={{
+            // uri: {image}
+            uri: "https://bsmedia.business-standard.com/_media/bs/img/article/2020-12/11/full/1607656152-0479.jpg",
+          }}
+        />
+      </View>
+      <Spacer variant={"l"} />
+      <View style={styles.textWrapper}>
+        {/* <Text style={styles.title}>{Title}</Text> */}
+        <Text style={styles.title}>Petani Beras dan Gandum Jawa Tengah</Text>
+        <Spacer variant={"l"} />
+        <SmallButton
+          text={"Lihat Peta Ekosistem"}
+          colors={"primary"}
+          onPress={() => {}}
+        />
+        <Spacer variant={"l"} />
+        <View style={styles.iconWrapper}>
+          <View style={styles.bodyWrapper}>
+            <MaterialIcons name={"group"} style={styles.iconMember} size={30} />
+            <View style={styles.textWrapper}>
+              {/* <Text style={styles.iconText}>{member} Anggota</Text> */}
+              <Text style={styles.iconText}>350 Anggota</Text>
+            </View>
+          </View>
+          <View style={styles.bodyWrapper}>
+            <MaterialIcons name={"star"} style={styles.iconStar} size={30} />
+
+            <View style={styles.textWrapper}>
+              {/* <Text style={styles.iconText}>{rate}</Text> */}
+              <Text style={styles.iconText}>4.7</Text>
+            </View>
+          </View>
+        </View>
+        <Spacer variant={"s"} />
+        <Text style={styles.textBody}>
+          {/* {content} */}
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip.
+        </Text>
+        <Spacer variant={"xl"} />
+        <SmallButton
+          text={"Keluar dari Ekosistem"}
+          colors={"warning"}
+          onPress={() => {}}
+        />
       </View>
     </View>
   );
@@ -19,9 +71,48 @@ const EcosystemDetailScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "center",
     backgroundColor: Colors.background,
-    paddingHorizontal: 24,
-    justifyContent: "center",
+    display: "flex",
+  },
+  image: {
+    width: "100%",
+    height: Layout.window.height * 0.2,
+  },
+  title: {
+    color: Colors.text.title,
+    fontSize: 24,
+  },
+  textBody: {
+    color: Colors.text.body,
+    fontSize: 16,
+  },
+  iconMember: {
+    color: Colors.icon.tab.inactive,
+  },
+  iconStar: {
+    color: Colors.icon.star,
+  },
+  iconText: {
+    fontSize: 16,
+    color: Colors.text.subtitle,
+    paddingLeft: 8,
+  },
+  imageWrapper: {
+    width: "100%",
+  },
+  iconWrapper: {
+    width: "100%",
+    flexDirection: "row",
+  },
+  bodyWrapper: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  textWrapper: {
+    marginTop: 4,
+    width: Layout.window.width * 0.9,
   },
 });