React Native Projects

Welcome to my repository showcasing a collection of React Native applications, each highlighting different aspects of mobile app development using React Native.

Table of Contents

• Projects
  • BakingApp
  • Calculator_app
  • NikeApp
  • UI's
  • Expo Firebase Authentication
  • sp21-bcs-037_LAB_TERMINAL
  • Basic Chat App UI
• Screenshots
• Installation
• Libraries and Dependencies
• Usage

Projects

BakingApp

A user-friendly baking app designed to cater to baking enthusiasts:

• Welcome Screen: A welcoming introduction to the app.
• Home Screen: Categories of baking recipes for easy navigation.
• Items Screen: Detailed list of baking items under each category.

Calculator_app

An all-in-one calculator app with multiple functionalities:

• Basic Calculator: Performs standard arithmetic operations.
• Scientific Calculator: Includes advanced mathematical functions.
• BMI Calculator: Calculates Body Mass Index.
• Loan Calculator: Computes loan repayment details.

NikeApp

An e-commerce prototype app focusing on Nike products:

• Product Listings: Displays a variety of Nike products.
• Product Details: Provides detailed information about each product.
• Cart Management: Allows users to add and manage products in the cart.
• State Management: Utilizes react-redux for efficient state management.

UI's

A collection of various User Interface Designs that were created as a practice for React Native projects.

• Button Styles: Different styles and functionalities for buttons.
• Form Elements: Includes input fields.
• Layouts: Various screen layouts and navigation patterns.

Expo Firebase Authentication

A project demonstrating Firebase authentication integration in React Native:

• Sign-Up and Sign-In: Implements user authentication using Firebase services.
• Persistent Authentication: Maintains user sessions with AsyncStorage.
• Navigation Handling: Manages navigation flows based on authentication states.

sp21-bcs-037_LAB_TERMINAL

A project developed for a lab terminal assignment, showcasing:

• Features: Demonstrates various React Native capabilities.
• UI Design: Focuses on creating an intuitive and engaging user interface.
• Functionality: Implements practical features as per assignment requirements.

Chat-App

A basic user interface for a chat app, contains:

• Splash Screen: Provides a brief loading screen with the app logo.
• Welcome Screen: Greets the user with a welcome message.
• Chat Users Screen: Displays a list of users that can be clicked to initiate a chat.
• Chat Screen: Allows users to send and receive messages.

Screenshots

BakingApp

Calculator_app

NikeApp

Basic E-commerce App UI

Expo Firebase Authentication

sp21-bcs-037_LAB_TERMINAL

Chat-App

Libraries and Dependencies

Below are the major libraries and dependencies used across different projects in this repository:

Dependencies

• redux: For state management.
• react-redux: Official React bindings for Redux.
• react-native-firebase: For authentication and database services.
• @react-navigation/native: For handling navigation between screens.
• @react-native-async-storage/async-storage: For persistent storage.
• react-native-reanimated: For creating smooth, powerful, and maintainable animations.
• @expo/vector-icons: To use customizable vector-icons.
• @reduxjs/toolkit: The official toolset for efficient Redux development.
• react-native-linear-gradient: To create visually appealing backgrounds, buttons, or other UI elements.

You can find the complete list of dependencies in the package.json file of each project.

Installation

To run these projects locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Syed-Abdullah123/React-Native-Projects.git

2. Navigate to the project directory:

   cd React-Native-Projects

3. Install dependencies:

   npm install

Usage

To run a specific project, navigate to its directory and start the React Native development server:

cd <project-name>
npm start