How to Create A Simple Counter App using React Native ?

In this article, we'll create a simple counter 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 web development and mobile app development. React Native enables developers to create robust and efficient applications with seamless 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:

React-Native-Project-Structure

Approach

The counter value will be managed using the useState hook. Two functions, handleIncrement, and handleDecrement, will be implemented to update the count state. To enhance visual appeal, the counter's user interface will be styled using StyleSheet. The Counter component itself will display the current count value and provide buttons for incrementing and decrementing. Finally, in the main App component, 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:

How to Create A Simple Counter App using React Native ?

Prerequisites:

Steps to Create React Native Application

Approach

Explore