Open In App

Create a Voting App using React-Native

Last Updated : 07 Jun, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Create-a--Voting

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.

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


- Button:

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>


- ScrollView:

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:


Next Article
Create a Voting App using React-Native

G
geekwriter2024
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox