MOBILE APPLICATION DEVELOPMENT
LAB MANUAL
React Native + [Link] + Firebase
Edition 2026 — Version 1.0
Course Information
Field Details
Course Name App Development
Technology Stack React Native CLI + Expo, [Link] 20+,
Firebase v10
Target Audience Undergraduate Students
Teaching Approach Scenario-Based Practical Learning
Total Labs 10
CLO/PLO Mapping
CLO Description Mapped PLO
CLO1 Understand React Native PLO1
application architecture
CLO2 Develop mobile UI using PLO3
reusable components
CLO3 Integrate Firebase PLO4
Authentication and
Firestore
CLO4 Develop REST APIs using PLO5
[Link] and Express
CLO5 Build and deploy a complete PLO7
full-stack mobile
application
Table of Contents
Introduction & Course Overview
Lab 01 — Environment Setup & Toolchain
Lab 02 — React Native Fundamentals
Lab 03 — Navigation & UI Components
Lab 04 — Firebase Authentication
Lab 05 — Firestore Database
Lab 06 — REST API Development
Lab 07 — Image Upload & Storage
Lab 08 — Push Notifications
Lab 09 — Offline Support & Optimization
Lab 10 — Capstone Full-Stack App
Appendix A — Troubleshooting Guide
Appendix B — Viva Questions
Grading Rubric
Introduction & Course Overview
This lab manual provides a complete hands-on learning experience for undergraduate
students learning mobile application development using React Native, Firebase, and
[Link]. The course focuses on industry-standard practices and scenario-based learning to
simulate real-world development environments.
Students will learn frontend mobile app development, backend API development, cloud
integration, authentication, database management, offline support, and production
deployment.
Lab 01 — Environment Setup & Toolchain
🎯 Scenario
You joined a startup as a junior mobile developer. Your first task is to prepare the complete
development environment.
Learning Objectives
Install [Link] and Expo CLI
Configure Android Studio
Create Expo project
Run first application
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
1. Install required dependencies
2. Create project structure
3. Write implementation code
4. Run and test the application
5. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 02 — React Native Fundamentals
🎯 Scenario
Your team needs a basic mobile interface for a university social app.
Learning Objectives
Create screens
Use Flexbox layouts
Implement styling
Handle user input
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
6. Install required dependencies
7. Create project structure
8. Write implementation code
9. Run and test the application
10. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 03 — Navigation & UI Components
🎯 Scenario
The product manager requests a professional navigation system and reusable UI library.
Learning Objectives
Implement stack navigation
Create tab navigation
Build reusable components
Apply responsive design
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
11. Install required dependencies
12. Create project structure
13. Write implementation code
14. Run and test the application
15. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 04 — Firebase Authentication
🎯 Scenario
Your application now requires secure user login and registration.
Learning Objectives
Implement Email Authentication
Password reset
Email verification
Protected screens
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
16. Install required dependencies
17. Create project structure
18. Write implementation code
19. Run and test the application
20. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 05 — Firestore Database
🎯 Scenario
Users want real-time social posts and comments.
Learning Objectives
Create Firestore collections
Real-time listeners
CRUD operations
Pagination
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
21. Install required dependencies
22. Create project structure
23. Write implementation code
24. Run and test the application
25. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 06 — REST API Development
🎯 Scenario
Some business logic must be handled securely on the backend.
Learning Objectives
Create Express server
Build REST APIs
Middleware implementation
API testing
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
26. Install required dependencies
27. Create project structure
28. Write implementation code
29. Run and test the application
30. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 07 — Image Upload & Storage
🎯 Scenario
Students want profile photos and media uploads.
Learning Objectives
Upload images
Firebase Storage integration
Progress indicators
Image optimization
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
31. Install required dependencies
32. Create project structure
33. Write implementation code
34. Run and test the application
35. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 08 — Push Notifications
🎯 Scenario
The app should notify users when someone likes or comments on their posts.
Learning Objectives
Configure Firebase Cloud Messaging
Send push notifications
Handle notifications
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
36. Install required dependencies
37. Create project structure
38. Write implementation code
39. Run and test the application
40. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 09 — Offline Support & Optimization
🎯 Scenario
Users report poor internet connectivity on campus.
Learning Objectives
Implement AsyncStorage caching
Performance optimization
Reduce re-renders
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
41. Install required dependencies
42. Create project structure
43. Write implementation code
44. Run and test the application
45. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Lab 10 — Capstone Full-Stack App
🎯 Scenario
Your team must prepare the final production-ready application.
Learning Objectives
Integrate all modules
Perform testing
Security audit
Final deployment
Theory
This section introduces the core concepts required for the lab. Students should review the
architecture, workflow, and implementation strategy before starting practical tasks.
Step-by-Step Activities
46. Install required dependencies
47. Create project structure
48. Write implementation code
49. Run and test the application
50. Debug errors and optimize performance
Code Example
// Example React Native Component
import React from 'react';
import { View, Text } from 'react-native';
export default function HomeScreen() {
return (
<View>
<Text>Welcome to App Development Lab</Text>
</View>
);
}
Lab Exercises
Complete the implementation independently.
Modify the UI according to your own theme.
Test the application on emulator and physical device.
Document screenshots of outputs.
Deliverables
Source code files
Screenshots of outputs
GitHub repository link
Short implementation report
Viva Questions
What is the purpose of React Native?
What is the difference between frontend and backend?
Why do we use Firebase?
What is state management?
Screenshots Placeholder
[Insert Screenshot Here]
Appendix A — Troubleshooting Guide
Issue Solution
Expo server not starting Run npx expo start --clear
Firebase permission denied Check Firestore Security Rules
App crashes on Android Verify emulator configuration
Cannot find module Run npm install again
Appendix B — General Viva Questions
Explain the architecture of React Native.
What is Firebase Authentication?
Difference between SQL and NoSQL databases.
Explain REST API architecture.
What is asynchronous programming in JavaScript?
What are hooks in React?
What is Expo?
Explain real-time databases.
Grading Rubric
Assessment Component Weight
Lab Performance 30%
Assignments & Exercises 20%
Project Implementation 25%
Code Quality & Documentation 10%
Presentation & Viva 15%
End of Lab Manual
Good Luck & Build Something Great!