React Native Mini Project 1

Building React Native Counter App with Expo

React Native is a popular framework for building mobile applications using JavaScript and React. In this blog, we will go through the step-by-step process of setting up your development environment and creating a simple counter application using React Native and Expo.

Prerequisites

Before getting started, ensure you have the following installed on your computer:

1. Install Node.js and npm

Node.js is required to run JavaScript code outside a browser, and npm (Node Package Manager) is used to install dependencies.

Download Node.js from the official website: Node.js Download

After installation, verify the installation by running the following commands in your terminal or command prompt:

				
					node -v
npm -v

2. Install Visual Studio Code

VS Code is a powerful code editor for JavaScript development. Download it from the official website: VS Code Download

Setting Up the Expo CLI

3. Install Expo CLI Globally

Expo is a framework that simplifies React Native development. Install it globally by running:

				
					npm install -g expo-cli

Creating a New React Native Project

4. Create a New Expo Project

To create a new React Native project using Expo, run the following command:

				
					npx expo init CounterApp

Select the “Blank” template when prompted.

After the project is created, navigate into the project directory using below command:

				
					cd CounterApp

Starting the Development Server

5. Start the React Native Development Server

Run the following command to install dependencies and start the Metro Bundler (the JavaScript bundler for React Native):

				
					npx expo install react-dom react-native-web @expo/metro-runtime

Installing UI Components

6. Install React Native Paper

For beautiful UI components, install React Native Paper by running:

				
					npm install react-native-paper

Creating a Simple Counter App

7. Add Counter Code in App.js

Replace the content in App.js with the following code to create a simple counter application:

				
					import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Button, Card, Provider as PaperProvider } from "react-native-paper";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <PaperProvider>
      <View style={styles.container}>
        <Card style={styles.card}>
          <Text style={styles.title}>Counter App</Text>
          <Text style={styles.count}>{count}</Text>

          <View style={styles.buttonContainer}>
            <Button mode="contained" onPress={() => setCount(count + 1)} buttonColor="#4CAF50">
              Increase
            </Button>
            <Button mode="contained" onPress={() => setCount(0)} buttonColor="#607D8B">
              Reset
            </Button>
            <Button mode="contained" onPress={() => setCount(count - 1)} buttonColor="#F44336">
              Decrease
            </Button>
          </View>
        </Card>
      </View>
    </PaperProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e2d8e8",
  },
  card: {
    padding: 80,
    borderRadius: 10,
    elevation: 5,
    width: "40%",
    alignItems: "center",
    backgroundColor: "white",
    height: "50%"
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
    color: "#333",
  },
  count: {
    fontSize: 48,
    fontWeight: "bold",
    marginBottom: 20,
    color: "#6200EE",
  },
  buttonContainer: {
    width: "100%",
    flexDirection: "column",
    gap: 10,
    marginTop: 10,
  },
});

export default App;

Running the Project

8. Run the Project on Web

To run the project in a web browser, execute the following command:

				
					npm run web

Before running the project, make sure to save all files. Any changes or updates should be saved before re-running the project.

9. View Your Running Project

Once the project is running, your browser will open automatically, displaying your React Native application.

Conclusion

Congratulations! You have successfully set up your development environment and built a simple React Native counter app using Expo. You can now explore more features and build advanced mobile applications with React Native.

Happy coding! 🚀