import * as React from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, ScrollView, StyleSheet, Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ListScreen from './screens/ListScreen';
import ItemScreen from './screens/ItemScreen';
import AddItemScreen from './screens/AddItemScreen';

const Stack = createNativeStackNavigator();
const meal = require('./images/breakfast.png');
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="ListScreen">
         <Stack.Screen
          name="ListScreen"
          component={ListScreen}
          options={{
            title: 'Shopping Lists', 
            headerStyle: {
              backgroundColor: 'white', 
            },
            headerTintColor: 'black', 
            headerTitleStyle: {
              fontWeight: 'normal',
              fontFamily: 'Poppins-SemiBold'
            },
          }}
        />
        <Stack.Screen
          name="ItemScreen"
          component={ItemScreen}
          options={{
            title: 'List name', 
            headerStyle: {
              backgroundColor: 'white', 
            },
            headerTintColor: 'black', 
            headerTitleStyle: {
              fontWeight: 'normal',
              fontFamily: 'Poppins-SemiBold'
            },
          }}
        />
        <Stack.Screen
          name="AddItemScreen"
          component={AddItemScreen}
          options={{
            title: 'Add new item', 
            headerStyle: {
              backgroundColor: 'white', 
            },
            headerTintColor: 'black', 
            headerTitleStyle: {
              fontWeight: 'normal',
              fontFamily: 'Poppins-SemiBold'
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;