Slide 1

Slide 1 text

Moving Beyond Animations to User Interactions at 60 FPS PUSHING BOUNDARIES WITH REACT NATIVE TAL KOL Head of Mobile Engineering at Wix.com |

Slide 2

Slide 2 text

@koltal Passionate about React Native at Hi.

Slide 3

Slide 3 text

Can React Native Cross The Last Mile? 01

Slide 4

Slide 4 text

What makes great apps? THE MAGICAL NUANCES THAT SET YOU APART Fluid animations at 60 FPS Dynamic user interactions that mimic reality

Slide 5

Slide 5 text

ListView Row Actions 1

Slide 6

Slide 6 text

Swipeable Cards 2

Slide 7

Slide 7 text

Collapsible Views 3

Slide 8

Slide 8 text

Sliding Panels & Drawers 4

Slide 9

Slide 9 text

Implement in JavaScript?

Slide 10

Slide 10 text

_handlePanMove setValue TouchEvent(x1) UpdateView Frame 1 _handlePanMove setValue TouchEvent(x2) Frame 2 JavaScript Native Bridge

Slide 11

Slide 11 text

Implement in native? ONE SURE WAY TO REDUCE BRIDGE TRAFFIC That's what we do in our app (as OSS) Native skillset is required, the 10% rule

Slide 12

Slide 12 text

Learn from animations § Similar problem JS animations are noisy over the bridge § Animated library emerged as the way to deal with this § Declarative API to specify the behavior in JS at once § JS/native driver takes the declaration and runs frame by frame

Slide 13

Slide 13 text

Declarative API is how we cross the last mile

Slide 14

Slide 14 text

Declarative API For User Interactions 02

Slide 15

Slide 15 text

API – phase 1 § horizontal / vertical § snapping points § friction

Slide 16

Slide 16 text

ListView Row Actions 1 x = 0 x = 100 horizontal: true snapPoints: [ {x: 0}, {x: 100} ] friction: 0.7

Slide 17

Slide 17 text

Swipeable Cards 2 x = -360 x = 0 horizontal: true snapPoints: [ {x: -360} {x: 0}, {x: 360} ] friction: 0.6

Slide 18

Slide 18 text

Collapsible Views 3 y = 250 y = 0 vertical: true snapPoints: [ {y: 0}, {y: 250} ] friction: 0.8

Slide 19

Slide 19 text

Sliding Panels & Drawers 4 y = 0 vertical: true snapPoints: [ {y: 0}, {y: 660} ] friction: 0.5 y = 660

Slide 20

Slide 20 text

TouchEvent(x1) UpdateView Frame 1 TouchEvent(x2) Frame 2 JavaScript Native Bridge Initialize Declare Interaction Initialize Driver UpdateView

Slide 21

Slide 21 text

Drag with gesture recognizer then animate using spring to closest snap point Implement native driver – phase 1

Slide 22

Slide 22 text

Compute the entire interaction with UIKit Dynamics – a full fledged iOS physics engine Implement native driver – phase 2

Slide 23

Slide 23 text

Physics 101 NEWTON TO THE RESCUE ∆ = 2 − 1 = − ( ∆ = ∆ = ( ∆

Slide 24

Slide 24 text

Switch to our own custom physics engine for more control and ability to port to Android Implement native driver – phase 3

Slide 25

Slide 25 text

We're writing a declarative physics engine for React Native

Slide 26

Slide 26 text

Pushing The Envelope 03

Slide 27

Slide 27 text

Enrich API – 1 § boundaries § bounce boundaries: { bottom: 0, bounce: 0.5 }

Slide 28

Slide 28 text

Enrich API – 2 § localized forces (friction, springs) friction: { value: 0.8, area: {left: 0} }

Slide 29

Slide 29 text

Enrich API – 3 § animate other views (Animated) d = new Animated.Value(0) animatedValueX: d

Slide 30

Slide 30 text

Enrich API – 4 § gravity § magnetism § events § haptics

Slide 31

Slide 31 text

Enrich API – 4 snapPoints: [ {x: -140}, {x: 140} ] gravityPoints: [ {x: 0, y: 200, strength: 8000} ] friction: 0.8 animatedValueY: this.deltaY onStop: this.onStopEvent haptics: true

Slide 32

Slide 32 text

Judge For Yourself Search app stores for "React Native Interactions" Is it really 60 FPS?

Slide 33

Slide 33 text

Get Full Code github.com/wix/ react-native-interactable Try Demo App Search app stores for "React Native Interactions"

Slide 34

Slide 34 text

Thanks. linkedin/talkol github.com/talkol @koltal [email protected] medium.com/@talkol