Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
PPL KI Ganjil 2021 2022
Clicks - Ecosystem Business
clicks-frontend
Commits
c059944a
Commit
c059944a
authored
Oct 04, 2021
by
Abraham Rudolf Brahmana
Committed by
Muhammad Zahran Agung Dewantoro
Oct 04, 2021
Browse files
feat: Ecosystem screens navigation
parent
f2776161
Changes
20
Hide whitespace changes
Inline
Side-by-side
src/navigation/BottomTabNavigator.tsx
View file @
c059944a
...
...
@@ -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
0 → 100644
View file @
c059944a
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
View file @
c059944a
...
...
@@ -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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
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
0 → 100644
View file @
c059944a
/**
* 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
;