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 }) => (
        <View>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{tag}</Text>
          {groupedRecipes[tag].map(recipe => (
            <TouchableOpacity
              key={recipe.id}
              onPress={() => navigation.navigate('RecipeDetail', { recipe })}
            >
              <Text>{recipe.title}</Text>
            </TouchableOpacity>
          ))}
        </View>
      )}
    />
  );
};

export default RecipeIndexScreen;


// 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 }) => (
        <View>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{tag}</Text>
          {groupedRecipes[tag].map(recipe => (
            <TouchableOpacity
              key={recipe.id}
              onPress={() => navigation.navigate('RecipeDetail', { recipe })}
            >
              <Text>{recipe.title}</Text>
            </TouchableOpacity>
          ))}
        </View>
      )}
    />
  );
};

export default RecipeIndexScreen;