CCS332 :: APP DEVELOPMENT

Unit II NATIVE APP DEVELOPMENT USING JAVA

Native Web App, Benefits of Native App, Scenarios to

create Native App, Tools for creating Native App, Cons of
Native App, Popular Native App Development
Frameworks, Java & Kotlin for Android, Swift & Objective-C
for iOS, Basics of React Native, Native Components, JSX,
State, Props

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 1

 Native App
 A native app is built specifically for a
particular platform (e.g., Android, iOS,
Windows) using the platform's native
programming language (Java/Kotlin for
Android, Swift/Objective-C for iOS).
 It's installed directly on a user's device and
has full access to the device's capabilities.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 2

 Web App
 A web app, on the other hand, is accessed
through a web browser and built using
web technologies like HTML, CSS, and
JavaScript.
 It is not installed on the device but rather
runs within the browser, making it
platform-independent.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 3

 Native Web App
 A native web app refers to a web application that
is built using web technologies (HTML, CSS, and
JavaScript) but behaves and feels like a native app
when used on a user's device.
 It is designed to run on various platforms and
devices with a single codebase, rather than being
developed separately for each platform.
 This is typically achieved by using frameworks
like React Native, Flutter, or other technologies
that enable cross-platform development.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 4

Benefits of Native App
1. Performance:
 Native apps are optimized to run directly on a specific platform and use the
device's hardware and software to their fullest potential. This results in
faster loading times, smoother animations, and overall better performance
compared to web apps.
2. User Experience:
 Native apps can provide a seamless and intuitive user experience, as they
are designed with the platform's guidelines and user interface components
in mind. This leads to a more familiar and user-friendly interface for the app's
target audience.
3.Access to Device Features:
 Native apps have full access to the device's features and capabilities, such as
camera, GPS, accelerometer, and more. This enables developers to create
feature-rich and interactive applications.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 5
Benefits of Native App
4. Offline Functionality:

 Native apps can often work offline or in areas with poor internet connectivity
by storing data locally. This feature is particularly useful for certain types of
apps like productivity tools or games.

5.App Store Distribution:

 Native apps can be distributed through app stores like Google Play Store and
Apple App Store. This makes them easily discoverable to a broad user base and
allows for seamless updates and app management.

6. Security:

 Native apps have the advantage of following the security guidelines of the
platform they are built for, reducing the risk of security vulnerabilities.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 6

Benefits of Native App

7. Better Integration:

 Native apps can be integrated more effectively with other apps on the
device, allowing for a more cohesive user experience when switching
between applications.

8. Performance Analytics:

 App stores and developer tools provide detailed analytics on how users
interact with native apps. This data can help developers make data-driven
decisions to improve app performance and user engagement.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 7

 Scenarios to create Native App
What is a Test Case
 A test case is a more granular level of testing where the app tester
performs various operations on the app to ensure that the given
functionality works fine.
 This helps in understanding, tracking, and resolving quality issues. In
short, test cases test the given scenario.
What is a Test Scenario
 A Test scenario is a broader term and is often tied up with the user
stories in the agile model.
 Test scenario helps engineers to test the mobile app with real-
world use cases. Testers similarly execute scenarios as the end-user
would use the app.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 8

 Scenarios to create Native App
Why we Create Mobile App Testing Scenarios?
 Test scenarios are created to:
 It assures complete test coverage.
 All the stakeholders approve the scenarios. Therefore every
person involved is on the same page.
 They help to determine the end-to-end use case of the
Application and test everything accordingly.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 9

 Scenarios to create Native App
When not to create a Mobile App Testing Scenarios?
 Test scenarios are not helpful in the below-mentioned cases.
 When the application is complicated or unstable or has a
time crunch.
 When you have a Scrum or Kanban methodology.
 Test Scenario should not be created to fix a new bug fix or
during regression testing.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 10

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Functional Mobile Testing Scenario
• Ensure that mobile works in multitask mode when needed. For
example, while using the app, if the user gets a call, he should
perform the expected actions.
• Test that the AUT is not consuming other apps’ memory and not
stopping the activities of other apps.
• Page scroll and swipe is working as expected.
• Check that the app’s automatic startup is working as expected.
• Check that auto-logout is working as expected.
• Navigation between various modules should work as expected.
• Test that the app’s social networking options such as sharing,
posting, login are working correctly.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 11

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 UI Mobile Testing Scenario
• UI testing can be tricky for mobile apps as one has to check for
the component placement on a comparatively smaller screen.
• As all the web applications tend to be responsive now, one has
to make sure that the layout, placement, and functionality are
working as expected.
• Validate that text is not cut off and must be fitted on the
screen.
• Validate that all popups, alert messages, and error messages are
meaningful and correct.
• Validate the carousel, navigation through menu, and swipe
functions.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 12

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 UI Mobile Testing Scenario
• The page should not take more than five seconds to load, if it
does, it should have a progress bar that allows the user to
comprehend the scenario.
• Check for spelling & grammatical errors.
• Check for image sizes, image rendering, and company logo.
• When the screen allows editing without saving, it must show a
message to save details to the user when navigating to another
screen without saving.
• If there is lazy loading, check if the content loads without a lag
when the user scrolls up.
• Validate that data does not ghost off when moving the app to
the background while filling a form.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 13

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Performance Mobile Testing Scenario
• Mobile performance testing of the app is critical as the
purpose of convenient access would be lost if the app
does not perform well.
• Validate the performance of the application by changing
the network to 2G,3G, 4G, 5G, and wifi.
• Validate the CPU consumption while using the app.
• Validate how many parallel users would crash the app to
benchmark performance.
• Perform the load testing on individual API calls and
validate how the application behaves under a certain load.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 14

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Usability Mobile Testing Scenario
• Check for the font size, button size, and content format
so that it is accessible effortlessly.
• Inform the client while downloading a lot of data which
might not be favorable for the performance of an app.
• Validate that the app should have easy navigations
which do not confuse users.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 15

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Security Mobile Testing Scenario
• Validate the flow for security vulnerabilities that involve the
user’s personally identifiable data, such as mobile
number, email, etc.
• Validate that the data is secured and encrypted, sent to
and back from the server over the network.
• Validate that no confidential data is stored without
encryption and visible/accessible.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 16

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Battery & Data Mobile Testing Scenario
• Testing the app against data usage and power
consumption should also be considered, as it should not
drain the battery while running.

 Recoverability Mobile Testing Scenario

• Validate that the app resumes the last operation in case of
a hard reboot.
• Test what happens in case of a crash between transactions
or any R/W function.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 17

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Localization and Time Zone Testing
◦ If an app supports different locals, the testers should also
test the app for localization settings. The labels, functional
flows, and other features should work as expected in
different languages.
◦ Similarly, all the features should work as expected while
operating in different time zones.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 18

 Scenarios to create Native App
Important Mobile App Testing Scenarios
 Career & Network Connectivity Testing
o Test how well the app connects with the network and
mobile data career online.

 Installation & Resource usage Testing

o Test what resources are required to install the app and if
the installation process is user-friendly and quick. Also, test
that there is no crash during installation and it’s smooth.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 19

 Scenarios to create Native App
Mobile App Test Scenario and Test Case Example
 We take the example of a mobile application for online grocery
shopping that delivers household items fruits, vegetables, milk
products, bakery items, etc.
 First, we need to do a sanity test of
 Mobile app installation process
 Application launching and loading of all pages
 The successful purchase of any grocery product.
 Then we can move on and start actual testing with designed
test scenarios and test cases

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 20

 Scenarios to create Native App
Mobile App Test Scenario and Test Case Example
 Below is a sample test scenario and the test case for launching the
application.
Test Condition Test Scenario Test Case Steps Expected Result

Application Verify for the 1. Click on the 1. The home

installed on the launching and sign application icon screen of the
device. up on your mobile. application
2. Verify page should launch.
launched has 2. 2. The home
any sign-in/ screen should
sign-up option display the sign-
3. Click on the up option.
sign-up option 3. A Sign-up page
and check if should launch,
you can enter and the user
the details. can enter the
details.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 21
 Scenarios to create Native App
Mobile App Test Scenario and Test Case Example
 Below is a sample test scenario and the test case for launching the
application.

Test Condition Test Scenario Test Case Steps Expected Result

Application Verify for the 4. Enter the details 4. All the details
installed on the launching and sign first name, last should remain on
device. up name, email id, and the page.
mobile number. 5. A notification
5. Click on submit appears “Please
button. check your mail
and verify the
account”.
Mail should trigger
with the
verification code.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 22
 Scenarios to create Native App
Difference Between Test Cases and Test Scenarios?

Test Cases Test Scenario

 Test Cases include only small steps
 A Test Scenario includes a detailed
which are helpful to execute the
document of the testing procedure.
expected result.

 It is the process to validate the Test  It is the process to test the complete
Scenario. functionality of the application.

 It is the low-level concept of  It is the top-level concept of

software testing means how to do software testing means what things
testing. need to test.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 23

7 Steps Process for Native Mobile
App Development
1. Validate the Idea to Decide the Core Concept
2. Build a User Persona to Understand the Target Audience
3. Conduct Competitor Analysis to Understand Your
Competitor
4. Plan for UI/UX to Design Engaging Mobile App
5. Choose the Platform Between Native & Cross-platform
6. Identify Monetization Options to Build Profitable Mobile App
7. Make your App Secure

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 24

 Tools for creating Native App
 There are several tools and frameworks available to create native
apps for various platforms.
 These tools aim to streamline the development process and enable
developers to build apps using familiar web technologies.
 These tools comes with its own set of features, advantages, and
limitations.
 The choice of the tool depends on factors such as the development
team's expertise, project requirements, desired platform support,
and development efficiency.
 Before selecting a tool, it's essential to evaluate its capabilities and
suitability for the specific native app project.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 25

 Tools for creating Native App
Some popular tools for creating native apps includes
1.Android Studio (Java/Kotlin):
 Android Studio is the official Integrated Development Environment
(IDE) for Android app development. It supports Java and Kotlin as
programming languages and offers a rich set of tools to build native
Android apps.
2. Xcode (Swift/Objective-C):
 Xcode is the official IDE for iOS and macOS app development. It
supports Swift and Objective-C as programming languages and
provides tools to create native apps for iPhones, iPads, and Macs.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 26

 Tools for creating Native App
3. React Native:
 Developed by Facebook, React Native is a popular cross-
platform framework that allows developers to build native
apps using JavaScript and React. It enables code reuse across
iOS and Android platforms while offering near-native
performance.
4. Flutter:
 Developed by Google, Flutter is another cross-platform
framework that enables developers to build native apps using
Dart programming language. It offers a fast and expressive way
to create beautiful UIs and has a rich set of widgets.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 27
 Tools for creating Native App
5. Xamarin:
 Owned by Microsoft, Xamarin is a cross-platform framework
that allows developers to build native apps for Android, iOS,
and Windows using C# and .NET. It provides access to
platform-specific APIs and features.
6. Ionic:
 Ionic is a popular open-source framework for building hybrid
apps using web technologies like HTML, CSS, and JavaScript.
While not fully native, it uses WebView to run inside a native
container, allowing for cross-platform compatibility.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 28

 Tools for creating Native App
7. NativeScript:
 NativeScript is an open-source framework that allows
developers to build native apps using JavaScript, TypeScript, or
Angular. It provides direct access to native APIs and delivers
native performance.
8.Appcelerator Titanium:
 Appcelerator Titanium is a platform that enables developers
to build native apps using JavaScript. It provides a single
codebase for multiple platforms, including Android and iOS.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 29

Cons of Native App
 Longer Development Time
◦ As a native app is targeted to a specific OS, it
requires more time to develop for every single
platform.
◦ So developers need to write specific codes for
iOS, Android, etc. As a result, to provide a
quality product, the overall development time is
longer.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 30

 Cons of Native App
 Expensive
◦ As the development cycle is longer, native apps are
a little expensive compared to other hybrid or
web applications.
◦ Even the maintenance and upgradation cost is a
little high. But in the long run, Native Apps pay
back.
 Support
◦ As users of different devices may be using different
versions of the app, it makes it difficult for the
developers to maintain and offer support.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 31
Cons of Native App
 Specialization required
◦ Building a native app means finding a team of
developers who specialize in Android and iPhone
development.
 Costly and time-consuming
◦ Because native apps have a separate codebase for
each platform, businesses will spend a lot of time
and costs to develop, maintain, and update app
versions

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 32

Cons of Native App
 Download Requirement
◦ Before using a native app, it needs to be
downloaded from either the Play Store or the
App Store.
◦ There are many processes included in
downloading a native app. They need to find the
app, go through the terms & conditions, and
then finally proceed with the download process.
◦ In some cases, the download process becomes
so lengthy that the users are not able to wait
or have that much patience.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 33
Popular Native App Development Frameworks

 1. React Native:
◦ Developed by Facebook, React Native is a widely
used crossplatform framework that allows
developers to build native apps using JavaScript
and React.
◦ It offers a vast community and extensive third-
party libraries, enabling code sharing between
iOS and Android platforms.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 34

Popular Native App Development Frameworks

 2. Flutter:
◦ Developed by Google, Flutter is another popular
cross-platform framework that uses the Dart
programming language.
◦ It allows developers to create native apps with a
single codebase for iOS, Android, and other
platforms, offering a rich set of widgets and high-
performance rendering.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 35

Popular Native App Development Frameworks

 3. Xamarin:
◦ Owned by Microsoft, Xamarin is a cross-
platform framework that enables developers to
build native apps for Android, iOS, and Windows
using C# and .NET.
◦ It provides access to platform-specific APIs and
features and allows code sharing among different
platforms.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 36

Popular Native App Development Frameworks

 4. NativeScript:
◦ NativeScript is an open-source framework that
enables developers to build native apps using
JavaScript, TypeScript, or Angular.
◦ It provides direct access to native APIs, enabling
the creation of high-performance apps.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 37

Popular Native App Development Frameworks

 5. Kotlin Multiplatform Mobile (KMM):

◦ Kotlin Multiplatform Mobile, introduced by
JetBrains, allows developers to share business
logic and code across Android and iOS platforms
using the Kotlin programming language.
◦ It is designed to foster better interoperability
and code sharing.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 38

Popular Native App Development Frameworks

 6. Ionic:
◦ Ionic is a popular open-source framework for
building hybrid apps using web technologies like
HTML, CSS, and JavaScript.
◦ While not fully native, it uses WebView to run
inside a native container, allowing for cross-
platform compatibility.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 39

Popular Native App Development Frameworks
 7.Appcelerator Titanium:
◦ Appcelerator Titanium is a platform that enables
developers to build native apps using JavaScript.
◦ It provides a single codebase for multiple
platforms, including Android and iOS.
 8. PhoneGap/Cordova:
◦ PhoneGap (also known as Cordova) is an open-
source framework that allows developers to
build hybrid mobile apps using web technologies.
◦ It wraps web app code within a native container
for distribution on various platforms.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 40
Popular Native App Development Frameworks
 9. Swift UI:
◦ For iOS app development, SwiftUI is Apple's
declarative framework that allows developers to
build user interfaces across all Apple platforms
using Swift.
 10. JQuery Mobile
◦ JQuery Mobile is a cross-platform development
framework that is used to build mobile and web
applications for various devices.
◦ The framework allows running a single code
version across all devices.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 41
 Java for Android
 Java is the most popular, widely used, object-
oriented programming language designed by
James Gosling.
 Using Java, we can create a variety of applications
such as desktop applications, enterprise
applications, cloud-based, and web-based
applications. Usually, it is used to develop the
back-end.
 Java is the primary choice for the developers
when it comes to Android app development. Note
that Android itself is written in Java.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 42
 Java for Android
 Pros
◦ Memory is managed by the JVM automatically.
◦ It is more secure.
◦ Platform independent.
◦ Highly secure
◦ Provides vast community support.
 Cons
◦ Syntaxes in Java are complex and large.
◦ Verbose and complex code.
◦ Its performance is poor.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 43
Kotlin for Android
 Kotlin is also an object-oriented programming
language developed by JetBrains.
 It is a general-purpose, open-source, sterically-
typed, cross-platform pragmatic programming
language with type inference.
 It is particularly designed toimprove the existing
Java models by offering solutions to API design
deficiencies.
 Kotlin is specially designed for JVM and
Android.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 44
Kotlin for Android
 Kotlin's standard library totally depends
on the Java class library.
 It focused on safety, clarity, and
interoperability.
 It is lightweight, clean, concise, and less
verbose especially for writing callbacks,
data classes, and getter/setters.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 45

 Kotlin for Android
 Pros
◦ It is compatible with existing Java code.
◦ It increases team productivity.
◦ It is easily maintainable.
◦ It is less buggy and more reliable.
◦ Provides rich API for application development.
 Cons
◦ The compilation speed of Kotlin is slow.
◦ It has a small developer community.
◦ Memory consumption is high.
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 46
Difference Between Java and Kotlin
Features Java Kotlin

Primitive Type Primitive types in Java are not Primitive types are objects.
objects.

Product It is a product of Oracle It is a product of JetBrains.

Corporation.

Used For It is used to develop stand- It is used to develop server-side

alone applications and applications and android
enterprise applications. application development.

Compilation Java's compilation time is pretty Its compilation time is slow in

Time fast. comparison to Java.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 47

Difference Between Java and Kotlin
Features Java Kotlin

File Extensions Java uses the Kotlin uses the

extensions: .java (for source extensions: .kt (for Kotlin
file), .class (for class source file), .kts (for
file), .jar (for archived file). Kotlin script file), .ktm (for
Kotlin module)

Checked In Java, we take care of the There is no need to catch

Exceptions checked exception by using or declare any exception.
the try-catch block.

Concise The code is not concise in It reduces the boilerplate

comparison to Kotlin. code.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 48

Difference Between Java and Kotlin
Features Java Kotlin

Extension Function We need to create a new We can extend a class

class and inherit the with new functionality by
parent class if we want to using the extension
extend the functionality of function.
an existing class. So, the
extension function is not
supported by Java.

Widening Conversion Java supports the implicit Kotlin does not support
conversion so we can the implicit conversion. So,
convert a smaller type to we cannot convert the
a bigger one. smaller type to a bigger
one.

Code Comparison The line of code is just It reduces the line of code
doubled than Kotlin. to half.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 49

Difference Between Java and Kotlin
Features Java Kotlin

Community Support Java provides a very large Its community is not so

community. huge as Java.

Casting In Java, we need to identify Kotlin supports the smart

and perform the casting. cast, which means that it
identifies the immutable
type and performs implicit
casting automatically.

Type interface It is mandatory to specify It is not mandatory to

the data type, explicitly. specify the type of
variable, explicitly.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 50

 Difference Between Java and Kotlin
Features Java Kotlin

Null Values We can assign null values to We cannot assign null values
variables but cannot assign to any variable and objects.
null values to an object.

Ternary Operator It is available in Java. It does not support ternary

operator.

Coroutines Support Multithreading feature of Like Java, we can create

Java makes it more complex multiple threads (long-running
because managing the intensive operations) in Kotlin
multiple threads is a difficult also but coroutine can
task. Java blocks the thread if suspend a thread execution at
we initiate a long-running a certain point without
intensive operation like blocking the other threads.
network I/O or CPU
operations.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 51

Difference Between Java and Kotlin

Features Java Kotlin

Functional Java is not functional It is a combination of functional and

Programming programming. procedural programming language.

Data Classes If we need a class that can If we want to do the same in Kotlin,
hold data only, for this we we declare the class with the
need to define getter, and keyword Data. Rest the work such
setter methods, constructors, as creating constructor, getter, and
and other functions. setter methods for the fields are
done by the compiler.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 52

Basics of React Native
React
 React is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
 It lets you compose complex UIs from small
and isolated pieces of code called
“components”.
Basics of React Native
How does React Work?
 React creates a VIRTUAL DOM in memory.
Instead of manipulating the browser's DOM directly, React
creates a virtual DOM in memory, where it does all the
necessary manipulating, before making the changes in the
browser DOM.
 React only changes what needs to be changed!
React finds out what changes have been made, and
changes only what needs to be changed.
Basics of React Native
React Native
 React Native is a JavaScript framework used for developing a real,
native mobile application for iOS and Android.
 It uses only JavaScript to build a mobile application. It is like React,
which uses native component rather than using web components as
building blocks.
 React Native applications are real mobile applications and not just
web applets. Facebook released the first version of React Native in
March 2015.
Advantages of React Native

There are several advantages of React Native for building

mobile applications. Some of them are given below:
 Cross-Platform Usage: Provide facility of "Learn once write
everywhere", it works for both platform Android as well iOS
devices.
 Class Performance: The code written in React Native are
compiled into native code, which enables it for both operating
systems as well as it functions in the same way on both the
platforms.
 JavaScript: The JavaScript knowledge is used to build native mobile
apps.
 Community: The large community of React and React Native
around helps us to find any answer we require.
Advantages of React Native

 Hot Reloading: Making a few changes in the code of your app will
be immediately visible during development. If business logic is
changed, its reflection is live reloaded on screen.
 Improving with Time: Some features of iOS and Android are still
not supported, and the community is always inventing the best
practices.
Disadvantages:
 Native Components: We will need to write some platform
specific code if we want to create native functionality which is not
designed yet.
 Existence is Uncertain: As the Facebook develop this framework,
its presence is uncertain since it keeps all the rights to kill off the
project anytime. As the popularity of React Native rises, it is unlikely
to happen.
Difference between React and React Native

React is a library to build web applications whereas

React-Native is a framework to build mobile
applications using React syntax and components,
which are then compiled into native code for iOS and
Android platforms.
Components of React Native

React Fundamentals
 React Native runs on React, a popular open source
library for building user interfaces with JavaScript.
 To make the most of React Native, it helps to
understand React itself.
 We’re going to cover the core concepts behind React:
components
JSX
props
state
Components of React Native
React Native Components
 React Native provides a set of built-in components
like View, Text, Image, Scroll View, etc., which are
similar to the ones in React for the web. For
example,
 Components of React Native

 Here is how you do it: To define your Cat component, first

use JavaScript’s import to import React and React Native’s
Text Core Component:
Components of React Native
Components of React Native
Custom Components
 You’ve already met React Native’s Core Components.
 React lets you nest these components inside each
other to create new components.
 These nestable, reusable components are at the heart
of the React paradigm.
 For example, you can nest Text and Text Input inside a
View below, and React Native will render them
together:
Components of React Native
 Components of React Native

Custom Components
 You can render this
component multiple times and
in multiple places without
repeating your code by using
<Cat>:
 Any component that renders
other components is a parent
component.
 Here, Cafe is the parent
component and each Cat is a
child component.
 Components of React Native

Create Components of the App

 Similar to React, everything here is a component.
 Everything you see here is a separate component that
has been combined to create a complete mobile
application.
 The following are the components that we will be
creating for this application:
Components of React Native
Create Components of the App
App
 This component will act as a container for all the
other components to come together and provide a
complete application
Header
 As the name suggests, this component will be the
header of the mobile application
Display Image
 This component is used here to display the image on
the main screen
To-do Item
 Each task added is a separate component.
Components of React Native
Create Components of the App
To-do Input
 This component is used to add tasks to the application
 It is very important to visualize a React Native application in terms
of components before starting to work on it, and that’s precisely
what we are doing here

 Ref project: https://www.simplilearn.com/react-native-

tutorial-article
Components of React Native
React Native Components
 React Native provides a set of built-in components like View, Text,
Image, Scroll View, etc., which are similar to the ones in React for the
web.
View
 The View is an elemental component of React Native for building a
user interface.
 It is a container that supports layout with flexbox, style, touch
handling, and accessibility controls.
 It maps directly to the native view similar to whatever platform on
React Native app is running on.
Components of React Native
Components of React Native

Handling Text Input

 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.
Components of React Native
Components of React Native
Using a Scroll View
 The Scroll View is a generic scrolling container that can
contain multiple components and views.
 The scrollable items can be heterogeneous, and you can scroll
both vertically and horizontally (by setting the horizontal
property).
 This example creates a vertical Scroll View with both images
and text mixed together.
 Scroll Views can be configured to allow paging through views
using swiping gestures by using the pagingEnabled props.
 Swiping horizontally between views can also be implemented
on Android using the ViewPager component.
 Components of React Native
Using a Scroll View
 On iOS a Scroll View with a single item can be used to allow the
user to zoom content.
 Set up the maximumZoomScale and minimumZoomScale
props and your user will be able to use pinch and expand gestures to
zoom in and out.
 The ScrollView works best to present a small number of things of a
limited size.
 All the elements and views of a ScrollView are rendered, even if they
are not currently shown on the screen.
 If you have a long list of items which cannot fit on the screen, you
should use a FlatList instead. So let's learn about list views next.
 Example: https://reactnative.dev/docs/using-a-scrollview
Components of React Native
Using List Views
 React Native provides a suite of components for
presenting lists of data. Generally, you'll want to
use either FlatList or SectionList.
 The FlatList component displays a scrolling list of
changing, but similarly structured, data.
 FlatList works well for long lists of data, where
the number of items might change over time.
 Unlike the more generic ScrollView, the FlatList
only renders elements that are currently showing
on the screen, not all the elements at once.
Components of React Native
Using List Views
 The FlatList component requires two props: data and
renderItem.
 renderItem takes one item from the source and returns a
formatted component to render.
 This example creates a basic FlatList of hardcoded data.
 Each item in the data props is rendered as a Text component.
The FlatListBasics component then renders the FlatList
and all Text components.
 If you want to render a set of data broken into logical sections,
maybe with section headers, similar to UITableViews on iOS,
then a SectionList is the way to go.
 Example: https://reactnative.dev/docs/using-a-listview
Native Components
View : rectangular building block of React-Native similar
to <div> HTML tag.
Text: is similar to a <p> HTML tag.
TextInput: is similar to <input> HTML tag.
Scrollview: is a View with scroll bar.
FlatList: Normal list which has Header and Footer.
SectionList: Flat List with sections added with it like a
dictionary.

https://reactnative.dev/docs/components-and-apis
 Native Components
Image: is similar to <img> HTML tag.
ImageBackground: sets the image as background to all the child
components.
KeyboardAvoidingView: will adjust the component on the screen
when keyboard pops in.
Modal: is a popup screen with a message or requesting some action on
button.
RefreshControls: refreshes the screen when drag down the section
list.
SafeAreaView: Avoids the camera notch, rounded corners etc.
StatusBar: Controls status bar like matching the theme.
Native Components
TouchableHighlight: Highlights the area on touch (increase
brightness)
TouchableOpacity: Make the area transparent slowly
(decrease brightness)
Pressable: Highly recommended which gives onPress in, out,
long, hoverin, out.
Button: normal button.
 Basic Hooks
useState
useEffect
useContext

Other hooks…
useReducer
useRef
useMemo
useCallback

https://react.dev/reference/react/hooks
Components of React Native

Style
 React Native uses JavaScript for styling the application.
 All core components use a prop named “style.”
 The style names and values are similar to CSS that works
for the web.
 To style our components, we can either use inline styling
or use Style Sheet, which is a React Native component.

 Inline style is used for the text “inline style”

 Stylesheet object is created to style the texts, “blue” and
“big Black”
Components of React Native
Components of React Native
State
 There are two types of data that control a
component in React Native: props and state.
 For data that is going to change in the future, we use
state.
 The state contains the data or information about the
component.
 It determines the behavior of the component and
how it will render.
 State is useful for handling data that changes over
time or that comes from user interaction. State gives
your components memory!
Components of React Native
 Components of React Native
Props
 Props is short for Properties.
 The components can be customized at the time of
creation using different parameters, and those
parameters are known as props.
 Props are passed from one container to another as
a means of passing data between them.
Components of React Native

In the class “TVshows,” prop is passed to another component called

“Watch”
In the class “Watch,” the received prop is used in the component
 JSX

 JSX stands for JavaScript XML.

 JSX allows us to write HTML in React.

 JSX makes it easier to write and add HTML in React.

JSX - Example

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 88

JSX
 JSX allows us to write HTML elements in
JavaScript and place them in the DOM
without any createElement().

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 89

Expressions in JSX
 With JSX you can write expressions
inside curly braces { }.

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 90

 Inserting a Large Block of HTML
 To write HTML on multiple lines, put the
HTML inside parentheses:

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 91

React Native Component Lifecycle
 Lifecycle methods are inbuilt methods.
 There are 4 types of Lifecycle methods
available in React Native:
1. Mounting methods
 constructor()
 componentWillMount() (Deprecated after RN 0.60)
 render()
 componentDidMount()

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 92

React Native Component Lifecycle
 Lifecycle methods are inbuilt methods.
 There are 4 types of Lifecycle methods
available in React Native:
1. Mounting methods
2. Updating methods
3. Unmounting methods
4. Error handling methods

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 93

1. Mounting Methods
 It has 4 methods
1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 94

1. Mounting Methods
 constructor(): It is the first method
called when we open a screen, it is mostly
used to create States.
constructor() {
super();
console.log('Constructor Called.');
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 95

1. Mounting Methods
 getDerivedStateFromProps(): Instead
of calling setState,
getDerivedStateFromProps simply returns
an object containing the updated state.

getDerivedStateFromProps(): {
console.log('getDerivedStateFromProps called.');
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 96

 1. Mounting Methods
 render(): Render is the most important
Lifecycle method because it is used to
render UI or we can say the main View of
the screen.
render() {
return (
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text>Language is: {this.props.name}</Text>
</View>
);
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 97

 1. Mounting Methods
 componentDidMount(): Is called after
render method, It is used for
the network calls.

componentDidMount() {
console.log('componentDidMount called.');
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 98

 2. Updating methods
 Updating methods are used to update the
value of Props or State to React Native.
These methods are called automatically
when a component re-renders.
 It has 4 methods,
1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()
Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 99
2. Updating methods
 getDerivedStateFromProps(): It is
invoked right before calling the render
method, both on the initial mount and on
subsequent updates. It should return an
object to update the state, or null to
update nothing.
static getDerivedStateFromProps(props, state)
{
console.log('getDerivedStateFromProps called.', props);
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 100

2. Updating methods
 shouldComponentUpdate(): To let React
know if a component’s output is not affected by
the current change in state or props.
shouldComponentUpdate(nextProps, nextState)
{
}

 After the shouldComponentUpdate method is

called, a render is called immediately
afterwardsdepending on the returned value from
shouldComponentUpdate, which defaults to true

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 101

 2. Updating methods
 getSnapshotBeforeUpdate(): It is
invoked right before the most recently
rendered output is committed to e.g. the
DOM. It enables your component to
capture some information from the DOM
(e.g. scroll position) before it is potentially
changed.
getSnapshotBeforeUpdate(prevProps, prevState)
{
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 102

2. Updating methods
 componentDidUpdate(): It is called
after the rendering, this method is mostly
used to interact with updated rendering
values and execute any post-render
events.
componentDidUpdate(prevProp, prevState) {
console.log('componentDidUpdate called.');
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 103

3. Unmounting method
 componentWillUnmount(): It is
called when the component is removed
from the DOM, Users can clear any
running timers, stop network requests
and cleaning any previously stored value
in the application in this method.
componentWillUnmount() {
console.log('componentWillUnmount called.');
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 104

4. Error handling method
1. getDerivedStateFromError(): This
lifecycle is invoked after an error has been
thrown by a descendant component. It
receives the error that was thrown as a
parameter and should return a value to
update state.
static getDerivedStateFromError(error)
{
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 105

4. Error handling method
2. componentDidCatch(): It is a part of
the error handling method. It is used to find
errors between JavaScript code and handle
them by passing the correct message or
argument. It will help us to use any try
/cache block to handle any error.

componentDidCatch(error, info) {
console.log('componentDidCatch called.');
}

Dr. Y. AROCKIA RAJ, AP/CSE, PSNA CET. 106