Extending RN with your native code

React Native++

http://underscope.io

React Native

ALANTU

INGAME

VORTERIX

User experience
Developer experience

DX

UX


Native
 
Acceptable
Native

Poor
 
Great
Great

UX

DX

What can I add from native?

Anything

Native Modules

Native UI Components

View, Text, Image, ...

Alert, NetInfo, Clipboard, ...

Module

Package

MainApplication

Business Logic

Building a Native Module in Android

Module

Package

MainApplication

Biz Logic

Building a Native Module in Android

public class MyModule extends ReactContextBaseJavaModule {

  public MyModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }
 

  @Override
  public String getName() {
    return "MyModule";
  }

  @ReactMethod
  public void echo(String value, Promise promise) {
    promise.resolve(value);
  }
}

This is the native functionality you want to add to the JS side...

Module

Package

MainApplication

Biz Logic

Building a Native Module in Android

class MyReactPackage implements ReactPackage {

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  @Override
  public List<ViewManager> createViewManagers(
                             ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
                             ReactApplicationContext reactContext) {
    return Arrays.<NativeModule>asList(new MyModule());
  }

}

...then, here you register the module to be available in JS, and...

Module

Package

MainApplication

Biz Logic

Building a Native Module in Android

public class MainApplication extends Application 
  implements ReactApplication {

  ...


  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new MyReactPackage()); // <-- your package
  }


  ...

}

...finally, you let the application know about that package.

Module

Package

MainApplication

Biz Logic

Building a Native Module in Android

import { NativeModules } from 'react-native'

const MyModule = NativeModules.MyModule

MyModule.echo('hello').then(res => console.log(res))

Now, you just use it on the JavaScript side!

ViewManager

Package

MainApplication

Module / Wrapper

Business Logic

Building a Native UI Component in Android

View

ViewManager

Package

MainApplication

Module/Wrapper

Biz Logic

Building a Native UI Component in Android

View

import android.view.View;

class MyView extends View {

  ...


  public void setFoo(String foo) {
    // do something
  }


  ...


}

This is your view, do whatever visual thing but extend View or subclass

ViewManager

Package

MainApplication

Module/Wrapper

Biz Logic

Building a Native UI Component in Android

View

public class MyViewManager extends SimpleViewManager<MyView> {

  @Override
  public String getName() {
    return "MyView";
  }


  @Override
  public MyView createViewInstance(ThemedReactContext context) {
    return new MyView(context); // default state
  }
  @ReactProp(name = "foo")
  public void setFoo(MyView view, @Nullable String foo) {
    view.setFoo(foo);
  }

}

From here you create your custom view and update its props

ViewManager

Package

MainApplication

Module/Wrapper

Biz Logic

Building a Native UI Component in Android

View

class MyReactPackage implements ReactPackage {

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  @Override
  public List<ViewManager> createViewManagers(
                             ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
      new MyViewManager()
    );
  }

  @Override
  public List<NativeModule> createNativeModules(
                             ReactApplicationContext reactContext) {
    return Arrays.<NativeModule>asList(
      new MyModule()
    );
  }

}

Here you register your ViewManager to be available in JS and...

ViewManager

Package

MainApplication

Module/Wrapper

Biz Logic

Building a Native UI Component in Android

View

public class MainApplication extends Application 
  implements ReactApplication {

  ...


  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new MyReactPackage()); // <-- your package
  }


  ...

}

...finally, you let the application know about that package.

ViewManager

Package

MainApplication

Module/Wrapper

Biz Logic

Building a Native UI Component in Android

View

import { PropTypes } from 'react'
import { requireNativeComponent, View } from 'react-native'

const iface = {
  name: 'MyView',
  propTypes: {
    foo: PropTypes.string,
    ...View.propTypes // include the default view properties
  },
}

export default requireNativeComponent('MyView', iface)

Before use it, we define its interface

ViewManager

Package

MainApplication

Module/Wrapper

Biz Logic

Building a Native UI Component in Android

View

import React, { Component } from 'react'

import MyView from '/components/MyView'

class MySample extends Component {

  render() {
    <MyView foo="bar" />
  }

}

export default MySample

Now, use it as any other component!

Going Deep

React Native Docs for Android
http://facebook.github.io/react-native/docs/native-modules-android.html
http://facebook.github.io/react-native/docs/native-components-android.html
 

React Native Docs for iOS

http://facebook.github.io/react-native/docs/native-modules-ios.html
http://facebook.github.io/react-native/docs/native-components-ios.html

 

React Native Codebase
https://github.com/facebook/react-native

 

Demo

Thank you

Reach us at @underscopeio

and join the Slack channel on React Native at http://meetupjs.slack.com

Made with Slides.com