Understanding "Native" In React-Native

Yeswanth Swami

First WalkIn Technologies, India

@s1thsv

@s1thsv

Agenda

  1. React-Native "Bridge"
  2. Creating Simple Native module in Android & iOS 

Overview of Bridge

Native Realm (Java)

JS Realm

(Javascript)

Bridge

(C++/Java)

UI thread

Button

JS thread

Runs Js

Layout

Dispatch view updates

Update UI

[...,create View(id,RCTView,..)]
view.appendChild(RCTView)
  1. React-Native bridge helps in communication between Realms. Data needs to be serialised at one end and deserialised at the other end. 
  2. UI updates, JS and Layout operations happen on three different threads
  3. Communication between these threads are asynchronous

UI thread

Button

JS thread

Runs Js

View Managers

Dispatch view updates

Update UI

Dispatch view updates

Update UI

Runs Js

x 60/sec

Animated API

Animated.sequence([
  // decay, then spring to start and twirl
  Animated.decay(position, {
    // coast to a stop
    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
    deceleration: 0.997,
  }),
  Animated.parallel([
    // after decay, in parallel:
    Animated.spring(position, {
      toValue: {x: 0, y: 0}, // return to start
    }),
    Animated.timing(twirl, {
      // and twirl
      toValue: 360,
    }),
  ]),
]).start();
  • Shipped with React-Native
  • Declarative API to off-load animations
  • Fire and forget from JS and let the native code handle the animations

 

https://facebook.github.io/react-native/docs/animations

Interaction Manager

InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

Example

Let's say you are transitioning from Screen1 to Screen2 and need to do some computation before rendering Screen2

 

 

 

https://facebook.github.io/react-native/docs/interactionmanager

React Native New Architecture (Fabric)

  • Asynchronous (just like what we saw)
  • Synchronous (and ways to run on UI thread)
  • JSI (Javascript Interface) - A interop layer between native and Android. References to the native module themselves. 

Not yet released! 

Why Build Native Modules? 

  • You want to use a native API or use a native View 
  • You already have native code and want to quickly use it with your React-Native App 
  • You are using other 3rd party RN libraries with native code 

Demo(s)

Android Demo

React-Native Link

1. settings.gradle file -> Path to Android native folder (for that library)

2. app/build.gradle file -> 'compile' command for the Android project (for that library) 

3. MainApplication.java -> Tell RN about the package

iOS Demo

React-Native Link

1. Add project to Libraries

2.  Target > General > Linked Frameworks & Libraries > Select your RN library 

Android

Java

Groovy (In gradle)

XML 

 

iOS

ObjC

Swift 

pbxproj (own format)

Javascript

React

React-Native

 

Philosophy worked for me

  1. Don't get overwhelmed 
  2. It's okay to not understand everything
  3. Android & iOS change pretty fast (and it's a good idea to keep a tab on what's happening)
  4. Make friends who know Android or iOS 
  5. Build one/two demo apps in pure Android or pure iOS 

Thank you! :)

Understanding "Native" in React-Native [for ReactJS Meetup BLR]

By Yeswanth S

Made with Slides.com

Understanding "Native" in React-Native [for ReactJS Meetup BLR]

  • 568

More from Yeswanth S