Luciano Hanyon Wu

2016

Luciano Hanyon Wu

Born and grew up in Italy, Rome
4 years college in Japan, Tokyo
2 years developer in China, Shanghai

Speaks: Italian, English, Chinese, Japanese

Seed

DAKA

Built 2 react-native Apps

Currently working on

SODA competition

Machine Learning
Data Science
NLP

Safety-Map

Language Detector

Open Source
Originated from Facebook
Consistent with reactjs

2015/3 iOS release
2015/9 android release
New version release every 2 weeks

iOS-ObjectiveC

Android-java

iOS-ObjectiveC

Android-java

javascript

Code Repository

Native Dev

React-Native

Less code to maintain

No repeated business logic

No repeated styling

Designer

Android

iOS

compiling...

Design Workflow - Native Development

Designer

reload

flex-box

Design Workflow - React-Native

Styling Demo

https://rnplay.org

Development Experience & Debugging Tool

Red screen of error

Warnings

Safari/Chorome debugging

Inspector

Performance Monitor

Debugging demo

Calling native code from javascript

RCT_EXPORT_METHOD(doSomethingNative){
  NSLog(@"Doing something in native iOS");
}

@ReactMethod
public void doSomethingNative() {
  Toast.makeText(getReactApplicationContext(),
    "Hello React-Native", Toast.LENGTH_SHORT).show();
}

var React = require('react-native');
MyCustomModules = React.NativeModules.MyCustomModule;
MyCustomModule.doSomethingNative();

ios

android

javascript

Listening to native code from javascript

[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
                                               body:@{@"name": @"MyName"}];

var subscription = NativeAppEventEmitter.addListener(
  'EventReminder',
  (reminder) => console.log(reminder.name)
);

WritableMap params = Arguments.createMap();
params.putString("name", "MyName");
reactContext
      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
      .emit("EventReminder", params);

ios

android

javascript

const Platform = require('Platform');
const isAndroid = Platform.OS === 'android';

if(isAndroid){
  //
} else {
  //
}


// MyComponent.ios.js
// MyComponent.android.js
const MyComponent = require('./MyComponent');

Platform Specific Code

Platform Differences Demo

const Dimensions   = require('Dimensions');
const deviceWidth  = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const PixelRatio   = require('PixelRatio').get();

Dimensions

<View onLayout={(event)=>{console.log(event.nativeEvent.layout)}}>
// {y: 865.5, x: 20, width: 288, height: 18.5}

this._myComponent.measure(function(x,y,width,height,pageX,pageY){
  console.log(x, y, width, height, pageX, pageY):
});

Screen size, PixelRatio

onLayout

measure()

Animations

LayoutAnimation.configureNext(
{ duration: '500',
  create:{type:'easeIn',property:'opacity'},
  update:{type:'easeIn'}
});
this.setState({
  heigth:    500,
});

Animated.timing(
  this.state.height,
  { toValue:  500,
    duration: 200,
    easing:   Easing.easeIn }
).start();

Animations Demo

LocalStorage Caching

AsyncStorage.setItem(key, value);
AsyncStorage.getItem(key, (error, value) => {
  console.log(key, value);
};

AsyncStorage.multiSet([
  [key1, value1],
  [key2, value2],
]);
var keyValues = await AsyncStorage.multiGet([key1,key2]);
keyValues.forEach((keyValue)=>{
  var key = keyValue[0];
  var value = keyValue[1];
  console.log(key, value);
});