PRELIM

REACT NATIVE AND

ITS ECOSYSTEM
Module 1: Introduction to React Native
WHAT IS REACT NATIVE?

React Native (also known as RN) is a

popular JavaScript-based mobile app
framework that allows you to build
natively-rendered mobile apps for iOS
and Android. The framework lets you
create an application for various
platforms by using the same
codebase
React Native, an open-source
project launched by Facebook
in 2015, quickly became a
leading solution for mobile
development. It powers top
mobile apps like Instagram,
Facebook, and Skype.
 THE HISTORY OF REACT
NATIVE
• Facebook initially launched a mobile webpage using HTML5 but
faced performance and UI limitations.
• In 2012, Mark Zuckerberg acknowledged the mistake of relying
too heavily on HTML instead of native solutions.
• In 2013, developer Jordan Walke discovered a way to create iOS
UI elements using JavaScript.
• A Hackathon was organized to explore JavaScript for mobile
development, leading to the creation of React Native.
• React Native was first released for iOS, with Android support
added before its public launch in 2015.
• By 2018, React Native became the second most popular project
on GitHub and ranked sixth in 2019, with over 9,100 contributors.
 WHAT IS REACT NATIVE
ECOSYSTEM?

The React Native ecosystem refers to

the entire collection of tools, libraries,
frameworks, and resources that
surround and support the development
of mobile applications using React
Native.
 THE REACT NATIVE ECOSYSTEM
HOW DOES IT WORK?

1. BOILERPLATES AND UI FRAMEWORKS

React Native Boilerplate is a code that lets you start

developing with no hassle. This allows iteration of the
project code manually. React Native app developers can
implement code templates instead of coding right away,
to save time. React Native Boilerplates are Easy to use,
scalable, and lightweight. React Native BoilerPlates and UI
Frameworks includes:
 REACT NATIVE ELEMENTS

React Native Elements is a cross-

platform React Native UI tool used for
React Native projects to bring
together many of the best open-
source user interface elements made
by React Native app developers
using JavaScript.
 REACT NATIVE UI KITTEN

UI Kitten is an open-source UI
framework that allows you to create
eye-catching and fabulous multi-
brand cross-platform mobile
applications with dark or bright
themes and customizable
components.
 NATIVE BASE

Native Base is an accessible open

source framework that helps to build
consistent UI on a single javascript
code base for the android, iOS, and
web. It provides a local ecosystem in
which native applications can be
built.
 REACT HOOKS

React Hooks are the simple

javascript functions and new edition
in react 16.8. It is used to isolate
reusable parts and life-cycle
characteristics of operational
components.
 ROUTER FLUX/NAVIGATION

Router flux or react native

navigation is used for browsing and
communicating easily between
different screens. It runs on
navigation tools to implement
navigational features.
 REACT NATIVE PAPER

React Native Paper is a standard-

compliant, customizable,
production-ready library of materials
for React Native. It allows you to
create attractive interfaces for
mobile and web applications. It is
robust, fast and responsive.
REACT VS. REACT NATIVE
 REACT VS. REACT NATIVE

“React JSX renders HTML-like components

like <h1>, <p>, etc. While react-native
renders native app view components like
<View> , <Text>, <Image>, <ScrollView>, so
you can't directly reuse your UI component
code unless you rework/replace all the
elements.”
 WHAT IS CROSS-PLATFORM
DEVELOPMENT?

Cross-platform development is the

practice of building software that is
compatible with more than one type of
hardware platform. A cross-platform
application can run on Microsoft
Windows, Linux, and macOS, or just two
of them.
 WHAT IS CROSS-PLATFORM
DEVELOPMENT?

Cross-platform is considered the holy grail

of software development you can build your
codebase once and then run it on any
platform, as opposed to software built
natively for a specific platform. Developers
are able to use the tools they’re proficient in,
like JavaScript or C#, to build platforms
they’re foreign to.
 characteristics of
cross-platform development

WIDER AUDIENCE PLATFORM CONSISTENCY

You don’t have to decide iOS and Android have some

which audience to target, i.e., differences in navigation
iOS or Android users, as and design, but cross-
cross-platform software runs platform development
on both, which gives you addresses these variations
access to a wider user base. automatically through a
shared codebase.
 characteristics of
cross-platform development

REUSABLE CODE QUICKER DEVELOPMENT

A significant portion of the With a single codebase

code can be reused across managing both iOS and
platforms, reducing Android, everything is
development time and centralized, making product
effort development significantly
faster.
 characteristics of
cross-platform development

REDUCED COSTS

Building cross-platform applications can

reduce costs by up to 30% compared to
native apps, thanks to code reuse and
faster development, which directly lower
expenses.
 disadvantages of
cross-platform development

Requires more expertise to ensure high performance

01 Cross-platform apps, like those built with Flutter or React Native, can match native
performance, running at 60 FPS when developed by skilled professionals.

Harder code design

02 Cross-platform apps require more complex coding to ensure responsiveness across
different devices and platforms, leading to extra work for developers to handle
platform-specific exceptions, particularly for advanced features.

Long feature release time

03 With every new feature release for Android or iOS, it takes a while to update both apps
to support the new feature. Native apps are provided with the updates quicker.
 HOW DOES REACT NATIVE
WORK?

NATIVE
JS THREAD BRIDGE
THREADS

React Native uses a "bridge" to enable

communication between JavaScript threads
and native app threads, allowing seamless
interaction despite being written in different
languages.
 WHAT MAKES REACT NATIVE
UNIQUE?

The difference between React Native

and other cross-platform development
solutions is that React Native doesn’t
render WebViews in its code. It runs on
actual, native views and components.
 EXAMPLES OF MOBILE APPS BUILT
WITH REACT NATIVE

FACEBOOK SKYPE INSTAGRAM

Facebook, the creator and In 2017, Skype announced Instagram integrated

driving force behind React a new app built with React React Native into its native
Native, is one of the most Native, exciting users due app, starting with the push
popular apps built with to issues with the older notification view, which
the framework. version. was initially a WebView.
 Benefits of React Native

Code reusability – cross-platform development

01 React Native's biggest advantage is code reusability, allowing apps to
run efficiently on multiple platforms.

Large developer community

02 React Native is an open-source JavaScript framework, enabling
developers to freely contribute and access its resources.

Cost efficiency
03 React Native offers cost efficiency by allowing developers to use the
same codebase for both iOS and Android applications.
 Benefits of React Native

Fast refresh
04 Fast Refresh enables developers to update the app and modify the UI
in real-time without rebuilding the entire app, with changes visible
instantly.

Simple UI
05 React Native uses React JavaScript to create responsive, fast-loading
interfaces, enhancing the overall user experience.

Fast applications
06 Although React Native may be slower than native code, a test
comparing apps built with React Native and Swift showed similar
performance, making the difference unnoticeable to users.
 REACT NATIVE
DIFFERENCES IN DEVELOPMENT FOR
ANDROID AND IOS PLATFORMS

OPERATING SYSTEM

It's recommended to use macOS for React Native

development, as Windows lacks official iOS testing
tools and cannot run XCode, Apple's development
environment. While you can build apps on both
platforms, macOS allows testing for both Android
and iOS apps, ensuring they work properly.
 NATIVE ELEMENTS

Since Android and iOS apps have different

designs and functions, they use different
components. As a result, when using the
same component in React Native, the end
result may differ between iOS and Android.
 SPECIFIC STYLES

iOS and Android have different styles for

React Native elements, such as shadowing.
For example, the green element on the
Android device (right) lacks the shadow
seen on the iOS device (left).
THANK YOU