Government of Pakistan

National Vocational and Technical Training Commission

Prime Minister Youth Skills Development Program

"Skills for All"

Course Contents / Lesson Plan

Course Title: React Native
Duration: 1 Months
 Trainer Name

Author Name

Course Title React Native

Objectives and Employable skills and hands-on practice in React Native

Expectations
Objective:

Comprehensive Understanding of React Native:

Objective: Develop a thorough understanding of React Native, including its

architecture, components, and the principles of cross-platform mobile app
development.
Effective Development Environment Setup:

Objective: Enable students to set up a productive development environment

with Node.js, npm, and React Native CLI, fostering independence in project
initiation.
Proficiency in React Components and JSX:

Objective: Ensure students can create functional and class components,

apply JSX syntax, and render components effectively in a React Native
environment.
Styling and Layout Design Mastery:

Objective: Instruct students on styling using Flexbox, introduce UI

components, and guide them in implementing responsive and visually
appealing layouts.
Navigation Implementation Proficiency:

Objective: Teach effective navigation between screens using React

Navigation, including passing parameters and customizing navigation
options.
Data Rendering, Mapping, and Reusability Mastery:

Objective: Instruct students on rendering dynamic data efficiently, using

Array.map() for lists, and creating reusable components for data rendering.
Advanced Styling Techniques and Animation Skills:

Objective: Explore advanced styling using StyleSheet, external libraries like

Styled Components, and guide students in implementing animations using
the Animated API.
Integration of Advanced UI Components and Native Modules:

Objective: Provide insights into advanced UI components, libraries, and

integration of native modules for platform-specific functionality.

Testing, Debugging, and Performance Optimization Proficiency:

React Native
 Objective: Instruct students on debugging tools, testing on various devices,
and implementing performance optimizations for efficient app development.
Expectations:
Independence in Project Setup:

Expectation: Students should independently set up their development

environment and create new React Native projects.
Effective Component Creation and Rendering:

Expectation: Students should confidently create, style, and render React

components using JSX syntax.
Successful Asynchronous Programming:

Expectation: Students should proficiently handle asynchronous operations,

make API requests, and manage data retrieval and storage.
Integration of Advanced UI Components and Native Modules:

Expectation: Students should be capable of integrating advanced UI

components, leveraging external libraries, and incorporating native modules
for platform-specific functionality.
Effective Testing, Debugging, and Optimization:

Expectation: Students should be skilled in using debugging tools, testing on

various devices, and implementing optimizations for efficient app
performance.
Successful App Deployment and Collaborative Project Work:

Expectation: Students should successfully deploy a React Native app,

actively contribute to guided project development, and collaborate effectively
within a development team.
Employable Skills: Hands-on Practice:
 Mobile App Development Proficiency:

Ability to develop cross-platform mobile applications using React Native,

making graduates valuable contributors to mobile development teams.

UI/UX Design Skills:

Proficiency in styling, layout design, and implementation of responsive
designs, ensuring a positive and visually appealing user experience.

State Management Expertise:

Capability to manage component and global state efficiently, facilitating the
development of dynamic and interactive applications.

API Integration Knowledge:

Experience in making asynchronous API requests, handling data fetching,

and managing external data sources in real-world applications.

Navigation and Routing Proficiency:

React Native
 In implementing navigation between screens, passing parameters,
andcustomizing navigation behavior, crucial for creating seamless user
journeys.
Debugging and Optimization Skills:

Ability to identify and resolve issues using debugging tools, along with
knowledge of performance optimization techniques for efficient app
development.
Collaborative Development Experience:
Exposure to collaborative project development, contributing to the entire
development lifecycle from setup to deployment.
Entry-level of For an advanced course of React Native proposed entry level is minimum
trainees bachelors in relevant subject, so expectations from the trainees are:
 Basic understanding of programming concepts.
 Familiarity with computer systems and operating systems.
 No prior knowledge of React Native is required

Learning The content of this lesson plan is adopted from the internationally
Outcomes of recognized ISTQB certification course, "Certified Tester Foundation
the course Level (CTFL)," ensuring alignment with global standards and practices.
For further reference, the link to the source material is provided below:

Understanding of React Native Fundamentals:

Gain a solid understanding of React Native, including its architecture,

components, and principles of cross-platform mobile app development.
Effective Development Environment Setup:

Independently set up a development environment with Node.js, npm, and the

React Native CLI for initiating and managing React Native projects.
Proficiency in React Components and JSX:

Master the creation of functional and class components, apply JSX syntax,
and effectively render components within a React Native environment.
Styling and Layout Design Skills:

Develop skills in styling using Flexbox layout, implementing basic UI

components, and creating responsive and visually appealing layouts.
Data Rendering, Mapping, and Reusability Mastery:

Demonstrate mastery in rendering dynamic data efficiently, employing the

Array.map() method, and creating reusable components for data rendering.
Advanced Styling Techniques and Animation Skills:

Develop advanced styling skills using StyleSheet, external libraries like

Styled Components, and animation implementation using the Animated API.
platform-specific functionalities.

Testing, Debugging, and Performance Optimization Proficiency:

React Native
 Acquire proficiency in testing React Native apps, using debugging tools
effectively, and implementing optimizations for enhanced app performance.
App Deployment and Collaborative Project Work:
Successfully deploy a React Native app, actively contribute to guided project
development, and collaborate effectively within a development team.
Course The total duration of the course: 1 months (4 Weeks)
Execution Plan Class hours: 4 hours per day
Theory: 20%
Practical: 80%
Weekly hours: 20 hours per week
Total contact hours: 80 hours
Companies
offering jobs in  Trillium
the respective  Afinity
trade  Net Sole
 I2c
 Multinet
 Nescom
 Transworld
 Netcom
 Systems
 Web Work Solution
 Purelogics
 Nets-International
 Ebryx

Job  Mobile App Development

Opportunities  Android Developer
 Enterprise Mobile Solutions
 Mobile Backend Engineer
 Game Development
 Emerging Technologies
 Database Administrator
 System Analyst
No of Students 25
Learning Place Classroom / Lab
Instructional Online Courses and Tutorials:
Resources
1. Meta React Native Specialization
https://www.coursera.org/specializations/meta-react-native
2. Free online course React Native Tutorial for Beginners

Build a React Native App:

https://www.youtube.com/watch?v=0-S5a0eXPoc

 Books and References:

React Native Notes for Professionals book

React Native
 https://books.goalkicker.com/ReactNativeBook/

Official React Native Documentation:

https://reactnative.dev/docs/getting-started

 Practice and Experimentation:

https://codesandbox.io/p/sandbox/react-native-practice-4klyx?file=%2Fsrc
%2Findex.js

MODULES

Sched Module Title Days Hours Learning Units Home

uled Assignment
Weeks

React Native
 Week 1 Introduction to Day 1 Hour 1 to  Introduction to
React Native 4 React Native
and Setup  Overview of
React Native
framework
 Advantages of
using React
Native for mobile
app development
 Introduction to
cross-platform
development

Day 2 Hour 1 to  Setup and

4 Installation
 Installation and
setup of
development
environment
(Node.js, npm,
React Native CLI)
 Creating a new
React Native
project
 Exploring the
basic project
structure

Day 3 Hour 1 to  React Components

4 and JSX
 Understanding React
components and JSX
syntax
 Creating functional
and class
components
 Rendering
components in React
Native

Day 4 Hour 1 to  Styling in React

4 Native
 Styling components
using Flexbox layout
 Using basic UI
components like Text,
View, Image, and

React Native
 Button
 Implementing basic
layout designs

Day 5 Hour 1 to  Navigation in React

4 Native
 Implementing basic
navigation between
screens using React
Navigation
 Passing parameters
between screens
 Exploring navigation
options and
customization

Week 2 State Day 1 Hour 1 to 4  Managing

Management Component State
and Data  Managing component
Handling state with useState
hook
 Understanding the
difference between
state and props
 Handling user input
and updating state

Day 2 Hour 1 to 4 Context API and Global

State
Introduction to Context API
for managing global state
Implementing global state
management using
Context
Sharing data between
components using Context

React Native
 Day 3 Hour 1 to 4  Asynchronous
Programming
 Introduction to
asynchronous
programming in
JavaScript
 Working with Promises
and async/await for
handling asynchronous
operations
 Making asynchronous
API requests

Day 4 Hour 1 to 4  Data Fetching with

Fetch API
 Making HTTP requests
to fetch data from
external APIs
 Handling fetch errors
and implementing
loading indicators
 Storing fetched data in
component state or
global state

React Native
 Day 5 Hour 1 to 4  Data Rendering
and Mapping
 Rendering dynamic
data in React
Native components
 Using Array.map()
method to render
lists of data
 Creating custom
components for
data rendering

Week 3 Advanced Day 1 Hour 1 to 4  Advanced Styling

Topics and UI Techniques
Design  Advanced styling
techniques using
StyleSheet
 Using external styling
libraries like Styled
Components
 Implementing
responsive designs for
various screen sizes

Day 2 Hour 1 to 4  Animations in

React Native
 Introduction to
animations in React
Native
 Using Animated API
to create
animations
 Implementing
gesture-based
animations

Day 3 Hour 1 to 4  Handling User

Input
 Implementing form
inputs and
React Native
 validations
 Working with
different input types
(text input,
dropdowns,
checkboxes)
 Handling user
interactions and
gestures

Day 4 Hour 1 & 2  Advanced UI

Components
 Exploring advanced
UI components and
libraries
 Implementing
complex layouts
and designs
 Customizing UI
components for
specific use cases

Day 5 Hour 1 & 2  Integrating Native

Modules
 Integrating native
modules and
libraries into React
Native projects
 Using Native
Modules and Native
UI Components for
platform-specific
functionality
 Understanding the
bridge between
JavaScript and
native code

Week 4 Deployment Day 1 Hour 1 to 4  Testing and

and Project Debugging
Development  Introduction to
debugging tools in
React Native
 Testing React
Native apps on
different devices
and simulators

React Native
  Handling common
debugging issues
and errors

Day 2 Hour 1 to 4  Performance

Optimization
 Identifying
performance
bottlenecks in
React Native apps
 Implementing
optimizations for
improved
performance
 Memory
management and
reducing app size

Day 3 Hour 1 to 4  App Deployment

 Building and
packaging React
Native apps for
Android and iOS
platforms
 Deploying apps to
Google Play Store
and Apple App
Store
 Managing app
versions and
updates

Day 4 Hour 1 to 4  Project

Development (Part
1)
 Working on a
guided project to
apply learned
concepts
 Developing a
simple React Native
app from scratch
 Implementing
features such as
navigation, data
fetching, and state
management

React Native
 Day 5 Hour 1 to 4  Project
Development (Part
2)
 Continuation of the
guided project
development
 Adding advanced
features and
functionalities to the
app
 Testing, debugging,
and deploying the
completed project

React Native
Practical Tasks:

Task Description Week

1 Develop a Simple ● Develop a basic to-do list Week 1

To-Do List App application using React
using React Native Native

● Allow users to add tasks,

mark them as completed,
and delete tasks

● Implement basic
navigation between
screens to handle the task
list and task details.

2 Develop a Weather ● Build a weather forecast Week 2

Forecast App using application using React
React Native Native

● Fetch weather data from a

weather API, display the
current weather, and
provide a 5-day forecast

● Implement state
management to handle
loading indicators, error
messages, and global
state for the selected city.

3 Develop a Recipe ● Create a Recipe Finder Week 3

Finder App with application using React
Advanced UI and Native
Animations using
React Native ● Allow users to search for
recipes, view recipe
details, and save their
favorite recipes

React Native
 ● Implement advanced
styling techniques,
animations, and native
module integration to
enhance the user
experience.

4 Develop and Deploy ● Develop a task Week 4

a Task Management management application
App using React using React Native
Native
● Allow users to create,
update, delete tasks, set
deadlines, and prioritize
tasks

● Focus on testing,
performance optimization,
and deployment of the
app.

5 Project ● Create comprehensive Final Term

Documentation: documentation for the
E-Commerce App.

● Include a project overview,

installation instructions,
and a guide on how to use
and navigate the app.

6 Final Project ● Enhance the E-Commerce Final Term

Enhancement: App with additional
features.

● Consider features like user

authentication, product
categories, and the ability
to place orders.

React Native
 Annexure-IV:
Workplace/Institute Ethics Guide

Work ethic is a standard of conduct and values for job performance. The modern definition of what
constitutes good work ethics often varies. Different businesses have different expectations. Work
ethic is a belief that hard work and diligence have a moral benefit and an inherent ability, virtue, or
value to strengthen character and individual abilities. It is a set of values-centered on the
importance of work and manifested by determination or desire to work hard.

The following ten work ethics are defined as essential for student success:
1. Attendance:
Be at work every day possible, plan your absences don’t abuse leave time. Be punctual
every day.
2. Character:
Honesty is the single most important factor having a direct bearing on the final success of
an individual, corporation, or product. Complete assigned tasks correctly and promptly.
Look to improve your skills.
3. Team Work:
The ability to get along with others including those you don’t necessarily like. The ability to
carry your weight and help others who are struggling. Recognize when to speak up with an
idea and when to compromise by blend ideas together.
4. Appearance:
Dress for success set your best foot forward, personal hygiene, good manner, remember
that the first impression of who you are can last a lifetime
5. Attitude:
Listen to suggestions and be positive, accept responsibility. If you make a mistake, admit it.
Values workplace safety rules and precautions for personal and co-worker safety. Avoids
unnecessary risks. Willing to learn new processes, systems, and procedures in light of
changing responsibilities.
6. Productivity:
Do the work correctly, quality and timelines are prized. Get along with fellows, cooperation
is the key to productivity. Help out whenever asked, do extra without being asked. Take
pride in your work, do things the best you know-how. Eagerly focuses energy on
accomplishing tasks, also referred to as demonstrating ownership. Takes pride in work.
7. Organizational Skills:

React Native
 Make an effort to improve, learn ways to better yourself. Time management; utilize time and
resources to get the most out of both. Take an appropriate approach to social interactions
at work. Maintains focus on work responsibilities.
8. Communication:
Written communication, being able to correctly write reports and memos.
Verbal communications, being able to communicate one on one or to a group.
9. Cooperation:
Follow institute rules and regulations, learn and follow expectations. Get along with fellows,
cooperation is the key to productivity. Able to welcome and adapt to changing work
situations and the application of new or different skills.
10. Respect:
Work hard, work to the best of your ability. Carry out orders, do what’s asked the first time.
Show respect, accept, and acknowledge an individual’s talents and knowledge. Respects
diversity in the workplace, including showing due respect for different perspectives,
opinions, and suggestions.

React Native