added navigation connecting redux between product page and product de…

…tails

App.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import { StatusBar, View } from 'react-native';
 import Navigation from './src/navigation/Navigation';
+import { store } from './src/redux/store';
+import { Provider } from 'react-redux';
 
 export default function App() {
   return (
-    <View style={{ flex: 1 }}>
-      <Navigation />
-      <StatusBar />
-    </View>
+    <Provider store={store}>
+      <View style={{ flex: 1 }}>
+        <Navigation />
+        <StatusBar />
+      </View>
+    </Provider>
   );
 }

package.json

@@ -12,13 +12,15 @@
     "@expo/vector-icons": "^13.0.0",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
+    "@reduxjs/toolkit": "^1.9.5",
     "expo": "~48.0.9",
     "expo-app-loading": "^2.1.1",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.6",
+    "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
-    "react-native-safe-area-context": "4.5.0"
+    "react-redux": "^8.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/navigation/Navigation.jsx

@@ -2,18 +2,20 @@ import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { FontAwesome } from '@expo/vector-icons';
-
+import { Feather } from '@expo/vector-icons';
 import ProductScreen from '../screens/ProductScreen';
 import ProductDetailsScreen from '../screens/ProductDetailsScreen';
 import CartScreen from '../screens/CartScreen';
 
 const Stack = createNativeStackNavigator();
 
 const Navigation = () => {
-  const renderCartButton = () => (
-    <TouchableOpacity style={styles.cartIcon}>
-      <FontAwesome name="shopping-cart" size={18} color="black" />
+  const renderCartButton = ({ navigation }) => (
+    <TouchableOpacity
+      style={styles.cartIcon}
+      onPress={() => navigation.navigate('Shopping Cart')}
+    >
+      <Feather name="shopping-cart" size={18} color="black" />
       <Text style={styles.cartIconNumber}>1</Text>
     </TouchableOpacity>
   );
@@ -24,10 +26,11 @@ const Navigation = () => {
         <Stack.Screen
           name="Nike Sneakers"
           component={ProductScreen}
-          options={{
+          options={({ navigation }) => ({
             headerStyle: styles.navigationHeader,
             headerTitleAlign: 'center',
-          }}
+            headerRight: () => renderCartButton({ navigation }),
+          })}
         />
         <Stack.Screen
           name="Product Details"
@@ -37,10 +40,10 @@ const Navigation = () => {
         <Stack.Screen
           name="Shopping Cart"
           component={CartScreen}
-          options={{
-            headerRight: renderCartButton,
+          options={({ navigation }) => ({
+            headerRight: () => renderCartButton({ navigation }),
             headerTitleAlign: 'center',
-          }}
+          })}
         />
       </Stack.Navigator>
     </NavigationContainer>

src/redux/slice/ItemSlice.js

@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit';
+import products from '../../data/products';
+
+const initialState = {
+  value: 0,
+  items: products,
+  selectedProduct: null,
+};
+
+export const itemSlice = createSlice({
+  name: 'items',
+  initialState,
+  reducers: {
+    setSelectedProduct: (state, action) => {
+      const id = action.payload;
+      const itemExists = state.items.find((item) => item.id === id);
+      state.selectedProduct = itemExists;
+    },
+  },
+});
+
+export const { setSelectedProduct } = itemSlice.actions;
+
+export default itemSlice.reducer;

src/redux/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import ItemSlice from './slice/ItemSlice';
+
+export const store = configureStore({
+  reducer: {
+    products: ItemSlice,
+  },
+});