Living in an async world of React Native Krzysztof Magiera (@kzzzf) [email protected] 

REACT NATIVE JS Thread Native Thread UI Thread time 

ASYNC STORAGE onboardingCompleted? render(MainApp) render(OnboardingComponent) YES N O 

ASYNC STORAGE JS Thread Native Thread getItem('onboardingCompleted'); AsyncStorage if (YES) { return } else { return } UI Thread 

ASYNC STORAGE JS Thread Native Thread getItem('onboardingCompleted'); AsyncStorage if (YES) { return } else { return } UI Thread layout render render rendering ! 

CREATING “SYNC” STORAGE - (NSDictionary *)constantsToExport RCTBridgeModule iOS public @Nullable Map getConstants() BaseJavaModule Android const MySyncStorageModule = require('NativeModules').MySyncStorageModule; const _data = MySyncStorageModule.data; function getItem(key) { return _data[key]; } function setItem(key, value) { _data[key] = value; MySyncStorageModule.asyncSet(key, value); } JS 

SCREEN ORIENTATION https://www.npmjs.com/package/react-native-orientation Orientation.getInitialOrientation(); // PORTRAIT, LANDSCAPE, etc... Orientation.addOrientationListener((orientation) => { // orientation = PORTRAIT, LANDSCAPE, etc... }); DeviceEventEmitter.addListener('namedOrientationDidChange', (orientation) => { // orientation.rotationDegrees // orientation.isLandscape }); React Native Core (android only) 

SCREEN ORIENTATION 

SCREEN ORIENTATION JS Thread Native Thread UI Thread orientation changes if (isLandscape) { return } else { return } event Layout rendering 

SCREEN ORIENTATION JS Thread Native Thread UI Thread orientation changes if (isLandscape) { return } else { return } event Layout rendering render Layout rendering ! 

SCREEN ORIENTATION ! ! ! ! ! ! ! ! ! 

CONTROL ORIENTATION CHANGES IN JS onOrientationChange = (orientation) => { lockToOrientation(orientation); this.setState({ orientation }) }; lockToOrientation(initialOrientation); render() { if (this.state.orientation === 'LANDSCAPE') { return ; } else { return } } 

ANIMATED var someValue = new Animated.Value(0); // can be kept in the component state return ( Hello! ); Animated.spring( someValue, { toValue: 1, friction: 0.5, } ).start(); 

ANIMATED JS Thread Native Thread Animated.spring(...).start() UI Thread event animationLoop() rendering update some views UIManager setTimeout TimerModule 

ANIMATED JS Thread Native Thread Animated.spring(...).start() UI Thread event animationLoop() rendering update some views UIManager setTimeout TimerModule event TimerModule animationLoop() rendering update some views UIManager event TimerModule animationLoop() update some views UIManager 

ANIMATED ! ! ! ! ! ! ! ! ! 

ANIMATED - OFFLOADED Animated.spring( someValue, { toValue: 1, friction: 0.5, useNativeDriver: true, } ).start(); 

TOUCH EVENTS JS Thread Native Thread UI Thread rendering update some views UIManager handleTouch() event 

handleTouch() f1 f2 f3 … sorry man, have to compose the frame input compose VSYNC input compose input rendering UI Thread JS Thread TOUCH EVENTS 

TOUCH EVENTS ! ! ! ! ! ! ! ! ! 

TOUCH EVENTS 

GESTURE HANDLING JS Thread Native Thread UI Thread handleTouch() send touch down event Touch DOWN Scroll recognizer Touchable 

GESTURE HANDLING JS Thread Native Thread UI Thread handleTouch() send touch down event Touch DOWN Touch MOVE handleTouch() handleTouch() Touch MOVE Touch MOVE send touch move event send touch move event Scroll recognizer Touchable 

GESTURE HANDLING JS Thread Native Thread UI Thread handleTouch() send touch down event Touch DOWN Touch MOVE handleTouch() handleTouch() Touch MOVE Touch MOVE send touch move event send touch move event send scroll event handleScroll() Scroll recognizer " Touchable # 

GESTURE HANDLING JS Thread Native Thread UI Thread Touch DOWN Scroll recognizer handleTouch() send touch down event Touchable 

GESTURE HANDLING JS Thread Native Thread UI Thread Touch DOWN handleTouch() handleTouch() Touch MOVE Touch MOVE Touch UP send touch move event send touch move event Scroll recognizer handleTouch() send touch down event Touchable 

GESTURE HANDLING JS Thread Native Thread UI Thread Touch DOWN handleTouch() handleTouch() Touch MOVE Touch MOVE Touch UP send touch move event send touch move event Scroll recognizer handleTouch() send touch up event # handleTouch() send touch down event Touchable " 

GESTURE HANDLING 

JS Thread Native Thread UI Thread Touch DOWN handleTouch() send touch down event PanResponder GESTURE HANDLING Scroll recognizer 

JS Thread Native Thread UI Thread Touch DOWN Touch MOVE handleTouch() handleTouch() Touch MOVE Touch MOVE send touch move event send touch move event handleTouch() send touch down event PanResponder GESTURE HANDLING Scroll recognizer 

JS Thread Native Thread UI Thread Touch DOWN Touch MOVE handleTouch() handleTouch() Touch MOVE Touch MOVE send touch move event send touch move event handleTouch() send touch down event PanResponder " GESTURE HANDLING Scroll recognizer " 

GESTURE HANDLING ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! 

class Button extends React.Component { render() { return ( Hello ); } } GESTURE HANDLING 

class Button extends React.Component { render() { return ( Hello ); } _onStateChange = (event) => { } } GESTURE HANDLING 

class Button extends React.Component { render() { return ( Hello ); } _onStateChange = (event) => { this.setState({ pressed: event.state === State.BEGAN }); if (event.state === State.ACTIVE) { this.props.onClick(); } } } GESTURE HANDLING 

class Draggable extends React.Component { constructor(props) { super(props); this._translateX = new Animated.Value(0); this._translateY = new Animated.Value(0); } render() { return ( ); } } GESTURE HANDLING 

class Draggable extends React.Component { constructor(props) { super(props); this._translateX = new Animated.Value(0); this._translateY = new Animated.Value(0); } render() { return ( ); } } GESTURE HANDLING 

GESTURE HANDLING class Draggable extends React.Component { constructor(props) { super(props); this._translateX = new Animated.Value(0); this._translateY = new Animated.Value(0); } render() { return ( ); } } 

_onGestureEvent = (event) => { this._translateX.setValue(event.nativeEvent.translationX); this._translateY.setValue(event.nativeEvent.translationY); } _onHandlerStateChange = (event) => { if (event.nativeEvent.oldState === State.ACTIVE) { this._lastOffset.x += event.nativeEvent.lastTranslationX; this._lastOffset.y += event.nativeEvent.lastTranslationY; this._translateX.setOffset(this._lastOffset.x); this._translateX.setValue(0); this._translateY.setOffset(this._lastOffset.y); this._translateY.setValue(0); } } GESTURE HANDLING 

_onHandlerStateChange = (event) => { if (event.nativeEvent.oldState === State.ACTIVE) { this._lastOffset.x += event.nativeEvent.lastTranslationX; this._lastOffset.y += event.nativeEvent.lastTranslationY; this._translateX.setOffset(this._lastOffset.x); this._translateX.setValue(0); this._translateY.setOffset(this._lastOffset.y); this._translateY.setValue(0); } } GESTURE HANDLING _onGestureEvent = Animated.event( [{ nativeEvent: { translationX: this._translateX, translationY: this._translateY }}], { useNativeDriver: true } ); 

GESTURE HANDLING render() { return ( ); } https://github.com/kmagiera/react-native-gesture-handler 

Thank you! Krzysztof Magiera [email protected] @kzzzf