React Native is an open source framework released by Facebook in 2015 that allows building native mobile apps using React. It uses JavaScript to render components and runs these components on both iOS and Android platforms. The architecture runs JavaScript code on a virtual machine and uses an asynchronous bridge to communicate with native components, allowing truly native UI and performance. It uses CSS flexbox for layout and styling components within JavaScript rather than globally. This provides benefits like deterministic resolution, no dead code, and leveraging React's proven virtual DOM. Getting started requires Node.js, watchman, and the React Native CLI to generate projects that can be run from Xcode or Android Studio.

1. React(ive) Way To Build Native Mobile Apps

2. Some Background on React Native
• Open Sourced by Facebook in March 2015
• Initially was available on iOS only, Later launched on
android
• Over 30+ Stars and 600+ contributors on github
• Currently the fastest growing mobile app platform
(even more popular than swift)
• Native approach results into much powerful
performance than hybrid framework like ionic
• Supports android >4.1 and iOS >7
• Companies are already using it in production

3. React Native Architecture
React-Native architecture is like running an app inside an
app

4. React Native Architecture
ates an asynchronous bridge between javascript interpreter runni

5. React Native Architecture
React Native also creates worker thread if CPU intensive
work like layout, image decoding etc is required.

6. React Native Architecture
Layout and Styling
• React Native uses css inside javascript for styling
And internet reacted like this……..

7. React Native Architecture
Layout and Styling
There are several issues with CSS
• Global Namespace
• Dead Code
• Non-deterministic Resolution
Thats why CSS in Javascript
• All styles are local variables in javascript
• No dead code
• Deterministic Resolution because of local
scope

8. React Native Architecture
Layout and Styling
React uses flexbox for layout
Calm Down

9. React Native Architecture
css-layout
Reimplementation of CSS layout using pure JavaScript
https://github.com/facebook/css-layout
• Implementation of Flexbox into pure javascript
• Transpiled version available in Java, c# and C
• For react native, It provides the required layout
parameter like Height, Width to native platform
using the async bridge

10. Benefits of Architecture
• Truly native performance
• Threads can take benefits of multi core CPU
• Uses the react’s battle proven virtual DOM but instead of
updating browser DOM it updates native component if
change is detected.
• Abstracts away the layout from native to CSS Flexbox
Layout
• Super fast turn around time
• If are familiar with react then you can leverage that to
make mobile apps

11. To Get Started
You will Need
• OS X if you are developing for iOS
• Node 4.0 (or) greater
• watchman and flow tool from facebook
Quick Start Guide
• “npm install -g react-native-cli”
• “react-native init MyBrandNewApp” to start new app
• Open the Xcode project in Xcode and run from there for
iOS
• “react-native run-android” for running android version

12. Demo Time

13. Cautions
• React Native is cutting edge technology and There’s
nothing similar to like this in market. So it might break
for some edge cases.
• There might not be all native modules available but
eco system is growing and its growing super fast.
• The same code might not work across both android
and iOS. Some tweaking might be required because
of native implementation

14. Go build your next dream app with React
Native and make world a better place

15. Thank You
Questions ?