Create a Voting App using React-Native
Last Updated :
25 May, 2025
Voting involves assessing multiple entities based on specific criteria. This article guides the creation of a basic voting app, where users can compare and evaluate options. The application allows users to make choices, making it a valuable tool for decision-making and gathering opinions. We will create a Voting app using React-Native.
Playground
Note: This Section is to interact with the app which you are going to build.
Prerequisites:
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
- Approach:
We are making an app that shows image of different technology, and users can vote on them. We use the useState hook to keep track of the vote count. When users click the vote button, the castVote function updates the votes for each image. The app has a ScrollView to let users scroll through the images, and we use StyleSheet to make it look nice. Each image is placed in its box along with the vote count.
Let's dive into the code in detail.
- Import libraries:
Import required libraries at the top of the file.
JavaScript
// 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';
- StyleSheet:
Create a StyleSheet to style components like container, title, imageBtnContainer, etc.
JavaScript
// 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
},
});
- Title Text:
This title explains what the app does. We use the text "Vote a Technology" to show that the app is to Vote a Technology.
JavaScript
{/* Title text */}
<Text style={styles.title}>Vote a Technology</Text>
- Image URLs:
Define Image URLs globally.
JavaScript
// 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';
- Image Component:
This component is used to display Images.
JavaScript
<Image
source={{ uri: image1 }}
style={styles.image}
/>
This button is for calling the castVote function with the name of the image as a parameter. It will increase the score for that specific image. The button is created by wrapping the Text component inside the Button component, as shown below.
JavaScript
<Button
title="Vote for HTML"
onPress={() => castVote('image1')}
style={styles.button}
/>
- castVote function:
This function accepts an image name as a parameter. It looks for that image in a list of votes and increases its score by 1. The score for all images starts at zero by default, and this is done using the setVotes function from useState.
JavaScript
// 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
}));
};
- Display Score:
To show the score of an image, you can use the list called votes. For example, writing votes.image1 will give you the score (number of votes) for that image. This is done by wrapping the Text component in a View component to make it look like a container.
JavaScript
{/* Display vote count for HTML */}
<View style={styles.voteContainer}>
<Text style={styles.voteText}>Votes:
{votes.image1}</Text>
</View>
As we discussed earlier every technology have an image, button, and score container , so wrap all with ScrollView to make all the UI element scrollable.
JavaScript
// 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>
Now, return ScrollView from the App component, and place all methods and useStates within the App component. Ensure to export the App.
Complete Source Code
App.js:
App.js
// 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;
Output:
Similar Reads
Create a Voice Notes App using React-Native
We are going to build a Voice Notes app that will allow us to save our voice as a recording in our application. It is similar to a notes app but we will have our voice as notes. We can play the voice recordings, record them, and delete them. It leverages React-Native's cross-platform capabilities to
4 min read
Create a Blog App using React-Native
This article will help you make a simple blog app using React Native. The app lets users add, edit, and delete blog posts, making it easy to manage content. You will learn how to use different React Native features to create a user-friendly design that checks if the input is correct, making sure all
15+ min read
Create a Video Player App using React-Native
React-Native is an open-source JavaScript framework used to broaden cross-platform packages i.e., you may write code in React-Native and publish it as an Android or IOS app. In this article, we will build a Video Player app with the usage of React-Native. The app will run on both Android and IOS.Pre
4 min read
Create a Camera App using React-Native
A camera app using react native is a mobile application that is designed to capture photos or videos using the built-in camera functionality of a mobile device. In this article, you will learn how you can create a camera app with simple steps.Output Preview: Let us have a look at how the final appli
3 min read
Create a Chatbot App using React-Native
Creating a chatbot app using React Native will be an exciting project. In this article, we are going to implement a Chatbot App using React Native. Chatbot App is a mobile application that answers the user's questions on the basis of their previous learning or content provided by developers. It help
4 min read
Create a Compass App using React-Native
In this project, we'll create a Compass App using React Native. The app will display real-time compass heading information, along with additional details such as cardinal direction. The user interface will include a rotating compass image to provide a visual representation of the device's orientatio
3 min read
Create a Video Streaming App using React-Native
React-Native is an open-source JavaScript framework used to broaden cross-platform packages i.e., you may write code in React-Native and publish it as an Android or IOS app. In this article, we will build a Video Streaming app using React-Native. The app will run on both Android and IOS.Preview of f
3 min read
Create a Location Sharing App using React-Native
In this article, we are going to build a step-by-step Location Sharing App using React-Native. A Location Sharing App developed with React-Native allows users to share their real-time location with others. It leverages React-Native's cross-platform capabilities to create a mobile application that fa
4 min read
Create Timeline App using React-Native
A Timeline App is a software application designed to display events in chronological order. The primary purpose of this timeline app is to present a visual representation of a sequence of events. In this article, we are going to implement a TimeLine App using React Native. It allows users to easily
4 min read
Create a Portfolio App using React-Native
In this article, we are going to Create a portfolio app using React Native. The portfolio app is a simple application that is a collection of a person's qualifications, achievements, work samples, and other relevant materials. It is used to demonstrate one's abilities and suitability for a particula
5 min read