Scribd
Upload
5 views9 pages

Maharashtra Tourism App Overview

Uploaded by

randacc0008
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views9 pages

Maharashtra Tourism App Overview

Uploaded by

randacc0008
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

// App.

js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import IntroScreen from './screens/IntroScreen';
import AuthScreen from './screens/AuthScreen';
import HomeScreen from './screens/HomeScreen';
import DestinationScreen from './screens/DestinationScreen';

const Stack = createNativeStackNavigator();

export default function App() {


return (
<NavigationContainer>
<[Link]
initialRouteName="Intro"
screenOptions={{
headerStyle: {
backgroundColor: '#FF5733',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<[Link]
name="Intro"
component={IntroScreen}
options={{ headerShown: false }}
/>
<[Link]
name="Auth"
component={AuthScreen}
options={{ title: 'Welcome to MahaTourism' }}
/>
<[Link]
name="Home"
component={HomeScreen}
options={{ title: 'Explore Maharashtra' }}
/>
<[Link]
name="Destination"
component={DestinationScreen}
options={({ route }) => ({ title: [Link] })}
/>
</[Link]>
</NavigationContainer>
);
}

// screens/[Link]
import React, { useEffect } from 'react';
import { View, Text, StyleSheet, Animated, ImageBackground } from 'react-native';

export default function IntroScreen({ navigation }) {


const fadeAnim = new [Link](0);
const slideAnim = new [Link](50);
useEffect(() => {
[Link]([
[Link](fadeAnim, {
toValue: 1,
duration: 2000,
useNativeDriver: true,
}),
[Link](slideAnim, {
toValue: 0,
duration: 1500,
useNativeDriver: true,
}),
]).start(() => {
setTimeout(() => [Link]('Auth'), 2000);
});
}, []);

return (
<View style={[Link]}>
<[Link]
style={[
[Link],
{
opacity: fadeAnim,
transform: [{ translateY: slideAnim }],
},
]}
>
<Text style={[Link]}>MahaTourism</Text>
<Text style={[Link]}>Discover Maharashtra's Beauty</Text>
</[Link]>
</View>
);
}

// screens/[Link]
import React, { useState } from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
ImageBackground,
ScrollView,
} from 'react-native';

export default function AuthScreen({ navigation }) {


const [isLogin, setIsLogin] = useState(true);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = () => {


[Link]('Home');
};

return (
<ScrollView contentContainerStyle={[Link]}>
<View style={[Link]}>
<Text style={[Link]}>
{isLogin ? 'Welcome Back!' : 'Join MahaTourism'}
</Text>

<TextInput
style={[Link]}
placeholder="Email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
/>

<TextInput
style={[Link]}
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry
/>

<TouchableOpacity style={[Link]} onPress={handleSubmit}>


<Text style={[Link]}>
{isLogin ? 'Login' : 'Register'}
</Text>
</TouchableOpacity>

<TouchableOpacity onPress={() => setIsLogin(!isLogin)}>


<Text style={[Link]}>
{isLogin ? "New user? Register here" : "Already registered? Login"}
</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}

// screens/[Link]
import React from 'react';
import {
View,
Text,
ScrollView,
TouchableOpacity,
StyleSheet,
Image,
TextInput,
} from 'react-native';
import { Feather } from '@expo/vector-icons';

export default function HomeScreen({ navigation }) {


const topDestinations = [
{
id: 1,
name: 'Gateway of India, Mumbai',
image: '/placeholder/[Link]',
description: 'Historic arch monument built in 20th century'
},
{
id: 2,
name: 'Ajanta Caves',
image: '/placeholder/[Link]',
description: 'Ancient Buddhist cave monuments'
},
{
id: 3,
name: 'Ellora Caves',
image: '/placeholder/[Link]',
description: 'UNESCO World Heritage site'
},
];

const culturalExperiences = [
{
id: 1,
name: 'Dagdusheth Ganpati, Pune',
image: '/placeholder/[Link]',
description: 'Famous Hindu temple'
},
{
id: 2,
name: 'Kolhapur Palace',
image: '/placeholder/[Link]',
description: 'Historic royal palace'
},
];

const beaches = [
{
id: 1,
name: 'Tarkarli Beach',
image: '/placeholder/[Link]',
description: 'Crystal clear waters'
},
{
id: 2,
name: 'Alibaug Beach',
image: '/placeholder/[Link]',
description: 'Popular weekend getaway'
},
];

return (
<ScrollView style={[Link]}>
<View style={[Link]}>
<Feather name="search" size={24} color="#666" style={[Link]} />
<TextInput
style={[Link]}
placeholder="Search destinations in Maharashtra..."
placeholderTextColor="#666"
/>
</View>

<Text style={[Link]}>Top Destinations</Text>


<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{[Link]((dest) => (
<TouchableOpacity
key={[Link]}
style={[Link]}
onPress={() => [Link]('Destination', dest)}
>
<Image
source={{ uri: `/api/placeholder/300/200` }}
style={[Link]}
/>
<View style={[Link]}>
<Text style={[Link]}>{[Link]}</Text>
<Text style={[Link]}>{[Link]}</Text>
</View>
</TouchableOpacity>
))}
</ScrollView>

<Text style={[Link]}>Cultural Experiences</Text>


<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{[Link]((exp) => (
<TouchableOpacity
key={[Link]}
style={[Link]}
onPress={() => [Link]('Destination', exp)}
>
<Image
source={{ uri: `/api/placeholder/250/150` }}
style={[Link]}
/>
<Text style={[Link]}>{[Link]}</Text>
</TouchableOpacity>
))}
</ScrollView>

<Text style={[Link]}>Beautiful Beaches</Text>


<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{[Link]((beach) => (
<TouchableOpacity
key={[Link]}
style={[Link]}
onPress={() => [Link]('Destination', beach)}
>
<Image
source={{ uri: `/api/placeholder/250/150` }}
style={[Link]}
/>
<Text style={[Link]}>{[Link]}</Text>
</TouchableOpacity>
))}
</ScrollView>
</ScrollView>
);
}

// screens/[Link]
import React from 'react';
import {
ScrollView,
View,
Text,
Image,
StyleSheet,
TouchableOpacity,
} from 'react-native';

export default function DestinationScreen({ route }) {


const { name, description } = [Link];

return (
<ScrollView style={[Link]}>
<Image
source={{ uri: `/api/placeholder/400/300` }}
style={[Link]}
/>
<View style={[Link]}>
<Text style={[Link]}>{name}</Text>
<Text style={[Link]}>{description}</Text>

<Text style={[Link]}>About</Text>
<Text style={[Link]}>
Experience the beauty and cultural heritage of this amazing destination
in Maharashtra.
</Text>

<Text style={[Link]}>Highlights</Text>
<View style={[Link]}>
<Text style={[Link]}>• Rich cultural heritage</Text>
<Text style={[Link]}>• Popular tourist attraction</Text>
<Text style={[Link]}>• Historical significance</Text>
</View>

<TouchableOpacity style={[Link]}>
<Text style={[Link]}>Book Your Visit</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}

// [Link]
const styles = [Link]({
container: {
flex: 1,
backgroundColor: '#fff',
},
content: {
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
title: {
fontSize: 32,
fontWeight: 'bold',
color: '#FF5733',
textAlign: 'center',
},
subtitle: {
fontSize: 18,
color: '#666',
marginTop: 10,
},
formContainer: {
width: '100%',
padding: 20,
alignItems: 'center',
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 30,
color: '#FF5733',
},
input: {
width: '90%',
height: 50,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 10,
paddingHorizontal: 15,
marginBottom: 15,
backgroundColor: '#fff',
},
button: {
width: '90%',
height: 50,
backgroundColor: '#FF5733',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
marginVertical: 10,
elevation: 3,
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
switchText: {
color: '#FF5733',
marginTop: 15,
},
searchContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f5f5f5',
margin: 15,
padding: 10,
borderRadius: 10,
},
searchIcon: {
marginRight: 10,
},
searchInput: {
flex: 1,
fontSize: 16,
},
sectionTitle: {
fontSize: 22,
fontWeight: 'bold',
margin: 15,
color: '#333',
},
destinationCard: {
width: 300,
marginHorizontal: 10,
backgroundColor: '#fff',
borderRadius: 15,
elevation: 5,
marginBottom: 10,
},
destinationImage: {
width: '100%',
height: 200,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
},
destinationInfo: {
padding: 15,
},
destinationName: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 5,
},
destinationDesc: {
color: '#666',
},
experienceCard: {
width: 250,
marginHorizontal: 10,
marginBottom: 10,
},
experienceImage: {
width: '100%',
height: 150,
borderRadius: 10,
},
experienceName: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 5,
},
beachCard: {
width: 250,
marginHorizontal: 10,
marginBottom: 20,
},
beachImage: {
width: '100%',
height: 150,
borderRadius: 10,
},
beachName: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 5,
},
headerImage: {
width: '100%',
height: 300,
},
content: {
padding: 20,
},
description: {
fontSize: 16,
color: '#666',
marginTop: 10,
lineHeight: 24,
},
highlightsList: {
alignSelf: 'stretch',
marginTop: 10,
},
highlight: {
fontSize: 16,
marginBottom: 5,
color: '#333',
},
bookButton: {
backgroundColor: '#FF5733',
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 25,
marginTop: 20,
width: '100%',
alignItems: 'center',
},
bookButtonText: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
},
});

You might also like