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:
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}> w3wiki </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:
Contact Us