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.

Preview of final output: Let us have a look at how the final output will look like.

Preview

Prerequisite:

• React Native
• React Native State
• React Native Props

Approach to create 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 attractive user interface.
• we added a poster to the top of the app and added a search destination button by which users can search destinations.
• we also added a featured destination horizontal flatlist at the last of the app where we can add all popular places.

Steps to Create React Native Application:

Step 1: Create a react native application by using this command in the command prompt

React-native init TourApp

Step: 2 We have to download some dependencies which requires for our app. We use navigation in our app to go for one screen to another screen. 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 3: We will use some Icons in our app . so, we will install dependency for icon

npm i react-native-vector-icons

Project Structure:

Structure of project

The updated dependencies in package.json file will look like:

"dependencies": {
    "expo-constants": "~13.2.4",
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "react-native-screens": "~3.15.0",
    "@react-navigation/native": "*",
    "@react-navigation/native-stack": "*",
    "react-native-safe-area-context": "4.3.1"
}

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

Javascript

//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;

Javascript

//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;

Javascript

//DestinationScreen

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;

Step to run the Project:

Step 1: Depending on your operating system, type the following command

• For android:

React-native run-android

• For IOS:

React-native run-ios

Output:

output