Create a Restaurant Website Template using React-Native

// App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import MenuScreen from './screens/MenuScreen';

const Stack = createStackNavigator();

const App = () => {
	return (
		<NavigationContainer>
			<Stack.Navigator initialRouteName="Home">
				<Stack.Screen name="Home" component={HomeScreen} />
				<Stack.Screen name="Menu" component={MenuScreen} />
			</Stack.Navigator>
		</NavigationContainer>
	);
};

export default App;

// HomeScreen.js

import React from 'react';
import { View, Text, ImageBackground, 
		TouchableOpacity, StyleSheet } 
from 'react-native';

const HomeScreen = ({ navigation }) => {
	const bannerImageUrl = 
'https://media.geeksforgeeks.org/wp-content/uploads/20231221010046/GeekforGeeks-(2).jpg';

	return (
		<View style={styles.container}>
			<ImageBackground
				source={{ uri: bannerImageUrl }}
				style={styles.banner}
				resizeMode="cover"
			>

			</ImageBackground>
			<View style={styles.bannerContent}>
				<Text style={styles.bannerText}>Welcome to our</Text>
				<Text style={styles.restaurantName}>Awesome Restaurant</Text>
			</View>

			<TouchableOpacity
				style={styles.viewMenuButton}
				onPress={() => navigation.navigate('Menu')}
			>
				<Text style={styles.buttonText}>View Menu</Text>
			</TouchableOpacity>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,

	},
	banner: {
		width: '100%',
		height: 200,
		borderRadius: 20,
		marginTop: 30,

	},
	bannerContent: {
		backgroundColor: 'lightyellow',
		padding: 20,
		borderRadius: 8,
		marginTop: 20,
	},
	bannerText: {
		fontSize: 24,
		color: 'black',
		fontWeight: 'bold',
		marginLeft: 70,
	},
	restaurantName: {
		fontSize: 32,
		color: 'black',
		fontWeight: 'bold',
		marginTop: 10,
		marginLeft: 30,
	},
	viewMenuButton: {
		backgroundColor: '#FF6347',
		padding: 15,
		borderRadius: 8,
		marginBottom: 20,
		marginLeft: 40,
		marginRight: 40,
		marginTop: 60,
	},
	buttonText: {
		color: '#fff',
		fontSize: 18,
		fontWeight: 'bold',
		textAlign: 'center',
	},
});

export default HomeScreen;

// MenuScreen.js

import React from 'react';
import { View, Text, FlatList, TouchableOpacity, Image, StyleSheet } from 'react-native';

const menuData = [
	{
		id: '1',
		name: 'Classic Burger',
		price: '$10',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231221011226/Your-paragraph-text-(1).jpg',
	},
	{
		id: '2',
		name: 'Vegetarian Pizza',
		price: '$12',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231221011226/Your-paragraph-text-(1).jpg',
	},
	{
		id: '3',
		name: 'Spaghetti Bolognese',
		price: '$15',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231221011226/Your-paragraph-text-(1).jpg',
	},
	{
		id: '4',
		name: 'Chicken Caesar Salad',
		price: '$12',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231221011226/Your-paragraph-text-(1).jpg',
	},
	{
		id: '5',
		name: 'Sushi Platter',
		price: '$18',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231221011226/Your-paragraph-text-(1).jpg',
	},
	{
		id: '6',
		name: 'Chocolate Brownie Sundae',
		price: '$8',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231221011226/Your-paragraph-text-(1).jpg',
	},

];

const MenuScreen = () => {
	const renderItem = ({ item }) => (
		<TouchableOpacity style={styles.menuItem}>
			<Image source={{ uri: item.image }} style={styles.itemImage} />
			<View style={styles.itemDetails}>
				<Text style={styles.itemName}>{item.name}</Text>
				<Text style={styles.itemPrice}>{item.price}</Text>
			</View>
		</TouchableOpacity>
	);

	return (
		<View style={styles.container}>
			<Text style={styles.menuTitle}>Our Menu</Text>
			<FlatList
				data={menuData}
				keyExtractor={(item) => item.id}
				numColumns={2}
				renderItem={renderItem}
				columnWrapperStyle={styles.columnWrapper}
			/>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 16,
	},
	menuTitle: {
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 16,
		color: '#333',
	},
	menuItem: {
		flex: 1,
		margin: 8,
		backgroundColor: '#fff',
		borderRadius: 8,
		overflow: 'hidden',
	},
	itemImage: {
		height: 150,
		borderRadius: 8,
	},
	itemDetails: {
		padding: 10,
	},
	itemName: {
		fontSize: 16,
		fontWeight: 'bold',
		color: '#333',
	},
	itemPrice: {
		fontSize: 14,
		color: '#888',
	},
	columnWrapper: {
		justifyContent: 'space-between',
	},
});

export default MenuScreen;