124 lines
3.7 KiB
JavaScript
124 lines
3.7 KiB
JavaScript
import React from "react";
|
|
import {
|
|
StyleSheet,
|
|
Dimensions,
|
|
ImageBackground,
|
|
ScrollView,
|
|
TouchableWithoutFeedback
|
|
} from "react-native";
|
|
import { Block, Text, theme } from "galio-framework";
|
|
|
|
import Images from "../constants/Images";
|
|
|
|
const { width } = Dimensions.get("screen");
|
|
|
|
const menuCategories = {
|
|
music: [
|
|
{ id: "artists", title: "Artists", image: Images.Music["Artists"] },
|
|
{ id: "concerts", title: "Concerts", image: Images.Music["Concerts"] },
|
|
{ id: "DJs", title: "DJs", image: Images.Music["DJs"] }
|
|
],
|
|
beauty: [
|
|
{ id: "hands", title: "Hands", image: Images.Music["Hands"] },
|
|
{ id: "body", title: "Body", image: Images.Music["Body"] },
|
|
{ id: "face", title: "Face", image: Images.Music["Face"] }
|
|
],
|
|
fashion: [
|
|
{ id: "trends", title: "Trends", image: Images.Music["Trends"] },
|
|
{ id: "clothes", title: "Clothes", image: Images.Music["Clothes"] },
|
|
{ id: "accessory", title: "Accessory", image: Images.Music["Accessory"] }
|
|
],
|
|
clothes: [
|
|
{ id: "fashion", title: "Fashion", image: Images.Music["Fashion"] },
|
|
{ id: "garagesale", title: "Garage Sale", image: Images.Music["Garage_sale"] },
|
|
{ id: "weddingdress", title: "Wedding Dress", image: Images.Music["Wedding_dress"] }
|
|
]
|
|
};
|
|
|
|
export default class Categories extends React.Component {
|
|
renderCategories = () => {
|
|
const { navigation, route } = this.props;
|
|
// const tabId = navigation.getParam("tabId");
|
|
// const categories = tabId ? menuCategories[tabId] : menuCategories.beauty;
|
|
const tabId = route.params?.tabId;
|
|
const categories = tabId ? menuCategories[tabId] : menuCategories.beauty;
|
|
|
|
return (
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={styles.categoryList}
|
|
>
|
|
<Block flex>
|
|
{categories.map(category => (
|
|
<TouchableWithoutFeedback
|
|
key={`category-${category.id}`}
|
|
onPress={() => navigation.navigate("Category", { ...category })}
|
|
>
|
|
<Block flex card style={[styles.category, styles.shadow]}>
|
|
<ImageBackground
|
|
source={{ uri: category.image }}
|
|
style={[
|
|
styles.imageBlock,
|
|
{ width: width - theme.SIZES.BASE * 2, height: 252 }
|
|
]}
|
|
imageStyle={{
|
|
width: width - theme.SIZES.BASE * 2,
|
|
height: 252
|
|
}}
|
|
>
|
|
<Block style={styles.categoryTitle}>
|
|
<Text style={{ fontFamily: 'open-sans-bold' }} size={18} color={theme.COLORS.WHITE}>
|
|
{category.title}
|
|
</Text>
|
|
</Block>
|
|
</ImageBackground>
|
|
</Block>
|
|
</TouchableWithoutFeedback>
|
|
))}
|
|
</Block>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
render() {
|
|
return (
|
|
<Block flex center style={styles.categories}>
|
|
{this.renderCategories()}
|
|
</Block>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
categories: {
|
|
width
|
|
},
|
|
categoryList: {
|
|
justifyContent: "center",
|
|
paddingTop: theme.SIZES.BASE * 1.5
|
|
},
|
|
category: {
|
|
backgroundColor: theme.COLORS.WHITE,
|
|
marginHorizontal: theme.SIZES.BASE,
|
|
marginVertical: theme.SIZES.BASE / 2,
|
|
borderWidth: 0
|
|
},
|
|
categoryTitle: {
|
|
height: "100%",
|
|
paddingHorizontal: theme.SIZES.BASE,
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
imageBlock: {
|
|
overflow: "hidden",
|
|
borderRadius: 4
|
|
},
|
|
shadow: {
|
|
shadowColor: theme.COLORS.BLACK,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowRadius: 3,
|
|
shadowOpacity: 0.1,
|
|
elevation: 2
|
|
}
|
|
});
|