Slide 1

Slide 1 text

Just use platforms Krzysztof Magiera (@kzzzf)

Slide 2

Slide 2 text

Platforms

Slide 3

Slide 3 text

Platforms

Slide 4

Slide 4 text

I just used platforms • Animated “native driver” • react-native-gesture-handler • react-native-reanimated • react-native-screens

Slide 5

Slide 5 text

state = { fade: new Animated.Value(0) }; 1. Create value 2. Hook it up as a view attribute Animated.timing( this.state.fade, { toValue: 1, } ).start(); 3. Animate value 4. Or attach it to an event 5. Combine/process values const fade = Animated.multiply( this.state.factor, this.state.scrollY.interpolate({ inputRange: [0, 300], outputRange: [1, 0] }) ); { const yoffset = event.nativeEvent.contentOffset.y; this.state.scrollX.setValue(yoffset); }} > Animated

Slide 6

Slide 6 text

Animated JS Thread UI Thread • Run animation loop • Update UI • Render React components • Sometimes render a lot… • Orchestrate network calls and storage read/writes • Occasionally parse network response and process data

Slide 7

Slide 7 text

Animations Background threads UI Thread • Update UI • Run animation loop • Orchestrate network calls and storage read/writes • Occasionally parse network response and process data

Slide 8

Slide 8 text

Animated native driver JS Thread UI Thread • Update UI • Render React components • Sometimes render a lot… • Orchestrate network calls and storage read/writes • Occasionally parse network response and process data • Run animation loop • Describe animation

Slide 9

Slide 9 text

Reanimated v1.0.0 ! ⭐ 1000+ #$%&'()* 36

Slide 10

Slide 10 text

Gesture Handler JS RESPONDER JS RESPONDER NATIVE TOUCH & GESTURES NATIVE TOUCH & GESTURES

Slide 11

Slide 11 text

react-native-screens  UIViewController API Fragments API

Slide 12

Slide 12 text

React-native uses platforms • We can utilize platform’s built-in touch system • UI components are accessible • Respect global settings like font size or contrast • We take advantage of render and animation optimizations made by platform vendors • Integrate APIs and UI components • Use platform native tooling (hierarchy viewer, overdraw detection)

Slide 13

Slide 13 text

new UI new APIs

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

android.transition

Slide 16

Slide 16 text

Layout animations UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setVisible(!visible) }} /> +

Slide 17

Slide 17 text

Layout animations Transitions Layout animations const transition = ( ; ); return ( { ref.current.animateNextTransition(); setShowText(!showText); }} /> {showText && ( Tap the above button to hide me )} ); Transition Scoped

Slide 18

Slide 18 text

Transitions const transition = ( ; ); return ( { ref.current.animateNextTransition(); setShowText(!showText); }} /> {showText && ( const transition = ( ); Group Scale out Fade in

Slide 19

Slide 19 text

const transition = ( ; ); return ( { ref.current.animateNextTransition(); setShowText(!showText); }} /> {showText && ( Transitions const transition = ( ); Sequence> Sequence> Group

Slide 20

Slide 20 text

Transitions Sequence Together

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Interpolation "easeIn" “easeInOut" "easeOut"

Slide 23

Slide 23 text

Propagation

Slide 24

Slide 24 text

Propagation

Slide 25

Slide 25 text

Propagation

Slide 26

Slide 26 text

Delayed

Slide 27

Slide 27 text

Transitions [email protected] Powered by your platform Core Animation android.transition

Slide 28

Slide 28 text

Thank you! Krzysztof Magiera [email protected] @kzzzf