// Import the useState hook from React for state management
import { useState } from 'react';
// Import required components from react-native library
import {
StyleSheet, // For creating component styles
Text, // For displaying text
Image, // For displaying images
ScrollView, // For making content scrollable
View, // For layout and grouping components
Button // For rendering buttons
} from 'react-native';
// Define image URLs for each technology
const image1 =
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg';
const image2 =
'https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp';
const image3 =
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305183140/Javascript.jpg';
const image4 =
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310153232/ReactJS-Tutorial.jpg';
// Define the main App component
const App = () => {
// Initialize state to keep track of votes for each image
const [votes, setVotes] = useState({
image1: 0, // Votes for HTML
image2: 0, // Votes for CSS
image3: 0, // Votes for Javascript
image4: 0, // Votes for React
});
// Function to increment vote count for a given image
const castVote = (imageKey) => {
setVotes((prevVotes) => ({
...prevVotes, // Copy previous votes
[imageKey]: prevVotes[imageKey] + 1, // Increment selected image's vote
}));
};
// Render the UI
return (
// ScrollView allows vertical scrolling of content
<ScrollView contentContainerStyle={styles.container}>
{/* Title text */}
<Text style={styles.title}>Vote a Technology</Text>
{/* First row: HTML and CSS */}
<View style={styles.imageBtnContainer}>
{/* HTML section */}
<View style={styles.imageContainer}>
{/* Display HTML image */}
<Image source={{ uri: image1 }}
style={styles.image} />
{/* Button to vote for HTML */}
<Button
title="Vote for HTML"
onPress={() => castVote('image1')}
style={styles.button}
/>
{/* Display vote count for HTML */}
<View style={styles.voteContainer}>
<Text style={styles.voteText}>Votes:
{votes.image1}</Text>
</View>
</View>
{/* CSS section */}
<View style={styles.imageContainer}>
{/* Display CSS image */}
<Image source={{ uri: image2 }}
style={styles.image} />
{/* Button to vote for CSS */}
<Button
title="Vote for CSS"
onPress={() => castVote('image2')}
style={styles.button}
/>
{/* Display vote count for CSS */}
<View style={styles.voteContainer}>
<Text style={styles.voteText}>Votes:
{votes.image2}</Text>
</View>
</View>
</View>
{/* Second row: Javascript and React */}
<View style={styles.imageBtnContainer}>
{/* Javascript section */}
<View style={styles.imageContainer}>
{/* Display Javascript image */}
<Image source={{ uri: image3 }}
style={styles.image} />
{/* Button to vote for Javascript */}
<Button
title="Vote for Javascript"
onPress={() => castVote('image3')}
style={styles.button}
/>
{/* Display vote count for Javascript */}
<View style={styles.voteContainer}>
<Text style={styles.voteText}>Votes:
{votes.image3}</Text>
</View>
</View>
{/* React section */}
<View style={styles.imageContainer}>
{/* Display React image */}
<Image source={{ uri: image4 }}
style={styles.image} />
{/* Button to vote for React */}
<Button
title="Vote for React"
onPress={() => castVote('image4')}
style={styles.button}
/>
{/* Display vote count for React */}
<View style={styles.voteContainer}>
<Text style={styles.voteText}>
Votes: {votes.image4}
</Text>
</View>
</View>
</View>
</ScrollView>
);
};
// Define styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take up full available space
alignItems: 'center', // Center items horizontally
backgroundColor: '#fff', // Set background color to white
padding: 20, // Add padding around content
justifyContent: 'center', // Center items vertically
},
title: {
fontSize: 40, // Large font size for title
fontWeight: 'bold', // Bold text
marginVertical: 40, // Vertical margin above and below
color: 'black', // Text color
},
imageBtnContainer: {
flexDirection: 'row', // Arrange children in a row
justifyContent: 'space-between', // Space between items
marginBottom: 10, // Margin below the row
},
imageContainer: {
alignItems: 'center', // Center items horizontally
marginRight: 10, // Margin to the right of each image
},
image: {
width: 150, // Image width
height: 150, // Image height
resizeMode: 'cover', // Cover the area of the image
marginBottom: 10, // Margin below the image
},
voteContainer: {
backgroundColor: '#8EACCD', // Background color for vote box
padding: 5, // Padding inside vote box
borderRadius: 5, // Rounded corners
marginTop: 10 // Margin above the vote box
},
voteText: {
fontSize: 16, // Font size for vote count
fontWeight: 'bold', // Bold text
color: 'white', // Text color
},
});
// Export the App component as default
export default App;