feat: Ecosystem screens navigation

src/navigation/BottomTabNavigator.tsx

@@ -6,6 +6,7 @@ import { FontAwesome } from "@expo/vector-icons";
 import { Pressable } from "react-native";
 import Colors from "../constants/Colors";
 import ProfileStackNavigator from "./ProfileStackNavigator";
+import EcosystemStackNavigator from "./EcosystemStackNavigator";
 
 /**
  * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
@@ -24,7 +25,7 @@ const BottomTabNavigator = () => {
       <BottomTab.Screen
         name="TabOne"
         component={TabOneScreen}
-        options={({ navigation }: RootTabScreenProps<"TabOne">) => ({
+        options={() => ({
           title: "Tab One",
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
           headerRight: () => (
@@ -44,10 +45,34 @@ const BottomTabNavigator = () => {
           ),
         })}
       />
+      <BottomTab.Screen
+        name="Ecosystem"
+        component={EcosystemStackNavigator}
+        options={() => ({
+          title: "Ecosystem",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Pressable
+              onPress={() => null}
+              style={({ pressed }) => ({
+                opacity: pressed ? 0.5 : 1,
+              })}
+            >
+              <FontAwesome
+                name="info-circle"
+                size={25}
+                color={Colors.text.title} //TODO ganti warna
+                style={{ marginRight: 15 }}
+              />
+            </Pressable>
+          ),
+        })}
+      />
       <BottomTab.Screen
         name="Profile"
         component={ProfileStackNavigator}
-        options={({ navigation }: RootTabScreenProps<"Profile">) => ({
+        options={() => ({
           title: "Profile",
           headerShown: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,

src/navigation/EcosystemStackNavigator.tsx

+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import BusinessEcosystemScreen from "../screens/ecosystem/BusinessEcosystemScreen";
+import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
+import {
+  PopularEcosystemScreen,
+  JoinedEcosystemScreen,
+  MyEcosystemScreen,
+  LatestEcosystemScreen,
+} from "../screens/ecosystem/recomendation";
+import {
+  BusinessCategoryScreen,
+  BusinessListScreen,
+  EcosystemDetailScreen,
+  EcosystemListScreen,
+  EcosystemMapScreen,
+} from "../screens/ecosystem";
+
+const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();
+
+const EcosystemStackNavigator = () => {
+  return (
+    <EcosystemStack.Navigator initialRouteName="BusinessEcosystem">
+      <EcosystemStack.Screen
+        name="BusinessEcosystem"
+        component={BusinessEcosystemScreen}
+        options={{ headerShown: false }}
+      />
+      <EcosystemStack.Screen
+        name="MyEcosystem"
+        component={MyEcosystemScreen}
+        options={{ title: "Ekosistem Saya" }}
+      />
+      <EcosystemStack.Screen
+        name="Joined"
+        component={JoinedEcosystemScreen}
+        options={{ title: "Sudah Bergabung" }}
+      />
+      <EcosystemStack.Screen
+        name="Popular"
+        component={PopularEcosystemScreen}
+        options={{ title: "Paling Populer" }}
+      />
+      <EcosystemStack.Screen
+        name="Latest"
+        component={LatestEcosystemScreen}
+        options={{ title: "Terbaru Minggu Ini" }}
+      />
+      <EcosystemStack.Screen
+        name="BusinessCategory"
+        component={BusinessCategoryScreen}
+        options={{ title: "Kategori Bisnis" }}
+      />
+      <EcosystemStack.Screen
+        name="EcosystemList"
+        component={EcosystemListScreen}
+        initialParams={{ headerTitle: "" }}
+        options={({ route }) => ({ title: route.params.headerTitle })}
+      />
+      <EcosystemStack.Screen
+        name="EcosystemDetails"
+        component={EcosystemDetailScreen}
+        initialParams={{ headerTitle: "" }}
+        options={({ route }) => ({ title: route.params.headerTitle })}
+      />
+      <EcosystemStack.Screen
+        name="EcosystemMap"
+        component={EcosystemMapScreen}
+        options={{ title: "Peta Ekosistem" }}
+      />
+      <EcosystemStack.Screen
+        name="BusinessList"
+        component={BusinessListScreen}
+        initialParams={{ headerTitle: "" }}
+        options={({ route }) => ({ title: route.params.headerTitle })}
+      />
+    </EcosystemStack.Navigator>
+  );
+};
+
+export default EcosystemStackNavigator;

src/navigation/RootNavigator.tsx

@@ -10,6 +10,7 @@ import { getUser } from "../redux/user/actions";
 import LandingScreen from "../screens/auth/LandingScreen";
 import firebase from "firebase";
 import { Alert } from "react-native";
+import CreateBusinessEcosystemScreen from "../screens/CreateBusinessEcosystemScreen";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
@@ -73,6 +74,11 @@ const RootNavigator = () => {
         component={SuccessChangePasswordScreen}
         options={{ headerShown: false }}
       />
+      <RootStack.Screen
+        name="CreateBusinessEcosystem"
+        component={CreateBusinessEcosystemScreen}
+        options={{ title: "" }}
+      />
     </RootStack.Navigator>
   ) : (
     <RootStack.Navigator>

src/screens/CreateBusinessEcosystemScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../components/Themed";
+import Colors from "../constants/Colors";
+
+const BusinessCategoryScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Buat Ekosistem Bisnis</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default BusinessCategoryScreen;

src/screens/ecosystem/BusinessCategoryScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const BusinessCategoryScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Kategori Bisnis</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default BusinessCategoryScreen;

src/screens/ecosystem/BusinessEcosystemScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import SmallButton from "../../components/button/SmallButton";
+import Spacer from "../../components/Spacer/Spacer";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const BusinessEcosystemScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Ekosistem Bisnis</Text>
+      </View>
+      <Spacer variant="xl" />
+      <SmallButton
+        colors="primary"
+        text="Buat Ekosistem Bisnis"
+        onPress={() => {
+          nav.navigate("CreateBusinessEcosystem");
+        }}
+      />
+      <Spacer variant="xl" />
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            nav.navigate("Ecosystem", { screen: "MyEcosystem" });
+          }}
+        >
+          <Text style={styles.link}>Ekosistem Saya</Text>
+        </TouchableOpacity>
+      </View>
+      <Spacer variant="xl" />
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            nav.navigate("Ecosystem", { screen: "EcosystemDetails" });
+          }}
+        >
+          <Text style={styles.link}>Sudah Bergabung</Text>
+        </TouchableOpacity>
+      </View>
+      <Spacer variant="xl" />
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            nav.navigate("Ecosystem", {
+              screen: "BusinessCategory",
+            });
+          }}
+        >
+          <Text style={styles.link}>Kategori Bisnis</Text>
+        </TouchableOpacity>
+      </View>
+      <Spacer variant="xl" />
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            nav.navigate("Ecosystem", { screen: "Popular" });
+          }}
+        >
+          <Text style={styles.link}>Paling Populer</Text>
+        </TouchableOpacity>
+      </View>
+      <Spacer variant="xl" />
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            nav.navigate("Ecosystem", { screen: "Latest" });
+          }}
+        >
+          <Text style={styles.link}>Terbaru Minggu Ini</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+  link: {
+    color: Colors.text.link,
+    fontStyle: "normal",
+    fontSize: 14,
+    fontWeight: "400",
+  },
+});
+
+export default BusinessEcosystemScreen;

src/screens/ecosystem/BusinessListScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const BusinessListScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar List Bisnis</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default BusinessListScreen;

src/screens/ecosystem/EcosystemDetailScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const EcosystemDetailScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Detail Ekosistem</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default EcosystemDetailScreen;

src/screens/ecosystem/EcosystemListScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const EcosystemListScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar List Ekosistem</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default EcosystemListScreen;

src/screens/ecosystem/EcosystemMapScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+
+const EcosystemMapScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Peta Ekosistem</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default EcosystemMapScreen;

src/screens/ecosystem/index.ts

+import BusinessCategoryScreen from "./BusinessCategoryScreen";
+import BusinessListScreen from "./BusinessListScreen";
+import EcosystemDetailScreen from "./EcosystemDetailScreen";
+import EcosystemListScreen from "./EcosystemListScreen";
+import EcosystemMapScreen from "./EcosystemMapScreen";
+
+export {
+  BusinessCategoryScreen,
+  BusinessListScreen,
+  EcosystemDetailScreen,
+  EcosystemListScreen,
+  EcosystemMapScreen,
+};

src/screens/ecosystem/recomendation/JoinedEcosystemScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../../components/Themed";
+import Colors from "../../../constants/Colors";
+
+const JoinedEcosystemScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Ekosistem Sudah Bergabung</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default JoinedEcosystemScreen;

src/screens/ecosystem/recomendation/LatestEcosystemScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../../components/Themed";
+import Colors from "../../../constants/Colors";
+
+const LatestEcosystemScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Ekosistem Terbaru</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default LatestEcosystemScreen;

src/screens/ecosystem/recomendation/MyEcosystemScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../../components/Themed";
+import Colors from "../../../constants/Colors";
+
+const MyEcosystemScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Ekosistem Saya</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default MyEcosystemScreen;

src/screens/ecosystem/recomendation/PopularEcosystemScreen.tsx

+import { useNavigation } from "@react-navigation/core";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text, View } from "../../../components/Themed";
+import Colors from "../../../constants/Colors";
+
+const PopularEcosystemScreen = () => {
+  const nav = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text>Layar Ekosistem Populer</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+  },
+});
+
+export default PopularEcosystemScreen;

src/screens/ecosystem/recomendation/index.ts

+import JoinedEcosystemScreen from "./JoinedEcosystemScreen";
+import MyEcosystemScreen from "./MyEcosystemScreen";
+import PopularEcosystemScreen from "./PopularEcosystemScreen";
+import LatestEcosystemScreen from "./LatestEcosystemScreen";
+
+export {
+  PopularEcosystemScreen,
+  JoinedEcosystemScreen,
+  MyEcosystemScreen,
+  LatestEcosystemScreen,
+};

src/types/navigation/EcosystemStack.ts

+/**
+ * Learn more about using TypeScript with React Navigation:
+ * https://reactnavigation.org/docs/typescript/
+ */
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+export type EcosystemStackParamList = {
+  BusinessEcosystem: undefined;
+  Joined: undefined;