Fakultas Ilmu Komputer UI

Commit c059944a authored by Abraham Rudolf Brahmana's avatar Abraham Rudolf Brahmana Committed by Muhammad Zahran Agung Dewantoro
Browse files

feat: Ecosystem screens navigation

parent f2776161
......@@ -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} />,
......
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;
......@@ -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>
......
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;
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;
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;
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;
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;
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;
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;
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,
};
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;
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;
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;
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;
import JoinedEcosystemScreen from "./JoinedEcosystemScreen";
import MyEcosystemScreen from "./MyEcosystemScreen";
import PopularEcosystemScreen from "./PopularEcosystemScreen";
import LatestEcosystemScreen from "./LatestEcosystemScreen";
export {
PopularEcosystemScreen,
JoinedEcosystemScreen,
MyEcosystemScreen,
LatestEcosystemScreen,
};
/**
* 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;