Create a Restaurant Website Template using React-Native

Last Updated : 23 Jul, 2025

The restaurant template app helps customers explore, choose, and order their preferred dishes from restaurants. In this article, we will create a Tour and Travels website template using React Native.

Create-a-Restaurant-Website-Template-using-React-Native

Playground

Note: This Section is to interact with the app which you are going to build.

Prerequisite:

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press "a" as mentioned in the image below.
    • For the Physical Device, download the "Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app.
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Install dependencies

We have to download some dependencies which required for our app. We use navigation in our app to go from one screen to another. So, firstly, we install the navigation dependencies.

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

Step 4: Start Coding

Approach to create a Restaurant Website Template:

  • The Restaurant website template app is a simple application that helps customers explore, choose, and order their preferred dishes from restaurants.
  • In this app, we created a beautiful home page with an attractive user interface.
  • We created a folder named 'screens' for the app to write code in separate components. In the Screens folder, we wrote separate code for the home screen and menu screen so that students can understand the code easily.
  • We added a poster to the top of the app, and also added a view menu option by which users can view the menu of the restaurant.
  • We added a FlatList of dishes with images and prices, by which user can order food according to their preference.

Complete Source Code

App.js 
// 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 
// 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 
// 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;

Output:

Comment

Explore