Create a Voting App using React-Native

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.

Preview Image:

Prerequisites:

• Introduction to React Native
• Introduction React Native Components
• React Native State
• React Native Props
• Expo CLI
• Node.js and npm (Node Package Manager)

Steps to install & configure React Native:

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

npx create-expo-app basicNotes-app

Step 2: After creating your project folder, i.e. basicNotes-app, use the following command to navigate to it:

cd basicNotes-app

Step 3: Open App.js file, open it and paste the source code into it.

Example: In this example, we create an app displaying images of programming languages with voting buttons. The useState hook is used to manage the vote count, enabling the castVote function to update votes for each image. The app is structured with a ScrollView and styled using the StyleSheet module. Each image is displayed in its own container with a corresponding vote count.

Javascript

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, Image, ScrollView }
     from 'react-native';

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

const App = () => {
    const [votes, setVotes] = useState({
        image1: 0,
        image2: 0,
        image3: 0,
        image4: 0,
    });

    const castVote = (imageKey) => {
        setVotes((prevVotes) => ({
            ...prevVotes,
            [imageKey]: prevVotes[imageKey] + 1,
        }));
    };

    return (
        <ScrollView contentContainerStyle={styles.container}>
            <Text style={styles.title}>GeeksforGeeks</Text>

            <View style={styles.imageBtnContainer}>
                <View style={styles.imageContainer}>
                    <Image source={{ uri: image1 }}
                        style={styles.image} />
                    <Button
                        title="Vote for HTML"
                        onPress={() => castVote('image1')}
                        style={styles.button}
                    />
                    <View style={styles.voteContainer}>
                        <Text style={styles.voteText}>Votes:
                         {votes.image1}</Text>
                    </View>
                </View>

                <View style={styles.imageContainer}>
                    <Image source={{ uri: image2 }}
                       style={styles.image} />
                    <Button
                        title="Vote for CSS"
                        onPress={() => castVote('image2')}
                        style={styles.button}
                    />
                    <View style={styles.voteContainer}>
                        <Text style={styles.voteText}>Votes:
                          {votes.image2}</Text>
                    </View>
                </View>
            </View>

            <View style={styles.imageBtnContainer}>
                <View style={styles.imageContainer}>
                    <Image source={{ uri: image3 }}
                       style={styles.image} />
                    <Button
                        title="Vote for Javascript"
                        onPress={() => castVote('image3')}
                        style={styles.button}
                    />
                    <View style={styles.voteContainer}>
                        <Text style={styles.voteText}>Votes:
                        {votes.image3}</Text>
                    </View>
                </View>

                <View style={styles.imageContainer}>
                    <Image source={{ uri: image4 }}
                           style={styles.image} />
                    <Button
                        title="Vote for React"
                        onPress={() => castVote('image4')}
                        style={styles.button}
                    />
                    <View style={styles.voteContainer}>
                        <Text style={styles.voteText}>
                            Votes: {votes.image4}
                        </Text>
                    </View>
                </View>
            </View>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#D2E0FB',
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        marginVertical: 20,
        color: 'green'
    },
    imageBtnContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 10,
    },
    imageContainer: {
        alignItems: 'center',
        marginRight: 10,
    },
    image: {
        width: 150,
        height: 150,
        resizeMode: 'cover',
        marginBottom: 10,
    },

    voteContainer: {
        backgroundColor: '#8EACCD',
        padding: 5,
        borderRadius: 5,
        marginTop: 10
    },
    voteText: {
        fontSize: 16,
        fontWeight: 'bold',
        color: 'white',
    },
});

export default App;

Step 4: Go to the Terminal and type the following command to run the react native application.

npx expo start

To run on Android:

npx react-native run-android

To run on IOS:

npx react-native run-ios

Output: