What is React-Native? Why React-Native? How React-Native works in detail? - Metro bundler - Main Thread - Shadow Thread - Javascript Thread Yoga Engine Threads Communication in React-Native Comparison with Flutter and Native React-Native Components

1. Learn Once
Write Anywhere
The React Way

2. Prerequisites
o Javascript Knowledge, ES6+
o Basic Knowledge of React.JS
o Command Line Knowledge
o Basic Understanding of NPM
o Basic Understanding of Android Studio and/or Xcode

4. What is React-Native?
o A Javascript Framework based on React
o Build Native Applications using Javascript
o Native Support for IOS, Android, Apple TV, Android TV, Windows, XBox, MacOS Platforms
o Handles rendering on Native Side
o Learn once write anywhere

5. Why React-Native?

7. How React-Native Works?
o UI code is written with Javascript, React
o Javascript code is bundled&minified using Metro bundler
o React-Native has 3 threads (Main/UI which spawns Shadow and JS Threads)
o Javascript code runs on JS Thread
o Layout is calculated using Yoga engine on Shadow Thread
o Rendering is done on native side on UI Thread
o Threads communicate asynchronously through the Native Bridge

8. React-Native Tech.

9. React-Native Future

12. Comparison
React-Native Flutter Native
Backed by Facebook Backed by Google
Android - Backed by
Google
IOS - Backed by
Apple
Javascript Dart Kotlin + Java Swift
Windows, XBox supported
Linux, Macos supported
Apple TV, Android TV supported
Windows, XBox support on Alpha
Desktop support on Beta
TV support (ko Apple TV, ok Android TV)
Android IOS
Single codebase for multiple platforms Single codebase for multiple platforms Separate codebase Separate codebase
Bridges affect performance Compiled ahead of time into native code
No performance
concern
No performance
concern
Uses 3rd party UI Components Has it’s own UI Components
Has it’s own UI
Components
Has it’s own UI
Components
Lots of Separate Documentation More Detailed Documentation
Much More
Detailed
Documentation
Apple-centric
Documentation
Unit Testing - Good
UI (Functional) Testing - Complex
Unit and Functional Testing with Dart’s
testing framework
Unit and Function
Testing
Unit and Function
Testing

14. Basic Components

15. UI Components
User Interface
List Views

16. Platform Specific Components
Android Components
IOS Components

17. Other Components

19. Happy Coding
HELLO WORLD

20. THANK YOU
ASIM YILDIZ