16 April 2016

React Amsterdam 2016: React Native Internals

Speaker: @tadeuzagallo

React Native

  • No WebView
  • No HTML
  • No CSS
  • Only JS


React Native App


Has a Bridge with the following threads:


  • Main
  • JavaScript
  • ShadowQueue (where layout happens)
  • Native Modules threads:
    • Network
    • LocalStorage
    • YourCustomModule

What happens when you run a simple app? (for graph, see sheets)

  1. Load the JavaScript Bundle
  2. Load the Native Modules
  3. Start the JavaScript VM
  4. Load the JSON configuration
  5. Execute the Application's JavaScript bundle
  6. Abstract JavaScript Execution
  7. Create Shadow Views
  8. (Compute) Layout (in background thread)
  9. Create Native Views
  10. Render to Screen
Now the user starts interaction, what happens the first time? (for graph, see sheets)
  1. User interaction
  2. UIKit
  3. Native Module
  4. Abstract JavaScript execution
  5. JavaScript call to Native
  6. Bridge
  7. Native module
Now the user starts the same interaction, what happens? (for graph, see sheets)

    1. User interaction
    2. Native module

    Question: Why iOS first and Android second

    Started with hackaton and iOS. Android team is larger now and is catching up.

    Question: Will you support other platforms?

    The team is to small to do so. The recent announcement that React Native will get support for Windows Universal Applications is actually a Microsoft only effort because Microsoft like React Native to support their platform.