📱 BlogPost - React Native (TypeScript)

A simple yet complete React Native app built with TypeScript, demonstrating clean architecture using MVVM pattern, authentication, and CRUD functionality for managing blog posts.

---

🚀 Features

• 🔐 Authentication (Register / Login / Logout)
• 📝 Create, Edit, Delete, View Blogs
• 👥 Owner & Co-owner based blog access
• 📡 API integration with Axios
• 💾 Persistent login with AsyncStorage
• ✅ Form validation using Formik + Yup
• 🧪 Unit Testing with Jest & Testing Library
• 🧭 Navigation using React Navigation (Stack Navigator)
• 📱 Works on both iOS and Android

---

🏗️ Project Setup

1️⃣ Create Project (React Native CLI + TypeScript)

Note: The traditional template command failed due to CLI deprecations.
The working solution used the community CLI.

# Install CLI (if not already)
npm install -g react-native-cli
npm install -g react-native

# Create project
npx @react-native-community/cli@latest init BlogPost
cd BlogPost

2️⃣ Fix Android SDK Issue

If Android build fails with:

“React Native project's build process cannot locate the Android SDK”

Create android/local.properties and set SDK path:

sdk.dir=/Users/yourusername/Library/Android/sdk

3️⃣ Run the App

# Android
npx react-native run-android

# iOS (macOS)
cd ios
pod install
cd ..
npx react-native run-ios

---

⚙️ Installed Dependencies

🧭 Navigation

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-gesture-handler react-native-safe-area-context

🌐 Networking & Storage

npm install axios
npm install @react-native-async-storage/async-storage

🧾 Form Handling & Validation

npm install formik yup

🧰 TypeScript Types

npm install --save-dev @types/react @types/react-native @types/yup

🎨 Icons (optional)

npm install react-native-vector-icons

🧩 iOS CocoaPods

cd ios && pod install && cd ..

---

💡 Development Tips

🔍 Check TypeScript Compilation Errors

npx tsc --noEmit

🧠 JSX Comments

{/* This is a comment */}

🖥️ Android Emulator Localhost

Use 10.0.2.2 instead of localhost for local API calls.

⚙️ Android SDK Path Setup (macOS)

Add to your ~/.zshrc:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Then run:

source ~/.zshrc

---

🧪 Unit Testing

🧩 Install Testing Dependencies

npm install --save-dev jest @testing-library/react-native @testing-library/jest-native jest-fetch-mock
npm install --save-dev ts-jest @types/jest

⚙️ Jest Configuration

Add the following in package.json (or jest.config.js):

"jest": {
  "preset": "react-native",
  "setupFiles": ["./jestSetup.js"],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testPathIgnorePatterns": [
    "/node_modules/",
    "/__tests__/App.test.tsx"
  ]
}

🧱 Mock AsyncStorage (jestSetup.js)

import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

▶️ Run Tests

npm test

📊 View Test Coverage

npm test -- --coverage

✅ Implemented Tests

• authService.test.ts – Login & Register API
• blogService.test.ts – CRUD operations
• useAuth.test.tsx – Hook functionality
• BlogItem.test.tsx – Component render and behavior

---

🎨 UI Overview

Screen	Description
Login	User authentication with Formik validation
Register	Sign-up form with error handling
Home	Displays all blogs, Add/Edit/Delete options
Add/Edit Blog	Create or modify posts
Logout	Clears AsyncStorage and session

Modern UI using built-in StyleSheet with rounded inputs, blue accent buttons, and card-based blog layout.

---

🧠 Architecture Overview

• MVVM Pattern

  • viewmodels/ → Contains hooks like useAuth, useBlogViewModel
  • services/ → Handles API requests (authService, blogService)
  • components/ → Reusable UI components (e.g., BlogItem)
  • screens/ → Page-level views
  • navigation/ → App stack and route configuration
  • utils/ → Helper functions, storage

---

📱 Screenshots

🧭 Login & Register Screens

iOS	Android

🏠 Home Screen

iOS	Android

---

🧰 Tech Stack

Category	Library
Framework	React Native (TypeScript)
Navigation	React Navigation
Networking	Axios
Storage	AsyncStorage
Forms	Formik + Yup
Testing	Jest + React Native Testing Library

---

💻 Commands Reference

Task	Command
Run Metro Bundler	npx react-native start
Run on Android	npx react-native run-android
Run on iOS	npx react-native run-ios
Check Type Errors	npx tsc --noEmit
Run Tests	npm test
See Test Coverage	npm test -- --coverage

---

🏁 Final Notes

This project demonstrates:

• Clean and maintainable React Native + TypeScript code.
• Integration of MVVM pattern.
• Modular architecture with separation of concerns.
• Testable design using Jest and React Testing Library.

✅ All tests passing ✅ Runs on iOS & Android ✅ Ready for public showcase

---

Backend Notes

• The backend is hosted on Render and may go inactive after ~45 minutes of inactivity.
• If the backend is inactive, it may take ~2 minutes to start again.
• To activate the backend before using the app, open this link in a browser: https://blogpostspringboot.onrender.com/api/blogs
• Once the backend is active, you can use the mobile app to fetch or post blogs.

---

📜 License

This project is open-source and available under the MIT License.