expo recipe app

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import RecipeIndexScreen from './screens/RecipeIndexScreen';
import RecipeDetailScreen from './screens/RecipeDetailScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Recipes">
        <Stack.Screen name="Recipes" component={RecipeIndexScreen} />
        <Stack.Screen name="RecipeDetail" component={RecipeDetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// data.js export const recipes = [ { id: '1', title: 'Spaghetti Bolognese', image: 'https://example.com/spaghetti.jpg', tags: ['Pasta', 'Italian'], ingredients: ['Spaghetti', 'Ground beef', 'Tomato sauce', 'Onion', 'Garlic'], instructions: 'Boil spaghetti. Cook beef with sauce and onions. Serve hot.', }, { id: '2', title: 'Caesar Salad', image: 'https://example.com/caesar.jpg', tags: ['Salad', 'Healthy'], ingredients: ['Romaine lettuce', 'Croutons', 'Caesar dressing', 'Parmesan cheese'], instructions: 'Combine all ingredients and toss with dressing.', }, ];

// screens/RecipeIndexScreen.js import React, { useEffect, useState } from 'react'; import { View, Text, TouchableOpacity, FlatList } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { recipes } from '../data';

const RecipeIndexScreen = ({ navigation }) => { const [groupedRecipes, setGroupedRecipes] = useState({});

useEffect(() => { async function loadRecipes() { try { await AsyncStorage.setItem('recipes', JSON.stringify(recipes)); const data = await AsyncStorage.getItem('recipes'); const parsedData = JSON.parse(data);

    const grouped = parsedData.reduce((acc, recipe) => {
      recipe.tags.forEach(tag => {
        acc[tag] = acc[tag] ? [...acc[tag], recipe] : [recipe];
      });
      return acc;
    }, {});
    setGroupedRecipes(grouped);
  } catch (error) {
    console.error(error);
  }
}
loadRecipes();   }, []);

return ( <FlatList data={Object.keys(groupedRecipes)} keyExtractor={(item) => item} renderItem={({ item: tag }) => ( <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{tag}</Text> {groupedRecipes[tag].map(recipe => ( <TouchableOpacity key={recipe.id} onPress={() => navigation.navigate('RecipeDetail', { recipe })} > {recipe.title} </TouchableOpacity> ))} )} /> ); };

export default RecipeIndexScreen;

const RecipeIndexScreen = ({ navigation }) => { const [groupedRecipes, setGroupedRecipes] = useState({});

    const grouped = parsedData.reduce((acc, recipe) => {
      recipe.tags.forEach(tag => {
        acc[tag] = acc[tag] ? [...acc[tag], recipe] : [recipe];
      });
      return acc;
    }, {});
    setGroupedRecipes(grouped);
  } catch (error) {
    console.error(error);
  }
}
loadRecipes();   }, []);

export default RecipeIndexScreen;