finished product

App.tsx

@@ -28,6 +28,8 @@ import {
 import { Provider } from 'react-redux';
 import { store } from './src/store/store';
 import Navigation from './src/navigation';
+import { useIsDarkMode } from './src/hooks/useIsDarkMode';
+import { COLORS } from './src/constants';
 
 // type SectionProps = PropsWithChildren<{
 //   title: string;
@@ -61,6 +63,7 @@ import Navigation from './src/navigation';
 
 function App(): JSX.Element {
   // const isDarkMode = useColorScheme() === 'dark';
+  const isDark = useIsDarkMode();
 
   // const backgroundStyle = {
   //   backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
@@ -102,30 +105,30 @@ function App(): JSX.Element {
     //   </ScrollView>
     // </SafeAreaView>
     <Provider store={store}>
-      <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 , backgroundColor : isDark ? COLORS.primary : COLORS.white }}>
         <Navigation />
       </View>
     </Provider>
   );
 }
 
 const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
+  // sectionContainer: {
+  //   marginTop: 32,
+  //   paddingHorizontal: 24,
+  // },
+  // sectionTitle: {
+  //   fontSize: 24,
+  //   fontWeight: '600',
+  // },
+  // sectionDescription: {
+  //   marginTop: 8,
+  //   fontSize: 18,
+  //   fontWeight: '400',
+  // },
+  // highlight: {
+  //   fontWeight: '700',
+  // },
 });
 
 export default App;

src/components/HomeComponents/categoriesList/index.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { SIZES } from '../../../constants'
+import { useGetAllCategoriesQuery } from '../../../store/slices/productSlice'
+import { FlatList } from 'react-native'
+import { ListRenderItem } from 'react-native'
+import CategoryBtn from '../categoryBtn'
+
+interface props {
+    selected: string,
+    setSelected: (category: string) => void
+}
+const CategoriesList = ({ selected, setSelected }: props) => {
+    const { data } = useGetAllCategoriesQuery();
+
+    const selectCategory = (cat: string) => {
+        setSelected(cat);
+    }
+    const listRenderer: ListRenderItem<string> = ({ item }) => (<CategoryBtn selectedCategory={selected} selectCategory={selectCategory} category={item} />);
+    return (
+        <View style={styles.container}>
+            {data ?
+                <FlatList
+                    data={["All", ...data]}
+                    renderItem={listRenderer}
+                    keyExtractor={(item) => item}
+                    showsHorizontalScrollIndicator={false}
+                    horizontal
+                /> : null}
+        </View>
+    )
+}
+
+export default CategoriesList
+
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: SIZES.margin
+    }
+})

src/components/HomeComponents/categoryBtn/index.tsx

@@ -0,0 +1,22 @@
+import { View, Text, TouchableOpacity } from 'react-native'
+import React from 'react'
+import { useIsDarkMode } from '../../../hooks/useIsDarkMode';
+import styles from './styles';
+import { COLORS } from '../../../constants';
+
+interface props {
+    selectedCategory: string,
+    selectCategory: (category: string) => void,
+    category: string
+}
+export default function CategoryBtn({ selectCategory, selectedCategory, category }: props) {
+    const isSelected = category === selectedCategory;
+    const isDark = useIsDarkMode();
+    return (
+        <TouchableOpacity
+            style={[styles.btn, { backgroundColor: isSelected && isDark ? COLORS.white : isSelected && !isDark ? COLORS.primary : !isSelected && isDark ? COLORS.primary : COLORS.white }]}
+            onPress={() => selectCategory(category)}>
+            <Text style={[styles.txt, { color: isSelected && isDark ? COLORS.black : isSelected && !isDark ? COLORS.white : !isSelected && isDark ? COLORS.white : COLORS.primary }]}>{category}</Text>
+        </TouchableOpacity >
+    )
+}

src/components/HomeComponents/categoryBtn/styles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { FONTS, SIZES } from "../../../constants";
+
+const styles = StyleSheet.create({
+    btn: {
+        marginHorizontal: 1.5 * SIZES.padding2,
+        paddingVertical:1.5* SIZES.padding,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: SIZES.btnRadius,
+        paddingHorizontal:1.5* SIZES.padding2
+    },
+    txt: {
+        ...FONTS.body3
+    }
+});
+
+export default styles;

src/components/HomeComponents/discountSec/index.tsx

@@ -0,0 +1,15 @@
+import { View, Text, Image } from 'react-native'
+import React from 'react'
+import styles from './styles'
+import { images } from '../../../constants'
+
+export default function DiscountSec() {
+    return (
+        <View style={styles.container}>
+            <Image
+                source={images.discountImg}
+                resizeMode={"cover"}
+                style={styles.img} />
+        </View>
+    )
+}

src/components/HomeComponents/discountSec/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { SIZES } from "../../../constants";
+
+const styles = StyleSheet.create({
+    container : {
+        width : SIZES.fullWidth,
+        paddingHorizontal :1.5* SIZES.padding2,
+        marginVertical : SIZES.margin
+    },
+    img : {
+        width : SIZES.fullWidth,
+        height : 0.25 * SIZES.fullScreenHeight,
+        borderRadius : SIZES.radius2
+    }
+});
+
+export default styles;

src/components/HomeComponents/header/index.tsx

@@ -0,0 +1,26 @@
+import { View, Text, TouchableOpacity } from 'react-native'
+import React from 'react'
+import styles from './styles'
+import Icon from 'react-native-vector-icons/Ionicons'
+import AnotherIcon from 'react-native-vector-icons/Feather'
+import { useIsDarkMode } from '../../../hooks/useIsDarkMode'
+import { COLORS, SIZES } from '../../../constants'
+
+export default function HomeHeader() {
+    const isDark = useIsDarkMode();
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity>
+                <Icon name='menu-outline' color={isDark ? COLORS.white : COLORS.black} size={2 * SIZES.iconSize2} />
+            </TouchableOpacity>
+            <View style={styles.otherIcons}>
+                <TouchableOpacity style={styles.iconMargin}>
+                    <AnotherIcon name='search' color={isDark ? COLORS.white : COLORS.black} size={1.5 * SIZES.iconSize2} />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.iconMargin}>
+                    <AnotherIcon name='shopping-bag' color={isDark ? COLORS.white : COLORS.black} size={1.5 * SIZES.iconSize2} />
+                </TouchableOpacity >
+            </View>
+        </View>
+    )
+}

src/components/HomeComponents/header/styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+import { COLORS, SIZES } from "../../../constants";
+
+const styles = StyleSheet.create({
+    container : {
+        paddingVertical : SIZES.padding,
+        width : SIZES.fullWidth,
+        flexDirection : "row",
+        justifyContent : "space-between",
+        marginVertical : SIZES.margin,
+        backgroundColor : COLORS.transparent,
+        paddingHorizontal :1.5* SIZES.padding2,
+        alignItems : "center"
+    },
+    iconMargin : {
+        marginHorizontal : 0.8 *SIZES.margin2
+    },
+    otherIcons : {
+        flexDirection : "row"
+    }
+});
+
+
+export default styles

src/components/HomeComponents/headerTitle/index.tsx

@@ -0,0 +1,18 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import styles from './style'
+import { useIsDarkMode } from '../../../hooks/useIsDarkMode'
+import { COLORS } from '../../../constants'
+
+interface props {
+    title : string
+}
+
+export default function HeaderTitle({title} : props) {
+    const isDark = useIsDarkMode();
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title , {color : isDark? COLORS.white : COLORS.black}]}>{title}</Text>
+    </View>
+  )
+}

src/components/HomeComponents/headerTitle/style.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { FONTS, SIZES } from "../../../constants";
+
+const styles  = StyleSheet.create({
+    container : {
+        paddingHorizontal : 1.5 * SIZES.padding2,
+        paddingVertical : SIZES.padding,
+        marginVertical : SIZES.margin,
+        justifyContent : "center",
+        width : SIZES.fullWidth
+    },
+    title : {
+        ...FONTS.h1,
+        fontWeight : "800"
+    }
+});
+
+export default styles;

src/components/HomeComponents/productCard/index.tsx

@@ -0,0 +1,31 @@
+import { View, Text, Pressable } from 'react-native'
+import React from 'react'
+import { Product } from '../../../types/product'
+import styles from './styles'
+import { IconButton } from '@react-native-material/core'
+import Icon from 'react-native-vector-icons/FontAwesome'
+import { Image } from 'react-native'
+import { SIZES } from '../../../constants'
+
+interface props {
+    product: Product
+}
+export default function ProductCard({ product }: props) {
+    return (
+        <Pressable style={styles.procuctCard}>
+            <View style={styles.imgContainer}>
+                <IconButton icon={<Icon name='heart-o' size={SIZES.iconSize} />} style={styles.iconBtn} />
+                <Image
+                    source={{ uri: product.image }}
+                    style={styles.img}
+                />
+            </View>
+            <Text style={styles.name}>
+                {product.title}
+            </Text>
+            <Text style={styles.price}>
+                ${product.price}
+            </Text>
+        </Pressable>
+    )
+}

src/components/HomeComponents/productCard/styles.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from "react-native";
+import { COLORS, FONTS, SIZES } from "../../../constants";
+
+const styles = StyleSheet.create({
+    procuctCard: {
+        position: "relative",
+        alignItems: "center",
+        marginHorizontal : 1.5 *SIZES.padding2
+    },
+    imgContainer: {
+        backgroundColor: COLORS.socendry,
+        width: 200,
+        height: 250,
+        borderRadius: SIZES.radius2,
+        alignItems: "center",
+        justifyContent: "flex-end"
+    },
+    img: {
+        width: 150,
+        height: 200,
+        resizeMode: "contain"
+    },
+    iconBtn: {
+        position: "absolute",
+        top: 10,
+        right: 15
+    },
+    favIcon: {
+        width: SIZES.iconSize,
+        height: SIZES.iconSize,
+    },
+    name: {
+        color: COLORS.black,
+        ...FONTS.body4,
+        marginVertical: 2* SIZES.margin,
+        maxWidth : 150,
+        textAlign : "center"
+    },
+    price: {
+        color: COLORS.primary,
+        ...FONTS.h3,
+        fontWeight: "800"
+    }
+});
+
+export default styles;

src/components/HomeComponents/productsList/index.tsx

@@ -0,0 +1,22 @@
+import { View, Text, ListRenderItem, FlatList } from 'react-native'
+import React from 'react'
+import { Product } from '../../../types/product'
+import ProductCard from '../productCard'
+import { SIZES } from '../../../constants'
+
+interface props {
+    products: Product[]
+}
+export default function ProductsList({ products }: props) {
+    const renderItems: ListRenderItem<Product> = ({ item }) => (<ProductCard product={item} />)
+    return (
+        <View style={{ marginVertical: SIZES.margin }}>
+            <FlatList
+                data={products}
+                renderItem={renderItems}
+                keyExtractor={(item) => item.id.toString()}
+                horizontal
+                showsHorizontalScrollIndicator={false} />
+        </View>
+    )
+}

src/constants/images.ts

@@ -0,0 +1,6 @@
+export const discountImg = require('../../assets/images/discountPic.png');
+
+
+export default {
+    discountImg,
+}