App
Developmen
t
Agenda
• App Development & its types
• Mobile App Development
• Types of Mobile App
• Development Process
• Architecture
• Developing App Using React Native
• Basics of React Native
App Development
• App development is the process of
designing, coding, testing, and
launching applications that run on
devices such as mobile phones,
tablets, and computers.
• It involves creating software to solve
problems, entertain users, or
provide services.
• Apps are designed for
communication, entertainment,
productivity, business, and other
user needs.
Types of Apps
• Mobile Apps: Built for smartphones and tablets,
offering native experiences (e.g., WhatsApp,
Instagram).
• Web Apps: Run on web browsers without installation,
accessible from any device (e.g., Google Docs, Gmail).
• Desktop Apps: Installed on computers, providing
full-featured software experiences (e.g., Microsoft
Word, Photoshop).
Mobile App Development
• Mobile app development is the
creation of applications specifically
designed to run on mobile devices
like smartphones and tablets.
• It involves using different
programming languages and
frameworks to develop applications
that provide seamless user
experiences across multiple
platforms.
Types of Mobile Apps
Mobile applications can be categorized into three main types:
• Native Apps – Developed for a specific platform (Android or
iOS) using platform-specific languages like Swift for iOS and
Kotlin for Android.
• Hybrid Apps – A combination of web and native technologies,
developed using frameworks such as React Native or Flutter,
enabling cross-platform compatibility.
• Progressive Web Apps (PWAs) – Web applications that
function like native apps, accessible via web browsers without
requiring installation.
Mobile Apps Development
Process
• Strategy: Define the app’s goals, target audience, and key features through market
research and competitor analysis.
• Analysis & Planning: Outline technical requirements, select the tech stack, and
create a roadmap with development milestones.
• UI/UX Design: Design intuitive, visually appealing, and user-friendly interfaces with
wireframes and interactive prototypes.
• App Development: Build the frontend and backend, integrate core functionalities,
and ensure smooth performance across devices.
• Testing: Conduct functional, performance, and security testing to identify and fix
bugs for a seamless user experience.
• Deployment & Support: Launch the apps on app stores, monitor performance,
gather user feedback, and provide regular updates.
Mobile App Development
Architecture
App architecture defines the structure and components of an
application, ensuring scalability, maintainability, and performance.
It typically consists of:
• Frontend (UI Layer) – The visual and interactive part of the app.
• Backend (Server & Database) – Handles data storage,
authentication, and business logic.
• API Layer – Connects the frontend and backend for seamless
communication.
Mobile App Development
Architecture
Developing App Using React
Native
• React Native is a popular open-
source framework that enables
developers to build cross-platform
mobile applications using
JavaScript and React.
• It allows for code reusability
across iOS and Android, reducing
development time and effort.
Core Components in React
Native
React Native provides several built-
in UI components to create mobile
applications, including:
• View – A container for
structuring layouts.
• Text – Displays readable content.
• Image – Used for displaying
images.
• Button – Handles user
interactions.
Core Components in React
Native
Core Components in React
Native
Basic of React Native
• React Fundamentals
• Handling in TextInput
• Using a Scroll View
• Using List Views
React Fundamentals
• React Native is built on React, a popular open-source library
for building user interfaces with JavaScript.
• Understanding React is essential for making the most of React
Native. Here’s a quick introduction to its core concepts:
1. Components : -
• React apps are made up of components, which are reusable
UI elements.
• Example :
React Fundamentals
2. JSX (JavaScript XML) : -
• JSX allows writing HTML-like code inside JavaScript.
• It makes UI code more readable and expressive.
• Example :
React Fundamentals
3. Props (Properties) : -
• Props allow passing data from a parent component to a child
component.
• They make components dynamic and reusable.
• Example :
React Fundamentals
4. State : -
• State is used to store data that can change within a
component.
• Unlike props, state is managed inside the component.
• Example :
Handling in TextInput
• TextInput is a Core
Component that allows the
user to enter text.
• It has an onChangeText
prop that takes a function
to be called every time the
text changed, and an
onSubmitEditing prop that
takes a function to be
called when the text is
submitted.
w component allows vertical and horizontal scrolling of multiple elements, supporting heterogeneous content. Enabling the pagingEnabled prop allows users to swipe through views, and on Android, this can be achieved using the View
Using a Scroll View
• The Scroll View component allows vertical and horizontal scrolling
of multiple elements, supporting heterogeneous content.
• Enabling the pagingEnabled prop allows users to swipe through
views, and on Android, this can be achieved using the ViewPager
component.
• On iOS, ScrollView can handle zooming when a single item is
present by setting maximumZoomScale and maximumZoomScale,
allowing users to pinch and expand to zoom in and out.
w component allows vertical and horizontal scrolling of multiple elements, supporting heterogeneous content. Enabling the pagingEnabled prop allows users to swipe through views, and on Android, this can be achieved using the View
Using a List View
• React Native provides a suite of components for presenting lists of
data. Generally, you'll want to use either FlatList or SectionList.
• FlatList efficiently renders dynamic lists by displaying only the
visible items on the screen, making it ideal for large datasets that
may change over time, unlike ScrollView, which loads all items at
once.
• The FlatList component requires two props: data and renderItem.
data is the source of information for the list. renderItem takes one
item from the source and returns a formatted component to render.
w component allows vertical and horizontal scrolling of multiple elements, supporting heterogeneous content. Enabling the pagingEnabled prop allows users to swipe through views, and on Android, this can be achieved using the View
Thank You
