2. 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
WHAT IS REACT NATIVE?
3. 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.
4. 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.
5. 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.
WHAT IS REACT NATIVE
ECOSYSTEM?
6. 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:
THE REACT NATIVE ECOSYSTEM
HOW DOES IT WORK?
1. BOILERPLATES AND UI FRAMEWORKS
8. 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 ELEMENTS
9. 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.
REACT NATIVE UI KITTEN
10. 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.
NATIVE BASE
11. 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.
REACT HOOKS
12. 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.
ROUTER FLUX/NAVIGATION
13. 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 NATIVE PAPER
15. “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.”
REACT VS. REACT NATIVE
16. 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?
17. 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.
WHAT IS CROSS-PLATFORM
DEVELOPMENT?
18. You don’t have to decide which
audience to target, i.e.,
iOS or Android users, as cross-
platform software runs on
both, which gives you access
to a wider user base.
iOS and Android have some
differences in navigation and
design, but cross-platform
development addresses these
variations automatically
through a shared codebase.
WIDER AUDIENCE PLATFORM CONSISTENCY
characteristics of
cross-platform development
19. A significant portion of the
code can be reused across
platforms, reducing
development time and effort
With a single codebase
managing both iOS and
Android, everything is
centralized, making product
development significantly
faster.
REUSABLE CODE QUICKER DEVELOPMENT
characteristics of
cross-platform development
20. 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.
REDUCED COSTS
characteristics of
cross-platform development
21. Requires more expertise to ensure high performance
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
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
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.
disadvantages of
cross-platform development
01
02
03
22. JS THREAD BRIDGE
NATIVE
THREADS
HOW DOES REACT NATIVE
WORK?
React Native uses a "bridge" to enable
communication between JavaScript threads and
native app threads, allowing seamless
interaction despite being written in different
languages.
23. 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.
24. FACEBOOK SKYPE INSTAGRAM
Facebook, the creator and
driving force behind React
Native, is one of the most
popular apps built with the
framework.
In 2017, Skype announced a
new app built with React
Native, exciting users due
to issues with the older
version.
Instagram integrated React
Native into its native app,
starting with the push
notification view, which was
initially a WebView.
EXAMPLES OF MOBILE APPS BUILT
WITH REACT NATIVE
25. Code reusability – cross-platform development
React Native's biggest advantage is code reusability, allowing apps to run
efficiently on multiple platforms.
Large developer community
React Native is an open-source JavaScript framework, enabling developers
to freely contribute and access its resources.
Cost efficiency
React Native offers cost efficiency by allowing developers to use the same
codebase for both iOS and Android applications.
Benefits of React Native
01
02
03
26. Fast refresh
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
React Native uses React JavaScript to create responsive, fast-loading
interfaces, enhancing the overall user experience.
Fast applications
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.
Benefits of React Native
04
05
06
27. REACT NATIVE
DIFFERENCES IN DEVELOPMENT FOR
ANDROID AND IOS PLATFORMS
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.
OPERATING SYSTEM
28. 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.
NATIVE ELEMENTS
29. 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).
SPECIFIC STYLES
