Create Tour and Travels website template using React-Native

The tour and travel app template with React Native offers a user-friendly interface with various options required in any travel app. In this article, we will create a basic Tour and Travels website template using React Native.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Playground

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

Prerequisite:

Approach to create a Tour and Travels website template:

The Tour and Travels website template app is a simple application that is a collection of destinations, famous places, etc.
In this app, we created a beautiful home page with an attractive user interface.
We added a poster to the top of the app and included a search destination button, allowing users to search for destinations.
We also added a featured destination horizontal flatlist at the end of the app, where we can add all popular places.

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: Start Coding

Example: Write the below source code into the App.js file.

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 DestinationScreen from './screens/DestinationScreen';

const Stack = createStackNavigator();

function App() {
	return (
		<NavigationContainer>
			<Stack.Navigator
				initialRouteName="Home"
				screenOptions={{
					headerStyle: {
						backgroundColor: '#3498db',
					},
					headerTintColor: '#fff',
					headerTitleStyle: {
						fontWeight: 'bold',
					},
				}}
			>
				<Stack.Screen name="Home" component={HomeScreen} />
				<Stack.Screen name="Destination" component={DestinationScreen} />
			</Stack.Navigator>
		</NavigationContainer>
	);
}

export default App;

Screens/HomeScreen.js

//HomeScreen.js

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

const featuredDestinations = [
	{
		id: '1',
		name: 'Palaces',
		image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20231201163123/2.jpg',
	},
	{
		id: '2',
		name: 'Mountain Retreat',
		image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20231201163123/1.jpg',
	},

];

const HomeScreen = ({ navigation }) => {
	return (
		<View style={styles.container}>
			<Image
				source={{ uri: 
'https://media.geeksforgeeks.org/wp-content/uploads/20231201162358/GeekforGeeks-(1).jpg' }}
				style={styles.image}
			/>
			<Text style={styles.title}>Welcome to Our Travel App</Text>

			<TextInput
				style={styles.searchBar}
				placeholder="Search Destinations"
			/>
			<Button
				title="View Destinations"
				onPress={() => navigation.navigate('Destination')}
			/>

			<Text style={styles.featuredTitle}>Featured Destinations</Text>
			<FlatList
				data={featuredDestinations}
				keyExtractor={(item) => item.id}
				horizontal
				showsHorizontalScrollIndicator={false}
				renderItem={({ item }) => (
					<View style={styles.featuredCard}>
						<Image source={{ uri: item.image }} 
							style={styles.featuredImage} />
						<Text style={styles.featuredName}>{item.name}</Text>
					</View>
				)}
			/>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		padding: 20,
	},
	image: {
		width: 300,
		height: 200,
		marginBottom: 20,
		borderRadius: 10,
	},
	title: {
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 10,
	},

	searchBar: {
		width: '100%',
		height: 40,
		borderColor: '#ccc',
		borderWidth: 1,
		borderRadius: 5,
		paddingHorizontal: 10,
		marginBottom: 20,
	},
	featuredTitle: {
		fontSize: 20,
		fontWeight: 'bold',
		marginTop: 20,
		marginBottom: 10,
	},
	featuredCard: {
		marginRight: 10,
		borderRadius: 10,
		overflow: 'hidden',
	},
	featuredImage: {
		width: 150,
		height: 100,
		borderRadius: 20,
	},
	featuredName: {
		fontSize: 16,
		fontWeight: 'bold',
		marginTop: 5,
	},
});

export default HomeScreen;

Screens/DestinationScreen.js

//DestinationScreen.js

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

const destinations = [
	{
		id: '1',
		name: 'Paris',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231201163123/2.jpg',
	},
	{
		id: '2',
		name: 'New York',
		image: 'https://media.geeksforgeeks.org/wp-content/uploads/20231201163123/1.jpg',
	},
];

const DestinationScreen = () => {
	const [loading, setLoading] = useState(true);
	const [destinationTours, setDestinationTours] = useState([]);

	const fetchToursData = async (selectedDestination) => {
		try {
			await new Promise(resolve => setTimeout(resolve, 1000));
			setDestinationTours(toursData[selectedDestination] || []);
		} catch (error) {
			console.error('Error fetching tours data:', error);
		} finally {
			setLoading(false);
		}
	};

	useEffect(() => {
		const defaultDestination = destinations[0].name;
		fetchToursData(defaultDestination);
	}, []);

	// Removed navigation-related code
	return (
		<View style={styles.container}>
			<Text style={styles.title}>Destinations</Text>

			{loading ? (
				<ActivityIndicator size="large" color="#3498db" />
			) : (
				<FlatList
					data={destinations}
					keyExtractor={(item) => item.id}
					renderItem={({ item }) => (
						<TouchableOpacity
							style={styles.destinationCard}
							onPress={() => {
								fetchToursData(item.name);
								// Removed navigateToTourScreen function call
							}}
						>
							<Image source={{ uri: item.image }} style={styles.destinationImage} />
							<Text style={styles.destinationName}>{item.name}</Text>
						</TouchableOpacity>
					)}
				/>
			)}
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		padding: 10,
	},
	title: {
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 20,
	},
	destinationCard: {
		marginBottom: 20,
		borderRadius: 10,
		overflow: 'hidden',
		elevation: 5,
	},
	destinationImage: {
		width: '250',
		height: 200,
		borderRadius: 10,
	},
	destinationName: {
		fontSize: 18,
		fontWeight: 'bold',
		padding: 10,
		backgroundColor: '#3498db',
		color: '#fff',
	},
});

export default DestinationScreen;