React Native Introduction

1. A Hybrid App Development
Framework

2. Native Hybrid

3. Introduction
❏ Open source cross-platform framework.
❏ Developed by Facebook and first public preview was released in March
2015.
❏ Build mobile apps using React and JavaScript.
❏ Currently supports Android and iOS platform.
❏ Creates “Real App”.

4. How does it work?
In React Native, virtual DOM acts as a layer between the developer’s
description of how things look and work done to render the application.
React Native invokes Objective-C APIs and Java APIs to render native
components.

5. <Text>
Objective-C
API
Java API
UILabel
<TextView>
Converts
Converts
RN Component
Native Views
RCT Bridge

6. How to get started?
We can start building our Application either by Expo or React Native CLI.
❏ Expo is the easiest way to get started with react native as it doesn’t
require setting up Android Studio and Xcode.
❏ React Native CLI needs both SDKs to be installed for running react native
applications.

7. To create and run react native app using
CRNA use below commands
npm install -g create-react-
native-app
create-react-native-app ExampleApp
npm run android or npm run ios
Expo
❏ Build a project using Expo (CRNA)
❏ Install Expo app on phone and
connect it to the same network as
our computer.
❏ Has tons of inbuilt libraries.
❏ Doesn’t allow third party libraries
that requires native code linking.
❏ We can eject our Expo project to RN-
CLI project if required.

8. React Native CLI
❏ Creates app template with native
iOS and Android projects that can
be modified.
❏ Allow us to add third party libraries
with native code linking.
❏ Allow us to modify native code.
To create and run react native app using
CLI use below commands -
npm install -g react-native-cli
react-native init ExampleApp
react-native run-android/run-ios

9. Core Concepts
❏ Components
❏ Functional/Stateless Component
❏ Class/Stateful Component
❏ JSX
❏ Unidirectional Data Flow
❏ Virtual DOM

11. STATE

12. Core features
❏ React Native is like React, but it uses native components instead of web
components as building blocks.
❏ React Native handles layout with Yoga, a cross-platform C library that
handles layout calculations via the flexbox API.
❏ React native supports State/Props to control component. Props are set by
parent and State is the data that is going to change.
❏ React Native Animated library, provides jank-free animations and even
interaction-driven animations such as scrolling parallax.

13. Lifecycle
Initialization
Mounting
Updation
Unmounting

14. Lifecycle

15. Inbuilt Tools
React Native has its own inbuilt tooling such as -
1. Reload
2. Debug JS Remotely
3. Show Perf Monitor
1. Enable Live Reload
2. Enable Hot Reloading

16. Live Reloading Hot Reloading
1... 2... 3...
4... 5...
6...
6...
7.. 8... 9...
Reloads the whole application Reloads the screen with updated changes

17. Why Use it?
● Cross Platform Usage
● Open Source - Possible to leverage the extremely vast array of javascript
projects such as redux, reselect, jest, etc.
● Increase in Developer Velocity
● Backed by Native Platforms ( iOS and Android )
● Based on React
● Iteration Speed - Hot reloading enables to test changes on Android and
iOS in just a second or two.

19. Limitations
❏ React Native Immaturity - React Native is less mature than Android or
iOS. Some trivial things in Native can be complex to implement in react
native.
❏ Gestures - The touch subsystem for Android and iOS are different
enough that coming up with a unified API has been challenging for the
entire React Native community.
❏ Javascript Untyped nature - Lack of type safety is both difficult to scale
and can became a point of contention for mobile engineers used to typed
languages.
❏ Refactoring - A side-effect of JavaScript being untyped is that refactoring
was extremely difficult and error-prone.

20. React Native - who’s using it?
Note: Please find a complete list of apps built using react native on facebook showcase.

21. Questions?

22. Thank you

23. Sources & Helpful links
➢ React Native Documentation
➢ Expo Documentation
➢ Navigation
➢ Redux
➢ Vector icons
➢ React Native at Airbnb: The Technology
➢ Supporting React Native at Pinterest