Mobile Application
Development
Practicals
By:
Muhammad Imran
Assistant Prof. of Computer Science
Govt. Millat Graduate College Mumtazabad, Multan
Lecturer (Visiting Faculty) of I.T
Women University, Multan
2 Mobile Application Development (React Native)
Navigation
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition
between, multiple screens is typically handled by what is known as a navigation. For example
your application may consist of login screen, Home screen, Sign up screen etc. Moving from one
screen to another is known as Navigation. Navigation is performed with the help of navigation
module. Similar concept in web application is known as routing, and navigation in mobile
application. In react native, the react navigation is used ([Link]).
Navigation is a fundamental concept in mobile application development.
Modern smartphone applications typically consist of multiple screens or "views" that the user
interacts with. For example:
A social media application may have screens such as Home, Messages, and Profile.
An e-commerce application typically provides Product List, Product Details, and Cart
screens.
To enable intuitive movement between these screens, a structured navigation system is required.
In React Native, the most widely used navigation library is React Navigation, which is highly
flexible, customizable, and easy to integrate within Expo projects.
Importance of Navigation in Application Design
A navigation system:
✔ Organizes the UI into meaningful sections
✔ Provides intuitive user movement
✔ Maintains user journey history
✔ Controls rendering of screens
✔ Manages deep-linking & nested screens
Without a systematic navigation structure, an application becomes:
Difficult to interact with
Hard to scale
Complicated to debug
Confusing for end-users
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
3 Mobile Application Development (React Native)
Thus, Navigation is not just a feature — it is the backbone of application flow.
Types of Navigation in React Native
React Navigation provides multiple navigation patterns, each designed for specific use-cases.
1. Stack Navigation
tack Navigation is a method of navigating in which:
Screens are arranged like a stack of cards.
When you move to a new screen → it goes on top.
When you press back → the top screen is removed.
The previous screen becomes visible again.
This behavior is similar to:
Home Screen → Details Screen → Profile Screen
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
4 Mobile Application Development (React Native)
Real-World Examples
Daraz
Product List → Product Details → Buy Now
Banking Apps
Login → Dashboard → Transaction History
When to Use
Moving from a main screen to a detail screen
Login flows
Product details
Settings pages
2. Bottom Tab Navigation
Displays persistent tabs at the bottom of the screen.
Often used in social media, banking, and streaming apps.
Great for switching between top-level sections.
Real-World Examples
Facebook
Home, Watch, Marketplace, Groups, Profile
YouTube
Home, Shorts, Create, Subscriptions, Library
WhatsApp
Chats, Updates, Communities, Calls
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
5 Mobile Application Development (React Native)
When to Use
Different main categories of the app
Quick switching between screens
When you want persistent navigation at bottom
3. Drawer Navigation
A side menu that slides from the left or right.
Contains links to different screens.
Suitable for large apps where space must be conserved.
Real-World Examples
Gmail
Inbox, Sent, Spam, Settings inside drawer
Google Maps
Your Places, Contribution, Offline Maps
When to Use
Apps with many options
Admin dashboards
Email/mobile apps
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
6 Mobile Application Development (React Native)
Hidden but always available menus
4. Material Top Tabs (Swipe Tabs)
Tabs appear at the top, and you can swipe left/right.
Used for category or section-based apps.
YouTube Music
Home / Explore / Library
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
7 Mobile Application Development (React Native)
5. Nested Navigation
A combination of different navigators.
For example:
o Tabs inside a Drawer
o Stack inside Tabs
o Drawer inside Stack
Nested navigation allows building highly scalable and complex app flows.
Core Components of React Navigation
React Navigation introduces several key components:
NavigationContainer
This is the root component that wraps the entire application.
It manages the navigation tree and state.
Similar to BrowserRouter in web applications
Required for enabling navigation
Must wrap all the navigators
Navigators
Navigators define how screens are displayed and transitioned. Examples:
createNativeStackNavigator()
createBottomTabNavigator()
createDrawerNavigator()
Each navigator creates its own navigation system.
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
8 Mobile Application Development (React Native)
Screens
Screens are simple React components that display UI.
Each screen is mapped to a route using:
<[Link] name="Home" component={HomeScreen} />
Screens receive the navigation and route props automatically.
navigation prop
Allows screen-to-screen movement:
[Link]("Details");
route prop
Used to receive parameters:
[Link]
Screen Lifecycle in Navigation
React Navigation manages how screens appear, disappear, and render.
Important lifecycle events:
Event Description
focus Screen becomes visible
blur Screen goes off-screen
transitionStart Animation to next screen begins
transitionEnd Transition completed
Using useFocusEffect, you can run code when a screen becomes active.
State Management and Navigation
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
9 Mobile Application Development (React Native)
Navigation integrates seamlessly with:
✔ Context API
✔ Redux
✔ Zustand
✔ MobX
This allows:
Passing global states
Managing authenticated user sessions
Preserving navigation state across reloads
Passing Data Between Screens
One of the most essential features of navigation is data transfer.
1. Passing small data via route params
Used for sending usernames, IDs, etc.
2. Passing functions or callbacks
Useful for updating parent screens.
3. Using global state
Best for large or persistent data.
Navigation Patterns and Architecture
In real-world applications, navigation is not linear.
You may need multiple navigators working together.
Example architecture:
App
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
10 Mobile Application Development (React Native)
└── Stack (Auth)
│ ├── Login
│ └── Register
└── Drawer (Main App)
├── Bottom Tabs
│ ├── Home Stack
│ └── Profile Stack
└── Settings
This structure supports:
Login workflows
Main app workflows
Separate profile & settings stacks
10. Advantages of React Navigation
✔ Flexible and customizable
✔ Works with Expo
✔ Supports gestures and animations
✔ Supports both Android and iOS standards
✔ Easy to combine navigators
✔ Excellent documentation
Limitations of React Navigation
❌Built in JavaScript — not as fast as native navigation
❌Requires additional libraries for animations
❌Complex nested navigation can be hard to debug
❌More bundle size compared to simple state-based routing
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
11 Mobile Application Development (React Native)
For most applications, however, the advantages far outweigh the drawbacks.
Navigation and UI/UX
A good navigation structure improves:
User experience (UX)
Application speed
Screen organization
Accessibility
Guidelines:
✔ Keep primary screens in Tabs
✔ Keep secondary pages in Stack
✔ Place rarely used features in Drawer
✔ Use icons for better visual clarity
Navigation in Large Applications
For large applications:
Use nested navigators
Keep navigator files separated (e.g., [Link], [Link])
Use constants for route names
Store navigation helpers in a separate file
This improves maintainability and scalability.
Examples:
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
12 Mobile Application Development (React Native)
Install React Navigation Packages
Install core navigation
npm install @react-navigation/native
Install required dependencies
npx expo install react-native-screens react-native-safe-area-context
Install Stack Navigator
npm install @react-navigation/stack
Install Bottom Tabs Navigator
npm install @react-navigation/bottom-tabs
1. Stack Navigation
[Link]
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Text, Button, View } from 'react-native';
const Stack = createNativeStackNavigator();
const HomeScreen = ({ navigation }) => {
return (
<View style={{ flex:1, justifyContent:"center", alignItems:"center" }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => [Link]('Details')}
/>
</View>
);
};
const DetailsScreen = () => (
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
13 Mobile Application Development (React Native)
<View style={{ flex:1, justifyContent:"center", alignItems:"center" }}>
<Text>Details Screen</Text>
</View>
);
const App = () => {
return (
<NavigationContainer>
<[Link] screenOptions={{ headerTitleAlign:"center" }}>
<[Link] name="Home" component={HomeScreen}/>
<[Link] name="Details" component={DetailsScreen}/>
</[Link]>
</NavigationContainer>
);
};
export default App;
2. Tab Navigation
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text } from "react-native";
const Tab = createBottomTabNavigator();
const HomeScreen = () => (
<View style={{ flex:1, justifyContent:"center", alignItems:"center" }}>
<Text style={{ fontSize: 24 }}>Home Screen</Text>
</View>
);
const ProfileScreen = () => (
<View style={{ flex:1, justifyContent:"center", alignItems:"center" }}>
<Text style={{ fontSize: 24 }}>Profile Screen</Text>
</View>
);
const SettingsScreen = () => (
<View style={{ flex:1, justifyContent:"center", alignItems:"center" }}>
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
14 Mobile Application Development (React Native)
<Text style={{ fontSize: 24 }}>Settings Screen</Text>
</View>
);
const App = () => {
return (
<NavigationContainer>
<[Link] screenOptions={{ headerTitleAlign: "center" }}>
<[Link] name="Home" component={HomeScreen} />
<[Link] name="Profile" component={ProfileScreen} />
<[Link] name="Settings" component={SettingsScreen} />
</[Link]>
</NavigationContainer>
);
};
export default App;
3. Drawer Navigation
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { View, Text } from 'react-native';
const Drawer = createDrawerNavigator();
const HomeScreen = () => (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Text style={{ fontSize:24 }}>Home Screen</Text>
</View>
);
const ProfileScreen = () => (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Text style={{ fontSize:24 }}>Profile Screen</Text>
</View>
);
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.
15 Mobile Application Development (React Native)
const App = () => {
return (
<NavigationContainer>
<[Link] initialRouteName="Home">
<[Link] name="Home" component={HomeScreen} />
<[Link] name="Profile" component={ProfileScreen} />
</[Link]>
</NavigationContainer>
);
};
export default App;
Prepared By: Muhammad Imran
Assistant Prof. of Computer Science, Govt. Millat Degree College, Multan.