Managing App-wide State with Context API, Redux Toolkit

App.js

@@ -4,12 +4,14 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {Ionicons} from '@expo/vector-icons';
+import {Provider} from 'react-redux';
 
 import CategoriesScreen from './screens/CategoriesScreen';
 import MealsOverviewScreen from './screens/MealsOverviewScreen';
 import MealDetailScreen from './screens/MealDetailScreen';
 import FavoritesScreen from './screens/FavoritesScreen';
-import FavoritesContextProvider from './store/context/favorites-context';
+// import FavoritesContextProvider from './store/context/favorites-context';
+import { store } from './store/redux/store';
 
 export default function App() {
 
@@ -48,7 +50,8 @@ export default function App() {
   return (
    <>
     <StatusBar style='light'/>
-    <FavoritesContextProvider>
+    <Provider store={store}>
+    {/* <FavoritesContextProvider> */}
     <NavigationContainer>
       <Stack.Navigator screenOptions={{
                   headerStyle: { backgroundColor: '#351401'},
@@ -83,7 +86,8 @@ export default function App() {
         />
       </Stack.Navigator>
     </NavigationContainer>
-    </FavoritesContextProvider>
+    {/* </FavoritesContextProvider> */}
+    </Provider>
    </>
   );
 }

components/MealItem.js → components/MealsList/MealItem.js

@@ -1,6 +1,6 @@
 import { View, Pressable, Text, Image, StyleSheet, Platform } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import MealDetails from "./MealDetails";
+import MealDetails from "../MealDetails";
 
 
 export default function MealItem({id, title, imageUrl, duration, complexity, affordability}) {

components/MealsList/MealsList.js

@@ -0,0 +1,36 @@
+import {View, FlatList, StyleSheet} from 'react-native';
+import MealItem from './MealItem';
+
+function MealsList({items}) {
+    function renderMealItem(itemData) {
+        const item = itemData.item;
+
+        const mealItemProps = {
+            id:item.id,
+            title: item.title,
+            imageUrl: item.imageUrl,
+            affordability: item.affordability,
+            complexity: item.complexity,
+            duration: item.duration,           
+        };
+
+        return <MealItem {...mealItemProps}/>
+    }
+
+
+  return (
+    <View style={styles.container}>
+        <FlatList data={items} keyExtractor={(item) => item.id}  renderItem={renderMealItem}/>
+    </View>
+  )
+}
+
+export default MealsList
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 16
+    }
+});