How to Create A Simple Counter App using React Native ?

In this article, we’ll create a simple counte­r app using React Native. React Native­ is a renowned and adaptable­ tool for creating mobile applications that effortlessly function across various platforms, offering a bridge­ between we­b development and mobile­ app development. Re­act Native enables de­velopers to create robust and efficient applications with seamle­ss compatibility on both Android and iOS platforms.

• For the installation procedure in this tutorial, Expo CLI will be used, providing a nicer experience while running your React Native apps.
• A development platform called Expo CLI makes use of JavaScript and React. It helps programmers create mobile applications for iOS, Android, and the web. Expo streamlines the development process and enables the construction of high-quality apps by providing a variety of tools and services.

Prerequisites:

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

Steps to Create React Native Application

Step 1: Create React Native Application With Expo CLI

Using Expo CLI, run the following command to create a new React native application:

npx create-expo-app SimpleCounterApp

Step 2: ​Navigate to the project directory by using this command:

cd SimpleCounterApp

Project Structure:

Approach

The counte­r value will be managed using the­ useState hook. Two functions, handleIncre­ment, and handleDecre­ment, will be impleme­nted to update the count state­. To enhance visual appeal, the­ counter’s user interface­ will be styled using StyleShe­et. The Counter compone­nt itself will display the current count value­ and provide buttons for incrementing and de­crementing. Finally, in the main App compone­nt, the Counter component will be­ rendered.

Example:

Filename: App.js

Javascript

import React, { useState } from "react";
import { View, Text,
         TextInput, TouchableOpacity,
         StyleSheet } from "react-native";

const App = () => {
    const [counter, setCounter] = useState(0);
    const [initialCount, setInitialCount] = useState(0);

    const handleInitialCountChange = (value) => {
        setInitialCount(Number(value));
    };

    const handleReset = () => {
        setCounter(initialCount);
    };

    const handleClick1 = () => {
        setCounter(counter + 1);
    };

    const handleClick2 = () => {
        setCounter(counter - 1);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.heading}>
                Geeksforgeeks
            </Text>
            <Text style={styles.header}>
                Counter App
            </Text>
            <Text style={styles.counterValue}>
                {counter}
            </Text>
            <View style={styles.buttons}>
                <TouchableOpacity style={styles.button}
                                  onPress={handleClick1}>
                    <Text>Increment</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button}
                                  onPress={handleClick2}>
                    <Text>Decrement</Text>
                </TouchableOpacity>
            </View>
            <View style={{ margin: 15 }}>
                <TextInput
                    keyboardType="numeric"
                    value={initialCount.toString()}
                    onChangeText={handleInitialCountChange}
                    style={{ padding: 10,
                             fontSize: 16,
                             borderRadius: 8,
                             borderColor: 'black',
                             borderWidth: 1 }}
                />
                <TouchableOpacity
                    onPress={handleReset}
                    style={styles.setInitialCountButton}
                >
                    <Text style={{ color: "#fff", fontSize: 16 }}>
                        Set Initial Count
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#f8f8f8",
    },
    header: {
        fontSize: 18,
        marginVertical: 10,
        color: "#333",
        textTransform: "uppercase",
    },
    heading: {
        color: "green",
        fontSize: 35,
    },
    counterValue: {
        fontSize: 36,
        fontWeight: "bold",
        marginVertical: 10,
        color: "#007bff",
    },
    buttons: {
        flexDirection: "row",
        justifyContent: "center",
    },
    button: {
        fontSize: 16,
        padding: 13,
        margin: 5,
        borderRadius: 8,
        backgroundColor: "green",
        elevation: 20,
    },
    setInitialCountButton: {
        padding: 10,
        fontSize: 16,
        margin: 15,
        borderRadius: 8,
        backgroundColor: "blue",
        elevation: 20,
    },
});

export default App;

Step 4: Open the Terminal or Command Prompt and enter the following command to launch 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:

Create A Simple Counter Using In React Native