Fakultas Ilmu Komputer UI
Skip to content
GitLab
Menu
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
422a10d9
Commit
422a10d9
authored
Oct 10, 2021
by
Mohammad Faraz Abisha Mirza
Browse files
Merge branch 'master' into 'ecosystem-map-screen'
# Conflicts: # src/screens/ecosystem/EcosystemDetailScreen.tsx
parents
a7b63cc0
856f24c5
Pipeline
#86283
passed with stage
in 9 minutes and 47 seconds
Changes
14
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/GroupList/AlphabetGroupList.tsx
View file @
422a10d9
...
@@ -48,6 +48,14 @@ const AlphabetGroupList = ({
...
@@ -48,6 +48,14 @@ const AlphabetGroupList = ({
},
},
});
});
}
}
}
else
if
(
fromScreen
===
"
BusinessEcosystem
"
)
{
nav
.
navigate
(
"
Ecosystem
"
,
{
screen
:
"
EcosystemList
"
,
params
:
{
headerTitle
:
item
.
value
,
toFetch
:
item
.
key
,
},
});
}
}
}
}
}
}
/>
/>
...
...
src/navigation/EcosystemStackNavigator.tsx
View file @
422a10d9
...
@@ -5,11 +5,11 @@ import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
...
@@ -5,11 +5,11 @@ import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
import
{
import
{
BusinessCategoryScreen
,
BusinessCategoryScreen
,
EcosystemDetailScreen
,
EcosystemDetailScreen
,
EcosystemListScreen
,
EcosystemMapScreen
,
EcosystemMapScreen
,
RecommendedEcosystemScreen
,
RecommendedEcosystemScreen
,
UserListScreen
,
UserListScreen
,
}
from
"
../screens/ecosystem
"
;
}
from
"
../screens/ecosystem
"
;
import
CategoryEcosystemListScreen
from
"
../screens/ecosystem/CategoryEcosystemListScreen
"
;
const
EcosystemStack
=
createNativeStackNavigator
<
EcosystemStackParamList
>
();
const
EcosystemStack
=
createNativeStackNavigator
<
EcosystemStackParamList
>
();
...
@@ -36,7 +36,7 @@ const EcosystemStackNavigator = () => {
...
@@ -36,7 +36,7 @@ const EcosystemStackNavigator = () => {
/>
/>
<
EcosystemStack
.
Screen
<
EcosystemStack
.
Screen
name
=
"EcosystemList"
name
=
"EcosystemList"
component
=
{
EcosystemListScreen
}
component
=
{
Category
EcosystemListScreen
}
initialParams
=
{
{
headerTitle
:
""
}
}
initialParams
=
{
{
headerTitle
:
""
}
}
options
=
{
({
route
})
=>
({
title
:
route
.
params
.
headerTitle
})
}
options
=
{
({
route
})
=>
({
title
:
route
.
params
.
headerTitle
})
}
/>
/>
...
...
src/redux/user/actions.tsx
View file @
422a10d9
...
@@ -72,19 +72,29 @@ export const signupUser = (
...
@@ -72,19 +72,29 @@ export const signupUser = (
firstName
:
string
,
firstName
:
string
,
lastName
:
string
,
lastName
:
string
,
email
:
string
,
email
:
string
,
password
:
string
password
:
string
,
phone
:
string
,
businessType
:
string
)
=>
{
)
=>
{
return
async
(
dispatch
:
Dispatch
<
any
>
)
=>
{
return
async
(
dispatch
:
Dispatch
<
any
>
)
=>
{
try
{
try
{
const
userAuth
=
await
authService
.
signUpAuth
(
email
,
password
);
const
userAuth
=
await
authService
.
signUpAuth
(
email
,
password
);
const
uid
=
userAuth
.
user
.
uid
;
const
uid
=
userAuth
.
user
.
uid
;
await
userService
.
createUser
(
email
,
firstName
,
lastName
,
uid
);
await
userService
.
createUser
(
uid
,
{
dispatch
({
firstName
,
lastName
,
email
,
phone
,
businessType
,
pic
:
""
,
});
return
dispatch
({
type
:
"
SIGNUP
"
,
type
:
"
SIGNUP
"
,
payload
:
{
email
,
firstName
,
lastName
,
id
:
uid
},
payload
:
{
email
,
firstName
,
lastName
,
id
:
uid
,
phone
,
businessType
},
});
});
}
catch
(
e
)
{
}
catch
(
e
)
{
console
.
log
(
e
);
console
.
log
(
e
);
return
{
error
:
e
};
}
}
};
};
};
};
src/screens/CategoryEcosystemListScreen.tsx
deleted
100644 → 0
View file @
a7b63cc0
import
{
FlatList
,
SafeAreaView
,
StyleSheet
}
from
"
react-native
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
HorizontalCards
from
"
../components/Cards/HorizontalCards
"
;
// import { useNavigation } from "@react-navigation/core";
import
Colors
from
"
../constants/Colors
"
;
import
{
View
}
from
"
../components/Themed
"
;
import
Spacer
from
"
../components/Spacer/Spacer
"
;
// import { IEcosystem } from "../types/firestore/ecosystems";
import
IconForm
from
"
../components/Forms/IconForm
"
;
const
CategoryEcosystemListScreen
=
()
=>
{
// const nav = useNavigation();
const
[
search
,
setSearch
]
=
useState
(
""
);
const
[
listData
,
// setListData
]
=
useState
([
{
id
:
"
1
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
100
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
5
"
,
},
{
id
:
"
2
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
120
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
4.9
"
,
},
{
id
:
"
3
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
130
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
5
"
,
},
{
id
:
"
4
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
140
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
4.4
"
,
},
{
id
:
"
5
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
100
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
4
"
,
},
{
id
:
"
6
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
10
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
5
"
,
},
]);
return
(
<
SafeAreaView
style
=
{
styles
.
container
}
>
<
View
>
<
IconForm
text
=
{
search
}
setText
=
{
setSearch
}
placeholder
=
{
"
Cari di kategori ini
"
}
search
/>
</
View
>
<
Spacer
variant
=
{
"
xl
"
}
/>
<
FlatList
data
=
{
listData
}
renderItem
=
{
({
item
})
=>
{
return
(
<
View
style
=
{
styles
.
horizontalCard
}
>
<
HorizontalCards
image
=
{
item
.
image
}
member
=
{
item
.
member
}
title
=
{
item
.
title
}
rate
=
{
item
.
rate
}
onPress
=
{
null
}
/>
</
View
>
);
}
}
keyExtractor
=
{
(
item
)
=>
item
.
id
}
ItemSeparatorComponent
=
{
()
=>
<
Spacer
variant
=
{
"
l
"
}
/>
}
showsVerticalScrollIndicator
=
{
false
}
showsHorizontalScrollIndicator
=
{
false
}
/>
</
SafeAreaView
>
);
};
const
styles
=
StyleSheet
.
create
({
container
:
{
padding
:
24
,
backgroundColor
:
Colors
.
background
,
},
horizontalCard
:
{
paddingHorizontal
:
4
,
paddingTop
:
2
,
},
});
export
default
CategoryEcosystemListScreen
;
src/screens/CreateEcosystemScreen.tsx
View file @
422a10d9
...
@@ -7,6 +7,7 @@ import {
...
@@ -7,6 +7,7 @@ import {
FlatList
,
FlatList
,
TouchableOpacity
,
TouchableOpacity
,
SafeAreaView
,
SafeAreaView
,
Alert
,
}
from
"
react-native
"
;
}
from
"
react-native
"
;
import
Colors
from
"
../constants/Colors
"
;
import
Colors
from
"
../constants/Colors
"
;
import
PlainForm
from
"
../components/Forms/PlainForm
"
;
import
PlainForm
from
"
../components/Forms/PlainForm
"
;
...
@@ -18,10 +19,16 @@ import Spacer from "../components/Spacer/Spacer";
...
@@ -18,10 +19,16 @@ import Spacer from "../components/Spacer/Spacer";
import
{
ecosystemItem
}
from
"
../types/ListItems
"
;
import
{
ecosystemItem
}
from
"
../types/ListItems
"
;
import
{
getCategoriesAsDdFormat
}
from
"
../helpers/ddConverter
"
;
import
{
getCategoriesAsDdFormat
}
from
"
../helpers/ddConverter
"
;
import
{
CreateEcosystemStackScreenProps
}
from
"
../types/navigation
"
;
import
{
CreateEcosystemStackScreenProps
}
from
"
../types/navigation
"
;
import
{
createEcosystem
}
from
"
../service/functions/createEcosystem
"
;
import
{
useUser
}
from
"
../hooks/reduxHooks
"
;
import
{
IEcosystemCategoryMember
}
from
"
../types/firestore/ecosystemCategoryMember
"
;
import
{
IEcosystemMembership
}
from
"
../types/firestore/ecosystemMembership
"
;
import
{
ActivityIndicator
}
from
"
react-native-paper
"
;
const
CreateEcosystemScreen
=
({
const
CreateEcosystemScreen
=
({
route
,
route
,
}:
CreateEcosystemStackScreenProps
<
"
CreateEcosystemScreen
"
>
)
=>
{
}:
CreateEcosystemStackScreenProps
<
"
CreateEcosystemScreen
"
>
)
=>
{
const
nav
=
useNavigation
();
const
nav
=
useNavigation
();
const
user
=
useUser
();
const
[
ecosystemName
,
setEcosystemName
]
=
useState
(
""
);
const
[
ecosystemName
,
setEcosystemName
]
=
useState
(
""
);
const
[
ecosystemDetails
,
setEcosystemDetails
]
=
useState
(
""
);
const
[
ecosystemDetails
,
setEcosystemDetails
]
=
useState
(
""
);
const
[
ecosystemCategory
,
setEcosystemCategory
]
=
useState
(
""
);
const
[
ecosystemCategory
,
setEcosystemCategory
]
=
useState
(
""
);
...
@@ -33,6 +40,8 @@ const CreateEcosystemScreen = ({
...
@@ -33,6 +40,8 @@ const CreateEcosystemScreen = ({
const
[
ecosystemMainBusiness
,
setEcosystemMainBusiness
]
=
const
[
ecosystemMainBusiness
,
setEcosystemMainBusiness
]
=
useState
<
ecosystemItem
>
({});
useState
<
ecosystemItem
>
({});
const
[
isSubmitting
,
setIsSubmitting
]
=
useState
(
false
);
// const handlePickImage = () => {
// const handlePickImage = () => {
// setIsLoading(true);
// setIsLoading(true);
// pickImage().then((res) => {
// pickImage().then((res) => {
...
@@ -51,7 +60,6 @@ const CreateEcosystemScreen = ({
...
@@ -51,7 +60,6 @@ const CreateEcosystemScreen = ({
});
});
useEffect
(()
=>
{
useEffect
(()
=>
{
console
.
log
(
"
test
"
);
if
(
route
.
params
?.
id
&&
route
.
params
?.
name
)
{
if
(
route
.
params
?.
id
&&
route
.
params
?.
name
)
{
switch
(
route
.
params
?.
forGroup
)
{
switch
(
route
.
params
?.
forGroup
)
{
case
"
supplier
"
:
case
"
supplier
"
:
...
@@ -116,6 +124,125 @@ const CreateEcosystemScreen = ({
...
@@ -116,6 +124,125 @@ const CreateEcosystemScreen = ({
}
}
};
};
const
handleSubmit
=
async
()
=>
{
setIsSubmitting
(
true
);
const
ecosystemCategoryMembers
:
{
categoryMember
:
IEcosystemCategoryMember
;
ecosystemMemberships
:
IEcosystemMembership
[];
}[]
=
[];
const
suppliers
=
Object
.
keys
(
ecosystemSupplier
);
suppliers
.
forEach
((
categoryId
)
=>
{
const
item
=
ecosystemSupplier
[
categoryId
];
const
member
:
IEcosystemCategoryMember
=
{
type
:
"
supplier
"
,
categoryId
:
categoryId
,
};
const
memberships
:
IEcosystemMembership
[]
=
[];
Object
.
keys
(
item
.
members
).
forEach
((
userId
)
=>
{
memberships
.
push
({
userId
:
userId
,
});
});
ecosystemCategoryMembers
.
push
({
categoryMember
:
member
,
ecosystemMemberships
:
memberships
,
});
});
const
customer
=
Object
.
keys
(
ecosystemCustomer
);
customer
.
forEach
((
categoryId
)
=>
{
const
item
=
ecosystemCustomer
[
categoryId
];
const
member
:
IEcosystemCategoryMember
=
{
type
:
"
customer
"
,
categoryId
:
categoryId
,
};
const
memberships
:
IEcosystemMembership
[]
=
[];
Object
.
keys
(
item
.
members
).
forEach
((
userId
)
=>
{
memberships
.
push
({
userId
:
userId
,
});
});
ecosystemCategoryMembers
.
push
({
categoryMember
:
member
,
ecosystemMemberships
:
memberships
,
});
});
const
support
=
Object
.
keys
(
ecosystemSupport
);
support
.
forEach
((
categoryId
)
=>
{
const
item
=
ecosystemSupport
[
categoryId
];
const
member
:
IEcosystemCategoryMember
=
{
type
:
"
support
"
,
categoryId
:
categoryId
,
};
const
memberships
:
IEcosystemMembership
[]
=
[];
Object
.
keys
(
item
.
members
).
forEach
((
userId
)
=>
{
memberships
.
push
({
userId
:
userId
,
});
});
ecosystemCategoryMembers
.
push
({
categoryMember
:
member
,
ecosystemMemberships
:
memberships
,
});
});
const
mainBusiness
=
Object
.
keys
(
ecosystemMainBusiness
);
mainBusiness
.
forEach
((
categoryId
)
=>
{
const
item
=
ecosystemMainBusiness
[
categoryId
];
const
member
:
IEcosystemCategoryMember
=
{
type
:
"
main
"
,
categoryId
:
categoryId
,
};
const
memberships
:
IEcosystemMembership
[]
=
[];
Object
.
keys
(
item
.
members
).
forEach
((
userId
)
=>
{
memberships
.
push
({
userId
:
userId
,
});
});
ecosystemCategoryMembers
.
push
({
categoryMember
:
member
,
ecosystemMemberships
:
memberships
,
});
});
try
{
const
response
=
await
createEcosystem
({
ecosystem
:
{
name
:
ecosystemName
,
description
:
ecosystemDetails
,
followerCount
:
0
,
pic
:
""
,
visibility
:
"
public
"
,
raters
:
0
,
rating
:
0
,
creatorId
:
user
.
id
,
categoryId
:
ecosystemCategory
,
},
ecosystemCategoryMembers
:
ecosystemCategoryMembers
,
});
setIsSubmitting
(
false
);
if
(
response
.
status
===
200
||
response
.
status
===
"
200
"
)
{
nav
.
navigate
(
"
MainTab
"
);
}
else
{
console
.
log
(
response
);
Alert
.
alert
(
"
Error
"
,
"
error creating new ecosystem
"
);
}
}
catch
(
e
)
{
setIsSubmitting
(
false
);
console
.
log
(
e
);
Alert
.
alert
(
"
Error
"
,
"
error creating new ecosystem
"
);
}
};
return
(
return
(
<
SafeAreaView
>
<
SafeAreaView
>
<
FlatList
<
FlatList
...
@@ -491,10 +618,19 @@ const CreateEcosystemScreen = ({
...
@@ -491,10 +618,19 @@ const CreateEcosystemScreen = ({
/>
/>
)
}
)
}
<
Spacer
variant
=
"xl"
/>
<
Spacer
variant
=
"xl"
/>
{
isSubmitting
&&
(
<
ActivityIndicator
size
=
{
"
large
"
}
animating
=
{
true
}
/>
)
}
<
Spacer
variant
=
"xl"
/>
<
MainButton
<
MainButton
text
=
"lanjut"
text
=
"lanjut"
colors
=
"primary"
colors
=
"primary"
onPress
=
{
()
=>
{}
}
onPress
=
{
()
=>
{
handleSubmit
();
}
}
/>
/>
<
Spacer
variant
=
"xl"
/>
<
Spacer
variant
=
"xl"
/>
<
Spacer
variant
=
"xl"
/>
<
Spacer
variant
=
"xl"
/>
...
...
src/screens/auth/RegisterScreen.tsx
View file @
422a10d9
...
@@ -25,13 +25,12 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
...
@@ -25,13 +25,12 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
const
[
password
,
setPassword
]
=
useState
(
""
);
const
[
password
,
setPassword
]
=
useState
(
""
);
const
[
phoneNo
,
setPhoneNo
]
=
useState
(
""
);
const
[
phoneNo
,
setPhoneNo
]
=
useState
(
""
);
const
[
picked
,
setPicked
]
=
useState
(
""
);
const
[
picked
,
setPicked
]
=
useState
(
""
);
const
dispatch
=
useAppDispatch
();
const
[
categories
,
setCategories
]
=
useState
<
IDD
[]
>
([]);
const
[
categories
,
setCategories
]
=
useState
<
IDD
[]
>
([]);
useEffect
(()
=>
{
useEffect
(()
=>
{
getCategoriesAsDdFormat
().
then
((
res
)
=>
setCategories
(
res
));
getCategoriesAsDdFormat
().
then
((
res
)
=>
setCategories
(
res
));
});
},
[]);
const
dispatch
=
useAppDispatch
();
const
handleSubmit
=
()
=>
{
const
handleSubmit
=
()
=>
{
if
(
if
(
...
@@ -42,7 +41,11 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
...
@@ -42,7 +41,11 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
validateEmpty
(
password
)
&&
validateEmpty
(
password
)
&&
validateEmpty
(
picked
)
validateEmpty
(
picked
)
)
{
)
{
dispatch
(
signupUser
(
firstName
,
lastName
,
email
,
password
));
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
dispatch
(
signupUser
(
firstName
,
lastName
,
email
,
password
,
phoneNo
,
picked
)
).
then
(()
=>
Alert
.
alert
(
"
Error
"
,
"
Something went wrong
"
));
// .then((e: ActionErrorRes) => e.error && Alert.alert("Error", e.error));
}
else
{
}
else
{
Alert
.
alert
(
"
Form Tidak Lengkap
"
,
"
Silahkan isi form dengan benar
"
);
Alert
.
alert
(
"
Form Tidak Lengkap
"
,
"
Silahkan isi form dengan benar
"
);
}
}
...
@@ -155,6 +158,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
...
@@ -155,6 +158,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
<
MainButton
text
=
"Daftar"
colors
=
"primary"
onPress
=
{
handleSubmit
}
/>
<
MainButton
text
=
"Daftar"
colors
=
"primary"
onPress
=
{
handleSubmit
}
/>
</
View
>
</
View
>
<
Spacer
variant
=
"xl"
/>
<
Spacer
variant
=
"xl"
/>
<
Spacer
variant
=
"xl"
/>
</
ScrollView
>
</
ScrollView
>
);
);
};
};
...
@@ -163,6 +167,7 @@ const styles = StyleSheet.create({
...
@@ -163,6 +167,7 @@ const styles = StyleSheet.create({
container
:
{
container
:
{
padding
:
24
,
padding
:
24
,
backgroundColor
:
Colors
.
background
,
backgroundColor
:
Colors
.
background
,
flex
:
1
,
},
},
titleText
:
{
titleText
:
{
fontSize
:
32
,
fontSize
:
32
,
...
...
src/screens/ecosystem/BusinessEcosystemScreen.tsx
View file @
422a10d9
...
@@ -61,6 +61,9 @@ const BusinessEcosystemScreen = () => {
...
@@ -61,6 +61,9 @@ const BusinessEcosystemScreen = () => {
onPress
=
{
()
=>
{
onPress
=
{
()
=>
{
nav
.
navigate
(
"
Ecosystem
"
,
{
nav
.
navigate
(
"
Ecosystem
"
,
{
screen
:
"
BusinessCategory
"
,
screen
:
"
BusinessCategory
"
,
params
:
{
fromScreen
:
"
BusinessEcosystem
"
,
},
});
});
}
}
}
}
>
>
...
...
src/screens/ecosystem/CategoryEcosystemListScreen.tsx
0 → 100644
View file @
422a10d9
import
{
FlatList
,
ScrollView
,
StyleSheet
}
from
"
react-native
"
;
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
HorizontalCards
from
"
../../components/Cards/HorizontalCards
"
;
import
{
useNavigation
}
from
"
@react-navigation/core
"
;
import
Colors
from
"
../../constants/Colors
"
;
import
{
View
}
from
"
../../components/Themed
"
;
import
Spacer
from
"
../../components/Spacer/Spacer
"
;
import
IconForm
from
"
../../components/Forms/IconForm
"
;
import
{
getByCategory
}
from
"
../../service/firestore/ecosystem/getByCategory
"
;
import
{
IEcosystem
}
from
"
../../types/firestore/ecosystems
"
;
import
{
EcosystemStackScreenProps
}
from
"
../../types/navigation
"
;
const
CategoryEcosystemListScreen
=
({
route
,
}:
EcosystemStackScreenProps
<
"
EcosystemList
"
>
)
=>
{
const
nav
=
useNavigation
();
const
{
toFetch
}
=
route
.
params
;
const
[
search
,
setSearch
]
=
useState
(
""
);
const
[
listData
,
setListData
]
=
useState
<
IEcosystem
[]
>
([]);
useEffect
(()
=>
{
getByCategory
(
toFetch
).
then
((
res
)
=>
setListData
(
res
));
});
return
(
<
ScrollView
style
=
{
styles
.
container
}
>
<
View
>
<
IconForm
text
=
{
search
}
setText
=
{
setSearch
}
placeholder
=
{
"
Cari di kategori ini
"
}
search
/>
</
View
>
<
Spacer
variant
=
{
"
xl
"
}
/>
<
FlatList
data
=
{
listData
}
renderItem
=
{
({
item
})
=>
{
return
(
<
View
style
=
{
styles
.
horizontalCard
}
>
<
HorizontalCards
image
=
{
item
.
pic
}
member
=
{
item
.
followerCount
.
toString
()
}
title
=
{
item
.
name
}
rate
=
{
item
.
rating
.
toString
()
}
onPress
=
{
()
=>
nav
.
navigate
(
"
Ecosystem
"
,
{
screen
:
"
EcosystemDetails
"
,
params
:
{
headerTitle
:
item
.
name
,
title
:
item
.
name
,
desc
:
item
.
description
,
image
:
item
.
pic
,
member
:
item
.
followerCount
.
toString
(),
rating
:
item
.
rating
.
toString
(),
},
})
}
/>
</
View
>
);
}
}
keyExtractor
=
{
(
item
)
=>
item
.
id
}
ItemSeparatorComponent
=
{
()
=>
<
Spacer
variant
=
{
"
l
"
}
/>
}
showsVerticalScrollIndicator
=
{
false
}
showsHorizontalScrollIndicator
=
{
false
}
/>
</
ScrollView
>
);
};
const
styles
=
StyleSheet
.
create
({
container
:
{