Rout screen

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "Ionicons",
+        "Signup"
+    ]
+}

App.tsx

@@ -1,17 +1,26 @@
-
+import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import Navigation from './Navigation/Navigation'
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native';
+import { Colors } from './styles';
+import { CartProvider } from './Components/Context/CartContext';
 
 const Stack = createNativeStackNavigator();
 
-
 export default function App() {
   return (
-    <>
-      <StatusBar style="light" />
-      <Navigation />
-    </>
+    <NavigationContainer>
+      <CartProvider>
+        <SafeAreaView style={{ flex: 1, backgroundColor: Colors.background}}>
+          <StatusBar style="light" />
+          {/* SO THE CONTENT WONT BE ABOVE STATUS BAR */}
+          <View style={{ marginTop: 23}}/> 
+          <Navigation />
+        </SafeAreaView>
+      </CartProvider>
+    </NavigationContainer>
   );
 }

Components/BackButton/BackButton.tsx

@@ -0,0 +1,15 @@
+import { TouchableOpacity, View, Image, Pressable } from "react-native";
+import styles from "./Styles";
+
+function BackButton ({action}:any) {
+
+    return(
+        <View>
+            <TouchableOpacity onPress={action}> 
+                <Image source={require('../../assets/arrow.png')} style={styles.arrowButton}/>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+export default BackButton;

Components/BackButton/Styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    arrowButton: {
+        padding: 5,
+        width: 30,
+        resizeMode: 'contain',
+    },
+  });
+
+  export default styles

Components/ButtonRemove/ButtonRemove.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, View, Image, Text, StyleSheet } from 'react-native';
+import styles from './Styles';
+
+function ButtonRemove({ onPress }: any) {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View style={styles.container}>
+        <Text style={styles.text}>-</Text> 
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default ButtonRemove;

Components/ButtonRemove/Styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+import { Colors } from "../../styles";
+
+const styles = StyleSheet.create({
+container: {
+    position: 'absolute',
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: Colors.removeButton,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: 'black',
+    shadowOffset: {width: 1, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 2, //ANDROID
+  },
+  text:{
+    fontSize: 48,
+    fontWeight: '600',
+    color: Colors.cardTitle,
+    textAlign: 'center',
+    lineHeight: 52,
+  },
+
+});
+
+export default styles;

Components/CartButton/CartButton.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, View, Image, Text, StyleSheet } from 'react-native';
+import styles from './Styles';
+import { CartContext } from '../Context/CartContext';
+
+function CartButton({ onPress, cartCount }: any) {
+  const cartCounter = useContext(CartContext);
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Image source={require('../../assets/cart-icon.png')} style={styles.cartButton} />
+      <View style={styles.badge}>
+        <Text style={styles.badgeText}>{cartCounter.cards.length}</Text> 
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default CartButton;

Components/CartButton/Styles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  cartButton: {
+    width: 28,
+    height: 28,
+    position: 'absolute'
+  },
+  badge: {
+    position: 'relative',
+    left: 17,
+    bottom: 4,
+    backgroundColor: 'green',
+    borderRadius: 10,
+    width: 15,
+    height: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeText: {
+    color: 'white',
+    fontSize: 9,
+  },
+});
+
+export default styles;

Components/Context/CartContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useState } from "react";
+
+type CardData = {
+    id: number;
+    title: string;
+    price: number;
+    image: string;
+    description: string;
+};
+
+type CartContextType = {
+  cards: CardData[];
+  addCard: (card: CardData) => void;
+  removeCard: (cardId: number) => void;
+  clearCart: () => void;
+};
+
+export const CartContext = createContext<CartContextType>({
+  cards: [],
+  addCard: () => {},
+  removeCard: () => {},
+  clearCart: () => {},
+});
+
+export const CartProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+  const [cards, setCards] = useState<CardData[]>([]);
+
+  const addCard = (card: CardData) => {
+    setCards((prevCards) => [...prevCards, card]);
+  };
+
+  const removeCard = (cardId: number) => {
+    setCards((prevCards) => prevCards.filter((card) => card.id !== cardId));
+  };
+
+  const clearCart = ()=>{
+    setCards([]);
+  }
+
+  return (
+    <CartContext.Provider value={{ cards, addCard ,removeCard, clearCart}}>
+      {children}
+    </CartContext.Provider>
+  );
+};

Components/FavoriteButton/FavoriteButton.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Colors } from "../../styles/index";
+
+type Props ={
+  size: number,
+}
+const FavoriteButton = ({size}:Props) => {
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  const handlePress = () => {
+    setIsFavorite(!isFavorite);
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <View>
+        <Ionicons
+          name={isFavorite ? "heart" : "heart-outline"}
+          size={size}
+          color={isFavorite ? Colors.favoriteButton : Colors.favoriteButton}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default FavoriteButton;

Components/GridCard/GridCard.tsx

@@ -0,0 +1,74 @@
+import { Text, View, FlatList, Image, TouchableOpacity } from "react-native";
+import styles from "./Styles";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import FavoriteButton from "../FavoriteButton/FavoriteButton";
+import { useNavigation } from "@react-navigation/native";
+import { PriceCardHome } from "../PriceCardHome/PriceCardHome";
+
+type IconData = {
+  id: number;
+  title: string;
+  price: number;
+  image: string;
+  description: string;
+};
+
+const GridCard = (): JSX.Element => {
+  const [cardsData, setCardsData] = useState<IconData[]>([]);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    fetchCardsData();
+  }, []);
+
+  const fetchCardsData = async () => {
+    try {
+      const response = await axios.get("https://fakestoreapi.com/products/");
+      setCardsData(response.data);
+    } catch (error) {
+      console.error("Error fetching data: ", error);
+    }
+  };
+
+  const handleCardPress = (item: IconData) => {
+    navigation.navigate("ProductScreen", {
+      id: item.id,
+      title: item.title,
+      price: item.price,
+      image: item.image,
+      description: item.description,
+    });
+  };
+  const renderCard = ({ item }: { item: IconData }) => (
+    <TouchableOpacity style={styles.cardContainer} onPress={() => handleCardPress(item)}>
+      <View style={styles.card}>
+        <Text style={styles.productTitle} numberOfLines={1}>
+          {item.title}
+        </Text>
+        <View style={styles.imageContainer}>
+          <Image source={{ uri: item.image }} style={styles.cardImage} resizeMode="contain" />
+        </View>
+        <View style={styles.priceAndFavoriteContainer}>
+          <View style={styles.priceContainer}>
+            <PriceCardHome priceText={"R$"} priceNumber={item.price} />
+          </View>
+          <View>
+            <FavoriteButton size={33} />
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <FlatList
+      data={cardsData}
+      numColumns={2}
+      renderItem={renderCard}
+      keyExtractor={(item) => item.id.toString()}
+    />
+  );
+};
+
+export default GridCard;

Components/GridCard/Styles.ts

@@ -0,0 +1,47 @@
+import { Colors } from "../../styles/index";
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    flex: 1,
+    backgroundColor: Colors.white,
+    height: 226,
+    width: 186,
+    margin: 5,
+    borderRadius: 10,
+    padding: 5,
+    justifyContent: 'center',
+  },
+  card :{
+    alignItems: 'center',
+  },
+  imageContainer: {
+    marginBottom: 10,
+  },
+  cardImage: {
+    alignSelf: "center",
+    width: 120,
+    height: 120,
+    top: 14,
+    marginBottom: 10,
+  },
+  productTitle: {
+    textAlign: 'left',
+    color: Colors.background,
+    fontSize: 12,
+    fontWeight: "700",
+    width: 145,
+  },
+
+  priceAndFavoriteContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 4,
+  },
+  priceContainer:{
+    marginRight: 10,
+  }
+});
+
+export default styles;

Components/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,18 @@
+import { TouchableOpacity, View, Text } from "react-native";
+import styles from "./Styles";
+
+function NotificationCard({ children, onPress}: any) {
+    return(
+        <View style={styles.container}>
+            <View style={styles.textContainer}>
+                <Text style={styles.cardTitle}>Good!</Text>
+                <Text style={styles.cardText}>{children}</Text>
+            </View>
+            <TouchableOpacity onPress={onPress} style={styles.okContainer}> 
+                <Text style={styles.okText}>OK</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+export default NotificationCard;