ITC06 MIDTERM

NAVIGATION IN
REACT NATIVE
MODULE 4

APPLICATION DEVELOPMENT PAGE 01

AND EMERGING TECHNOLOGIES
 MODULE 4 MIDTERM

INTRODUCTION TO
REACT NAVIGATION
NAVIGATION
IIn React Native, navigation refers
to the process of managing the
movement between different
screens in a mobile application. It
enables users to transition
between views while maintaining
state, history, and a smooth user
experience.
 MODULE 4 MIDTERM

WHY IS NAVIGATION ESSENTIAL?

CLARITY CONTROL COMFORT

Effective navigation provides a Good navigation empowers Intuitive navigation creates a
clear understanding of the users, giving them control over comfortable and seamless
app's structure, making it easy their journey through the app. experience. Users shouldn't
for users to know where they They can explore different have to struggle to find their
are, where they can go, and sections and features at their way around; the flow should
how to return to previous own pace, choosing what they feel natural and effortless,
screens. It eliminates want to see and how they encouraging them to engage
confusion and prevents users want to interact with the with the app and return to it.
from feeling lost within the content.
app.
 MODULE 4 MIDTERM

CONSEQUENCES OF
POOR NAVIGATION
01 02 03
HIDDEN MENUS INCONSISTENT DEAD ENDS
LAYOUT Interactive
Crucial features
The navigation elements, like
are concealed
structure and buttons or links,
behind obscure
layout change lead to nowhere,
gestures or
significantly providing no
menus that are
across different feedback or
difficult for
sections of the further
users to
app. navigation
discover.
options.
 ITC06 MIDTERM

REACT
NAVIGATION
AND REACT
ROUTER
APPLICATION DEVELOPMENT PAGE 05
AND EMERGING TECHNOLOGIES
 MODULE 4 MIDTERM

REACT NAVIGATION REACT ROUTER

React Navigation is a React Router is a library for
library specifically handling navigation in
designed for handling React web applications. It's
navigation in React Native used to manage the
applications. It provides a relationship between URLs
set of components and and the content displayed
tools to manage the on the page.
transitions between
different screens or views
within a mobile app.
 ITC06 MIDTERM

DIFFERENCES:
MOBILE
VS.
WEB
APPLICATION DEVELOPMENT PAGE 07
AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

INTERACTION METHODS:
MOBILE
Primarily touch-based: taps,
swipes, gestures.

WEB
Clicking links is the primary way to
navigate. React Router is built around
this paradigm, handling URL changes
and browser history."
 ITC06 MIDTERM

NAVIGATION PARADIGMS:
MOBILE
Often uses hierarchical
navigation: stacks, drawers, tabs.

WEB
More flexible, often using URLs to
represent different pages.
 ITC06 MIDTERM

HARDWARE FEATURES:
MOBILE
React Navigation integrates with
this, allowing users to easily go back.

WEB
No physical back button on the device
itself, but the browser provides
back/forward buttons and the
address bar for navigation control.
 ITC06 MIDTERM

NAVIGATION STRUCTURE:
MOBILE
Navigation is often contained within
the app itself.

WEB
URLs are central. They define the
different pages and are directly tied to
navigation.
 ITC06 MIDTERM

REACT NAVIGATION:
MOBILE-FIRST APPROACH
React Navigation is purpose-built for
mobile development. It excels at
handling touch inputs, seamlessly
integrates with native gestures, and
supports popular mobile navigation
paradigms like stacks, tabs, and drawers.
This results in a user experience that feels
native and intuitive on both iOS and
Android platforms.
 ITC06 MIDTERM

REACT ROUTER: WEB-

CENTRIC DESIGN
React Router is great for web apps
because it uses URLs to help people
move around the site. This makes it
easy to share links and for users to
go back and forward in their
browser. It's especially important for
building fast and interactive
websites.
 ITC06 MIDTERM

DIFFERENT
TYPES OF
NAVIGATORS
APPLICATION DEVELOPMENT PAGE 14
AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

STACK NAVIGATOR
THE CLASSIC VERTICAL FLOW
A Stack Navigator in React Native is
a navigation pattern that manages
screens in a stack-based structure,
similar to a browser’s history. It
follows a last-in, first-out (LIFO)
approach, meaning the most
recently added screen appears on
top, and users can navigate back to
previous screens.
 ITC06 MIDTERM

STACK NAVIGATOR
THE CLASSIC VERTICAL FLOW
A Stack Navigator in React Native is
a navigation pattern that manages
screens in a stack-based structure,
similar to a browser’s history. It
follows a last-in, first-out (LIFO)
approach, meaning the most
recently added screen appears on
top, and users can navigate back to
previous screens.
 ITC06 MIDTERM

PUSH:
"Adding a screen to the top
of the stack."

POP:
"Removing the top screen –
going back."

PEEK:
“Looking at the top screen
without removing it."
 ITC06 MIDTERM

TAB NAVIGATOR
QUICK ACCESS TO KEY SECTIONS
A Tab Navigator in React
Native is a navigation pattern
that allows users to switch
between different screens
using tabs. It is commonly
used for creating bottom or
top navigation bars, providing
quick access to different
sections of an app.
 ITC06 MIDTERM

DRAWER NAVIGATOR
THE HIDDEN MENU
A Drawer Navigator in React
Native is a navigation pattern
that provides a sliding side
menu (drawer) that users can
open and close. It is typically
used for accessing multiple
sections of an app without
cluttering the main UI.
 ITC06 MIDTERM

NAVIGATING
BETWEEN
SCREENS
APPLICATION DEVELOPMENT PAGE 20
AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

In React Native, the navigate()

navigate() method is used
to switch between screens
in a navigation stack. It is a
core function of React
Navigation, allowing users
to move from one screen
to another within an app.
 ITC06 MIDTERM

goBack()
The goBack() method in React
Navigation is used to return to
the previous screen in the
navigation stack. It functions
like the back button in a web
browser or mobile app,
removing the current screen
from the stack and displaying
the last visited screen.
 ITC06 MIDTERM

push()
The push() method in React
Navigation is used to navigate
to a new instance of the same
screen, even if it's already in the
stack. Unlike navigate(), which
won't add a screen if it's already
active, push() always creates a
new instance of the target
screen.
 ITC06 MIDTERM

NAVIGATE()
VS. PUSH()
WHEN TO CHOOSE

APPLICATION DEVELOPMENT PAGE 24

AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

navigate(): Use when you want to

avoid creating duplicate instances
of a screen if it already exists in the
navigation stack.

push(): Use when you always want

to create a new instance of a
screen, even if it means having
multiple screens of the same type
in the stack.
 ITC06 MIDTERM

NAVIGATION
OPTIONS AND
HEADER
CUSTOMIZATION
APPLICATION DEVELOPMENT PAGE 26
AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

WHAT IS A HEADER IN
REACT NAVIGATION?
A header in React Navigation is the
top bar that appears in a mobile
app screen.
It typically contains:

TITLE NAVIGATION BUTTONS STYLING OPTIONS

The name of Such as back Such as back
the current buttons, menu buttons, menu
screen. icons, or custom icons, or custom
buttons. buttons.
 ITC06 MIDTERM

HOW HEADER COMMON

CUSTOMIZATION STYLING
IMPROVES UX PATTERNS
✔ Clarity – A clear, well-defined header ✔ Consistent Styling – Use a
helps users instantly recognize their
uniform header design across all
location within the app.
screens to ensure a cohesive user
✔ Context – Headers can display relevant
details, such as the name of a selected
experience.
item, for better understanding. ✔ Platform-Specific Styles – Adapt
✔ Efficiency – Action buttons in the header the header to match iOS and Android
provide quick access to commonly used design guidelines for a native feel.
functions. ✔ Minimalism – Keep the header
✔ Branding – Custom styles and colors clean and uncluttered, focusing only
reinforce the app’s visual identity and user on essential elements.
experience.
 ITC06 MIDTERM

PASSING
PARAMETERS
BETWEEN
SCREENS
APPLICATION DEVELOPMENT PAGE 29
AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

SENDING AND RETRIEVING

DATA USING route.params
What is route.params in React Native?
In React Navigation, route.params
is used to pass and retrieve data
between screens. It allows you to
send dynamic values (like user
IDs, names, or any other data)
when navigating from one screen
to another.
 ITC06 MIDTERM

DATA SERIALIZATION
Data Serialization is the process of
converting data structures (like
objects or arrays) into a format
that can be easily stored,
transmitted, or reconstructed later.
In React Native, serialization is
often used when passing data
between screens, storing data in
local storage, or sending data over
a network.
 ITC06 MIDTERM

PROTECTING SENSITIVE DATA

Never pass sensitive information
like passwords or API keys
directly in route.params. Use
secure storage mechanisms like
AsyncStorage, MMKV, or
dedicated secure libraries for
React Native to protect this
data.
 ITC06 MIDTERM

DEFAULT VALUES AND TYPE CHECKING

When passing data between screens using
route.params, it's important to handle cases where data
may be missing or not in the expected format. This
prevents errors and ensures a smooth user experience.
DEFAULT VALUES TYPE CHECKING

If no parameters are passed, React doesn’t check if the

route.params can be passed data is of the
undefined. To avoid errors, correct type. You can use
you can set default values PropTypes to enforce
when retrieving parameters. expected types.
ITC06 MIDTERM

HANDLING
DYNAMIC
SCREEN
CONTENT
 ITC06 MIDTERM

UPDATING COMPONENT PROPS WITH

PARAMETERS
When building a mobile
app with React Native, you
want your components to
be reusable and dynamic
instead of hardcoded. This
is where parameters
(props) come in
 ITC06 MIDTERM

CREATING REUSABLE COMPONENTS

A reusable component is a UI
element that can be used
multiple times with different data
or configurations. Instead of
writing duplicate code for similar
elements, you create a single
component and customize it
using props.
 ITC06 MIDTERM

BEST
PRACTICES FOR
NAVIGATION IN
REACT NATIVE
APPLICATION DEVELOPMENT PAGE 37
AND EMERGING TECHNOLOGIES
 ITC06 MIDTERM

DEEP LINKING AND

HANDLING BACK
ACTIONS
Deep linking allows users to
open specific screens in a
React Native app directly from
an external source such as an
email, social media, or a
website. It works similarly to
how URLs navigate web pages.
 ITC06 MIDTERM

IMPROVING PERFORMANCE
WITH LAZY LOADING
WHAT IS LAZY LOADING?

Lazy loading is a
technique that loads only
the necessary
screens/components
when required instead of
loading everything at
once.
 ITC06 MIDTERM

ENSURING ACCESSIBILITY
IN NAVIGATION
Accessibility ensures that
people with disabilities
(e.g., visual impairments,
motor disabilities) can
navigate your app
effortlessly.
 ITC06 MIDTERM

Thank you
QUIZ TIME!!!