Understanding "Native" In React-Native

Yeswanth Swami

First WalkIn Technologies, India

@s1thsv

@s1thsv

Agenda

  1. React-Native "Bridge"
  2. Push Notifications in Android

Overview of Bridge

Native Realm (Java)

JS Realm

(Javascript)

Bridge

(C++/Java)

UI thread

Button

JS thread

Runs Js

View Managers

Dispatch view updates

Update UI

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

Push Notifications in Android

App Backend

FCM

Mobile

Request for Token

Token `A`

Store Token `A`

Send Notifications to Device with Token `A` 

Push Notification

Code @ JS end

Token

Get Token from FCM & store it in Backend

 

Pretty straightforward, right? 

firebase.messaging().getToken(
  (token) => {
   //Send the token to the App backend
});
firebase.notifications().
  onNotificationDisplayed((data) => {
    //Handle deeplinks
});

Deeplinks

Get any Deeplink data from the Notification payload and take user to the specific screen

eg. Clicking on a notification, I take the user to the transactions page (instead of the home page) 

Customizations @ Android end

1. Group notifications 

 

2. Custom Actions

Extend your class from 

FirebaseMessagingService

Food for thought

How can React-Native developers proactively catch up with Native SDK changes? 

  1. From Android 26, all notifications need to be assigned a Channel (https://developer.android.com/training/notify-user/channels)

  2. Solution for uniquely identifying an iOS app… iOS Device Check API, available from iOS 11 (https://developer.apple.com/documentation/devicecheck)

Thank you! :)

Understanding "Native" in React-Native

By Yeswanth S

Made with Slides.com

Understanding "Native" in React-Native

  • 489

More from Yeswanth S