React Native is a JavaScript framework used for developing user interface of mobile application.

1. REACT NATIVE
Framework For Building Mobile Application
Guided by,
Dr. Jeyakrishnan V
Presented by,
Jaise P Jose
CSE 2015 - 2019

2. ABSTRACT
• Mobile apps are one of the unavoidable platform in this decade.
• The presentation deals with the introduction of a new technology for developing
mobile apps.
• There are various core features for React Native that will be discussed.
React Native – Framework for Building Mobile Application
1

3. 1
What is React
Native? 2
Why React
Native? 3 Limitations
4
Native &
Hybrid Apps
5
How React
Native Works? 6 Requirements
7
Steps for
Installing 8
Sample
Program
React Native – Framework for Building Mobile Application
Contents
2

4. What Is React?
React Native – Framework for Building Mobile Application
• React is a declarative, efficient, and
flexible JavaScript library for building user
interfaces.
• React is for Web.
3

5. What Is React Native?
React Native – Framework for Building Mobile Application
• React Native lets you build mobile apps.
• It is an extension of React.
• JavaScript library.
• Built for building user interface for Mobile
Apps.
4

6. Who Developed React Native?
React Native – Framework for Building Mobile Application
Developed by Facebook
First Release in 2013 in GitHub
5

7. React Native – Framework for Building Mobile Application
Who Uses React Native?
Facebook Instagram Pinterest Skype Uber Walmart
6

8. Why REACT NATIVE?
React Native – Framework for Building Mobile Application
7

9. React Native – Framework for Building Mobile Application
1. Cross Platform Compatibility
Android iOS
8

10. [3]9

11. 2. Don’t Waste Time On Recompiling
React Native – Framework for Building Mobile Application
• Hot Reloading Feature [2]
10

12. 3. Strong Performance for mobile
environment
• Uses GPU Instead of CPU
• More strength for mobile
React Native – Framework for Building Mobile Application
11

13. 4. Modular Architecture
• Easy to understand
• Easy to test
• Development time reduces
React Native – Framework for Building Mobile Application
12

14. React Native – Framework for Building Mobile Application
REACT NATIVE IS STILL YOUNG.
Its improving day by day
Limitations
13

15. React Native – Framework for Building Mobile Application
Native & Hybrid Apps
14

16. Native Mobile App
React Native – Framework for Building Mobile Application
• Uses specific programming language.
• Objective C or Swift for iOS.
• Java for Android.
• They are platform specific.
[1]
15

17. Hybrid Mobile App
React Native – Framework for Building Mobile Application
• Use Web Technologies.
• HTML, CSS, JavaScript.
• Runs on any platform.
[1]
16

18. React Native- Native or Hybrid?
React Native – Framework for Building Mobile Application
• Not a Hybrid app.
• Not 100% Native.
[1]
17

19. How React Native Works?
React Native – Framework for Building Mobile Application
18

20. Threads In React Native
React Native – Framework for Building Mobile Application
• UI Thread – Layout, Measures, Draw
• JS Thread – Logic Functions
• Native Modules Thread – Calls Native API’s
• Render Thread – Generate OpenGL
[4]
19

21. Process Involved In Working
React Native – Framework for Building Mobile Application
• UI Thread starts execution
• Loads JS Bundle
• Sends it to another JS Thread
• Diffing Starts & generates Virtual DOM
• Sends changes to Shadow Thread
• Shadow thread sends layout/object to
main thread.
[4]
20

22. UI Thread JS Thread
JS Bundle
Virtual DOM
Shadow Thread
JS Bundle
Diffing
21
React Native – Framework for Building Mobile Application

23. React Native – Framework for Building Mobile Application
Requirements
Visit nodejs.org An Emulator/ Real Mobile
Visual Studio Code/ Sublime
Text Editor or any other
Technical Skills Required:
JavaScript, CSS
22

24. React Native – Framework for Building Mobile Application
Steps
Install React Native:
npm install –g react-native-cli
Creating a New Project
react-native init “ProjectName”
Move to Project Folder
cd “ProjectName”
Run Project
react-native run-android OR react-native run-ios
23

25. React Native – Framework for Building Mobile Application
Result
[2]
24

26. React Native – Framework for Building Mobile Application
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
Sample Program
25

27. Conclusion
React Native – Framework for Building Mobile Application
• React Native is a cross platform technology.
• Easy to use and maintenance.
• Low cost.
• Its still improving.
26

28. References
React Native – Framework for Building Mobile Application
1. IEEE Paper: JavaScript in mobile applications: React native vs
ionic vs Native Script vs native development, 2018
2. https://facebook.github.io/react-native
3. https://belitsoft.com/react-native-development/advantages
4. https://www.geeksforgeeks.org/react-native-works/
27

29. THANK YOU