Just use platforms

In this talk we discuss why does it make sense to rely on platform native components rather than rebuilding bits of the UI framework on your own. We also introduce new transitions API to reanimated which aims to replace React Native's LayoutAnimation API.

Transcript

1. Just use platforms Krzysztof Magiera (@kzzzf)
2. Platforms
3. Platforms
4. I just used platforms • Animated “native driver” • react-native-gesture-handler • react-native-reanimated • react-native-screens
5. state = { fade: new Animated.Value(0) }; 1. Create value <Animated.View style={{ opacity: this.state.fade }} /> 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] }) ); <Animated.ScrollView onScroll={event L> { const yoffset = event.nativeEvent.contentOffset.y; this.state.scrollX.setValue(yoffset); }} > <Animated.ScrollView onScroll={Animated.event([ { // event.nativeEvent.contentOffset.y nativeEvent: { contentOffset: { y: this.state.scrollY } } } ])} > Animated
6. 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
7. Animations Background threads UI Thread • Update UI • Run animation loop • Orchestrate network calls and storage read/writes • Occasionally parse network response and process data
8. 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
9. Reanimated v1.0.0 ! ⭐ 1000+ #$%&'()* 36
10. Gesture Handler JS RESPONDER JS RESPONDER NATIVE TOUCH & GESTURES NATIVE TOUCH & GESTURES
11. react-native-screens  UIViewController API Fragments API
12. 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)
13. new UI new APIs
15. android.transition
16. Layout animations UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); <Button onPress={() L> { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setVisible(!visible) }} /> +
17. Layout animations Transitions Layout animations const transition = ( <Transition.Change interpolation="easeInOut" />; ); return ( <Transitioning.View ref={ref} transition={transition} style={style.centerAll}> <Button title="Show or hide" onPress={() L> { ref.current.animateNextTransition(); setShowText(!showText); }} /> {showText && ( <Text>Tap the above button to hide me</Text> )} </Transitioning.View> ); Transition Scoped
18. Transitions const transition = ( <Transition.Change interpolation="easeInOut" />; ); return ( <Transitioning.View ref={ref} transition={transition} style={style.centerAll}> <Button title="Show or hide" onPress={() L> { ref.current.animateNextTransition(); setShowText(!showText); }} /> {showText && ( const transition = ( <Transition.Together> <Transition.Out type="scale" /> <Transition.Change interpolation="easeInOut" /> <Transition.In type="fade" /> </Transition.Together> ); Group Scale out Fade in
19. const transition = ( <Transition.Change interpolation="easeInOut" />; ); return ( <Transitioning.View ref={ref} transition={transition} style={style.centerAll}> <Button title="Show or hide" onPress={() L> { ref.current.animateNextTransition(); setShowText(!showText); }} /> {showText && ( Transitions const transition = ( <Transition.Together> <Transition.Out type="scale" /> <Transition.Change interpolation="easeInOut" /> <Transition.In type="fade" /> </Transition.Together> ); Sequence> Sequence> Group
20. Transitions Sequence Together
21. <Transition.In type="slide-left" /> <Transition.Out type="slide-right" /> <Transition.In type="slide-bottom" /> <Transition.Out type="slide-bottom" />
22. Interpolation <Transition.Change interpolation="linear" durationMs={2000} /> "easeIn" “easeInOut" "easeOut"
23. Propagation <Transition.Together> <Transition.Out type="slide-bottom" durationMs={400} propagation="bottom" /> <Transition.In type="slide-bottom" durationMs={400} propagation="top" /> </Transition.Together>
24. Propagation <Transition.Together> <Transition.Out type="slide-bottom" durationMs={400} /> <Transition.In type="slide-bottom" durationMs={400} propagation="top" /> </Transition.Together>
25. Propagation <Transition.Together> <Transition.Out type="slide-bottom" durationMs={400} /> <Transition.In type="slide-bottom" durationMs={400} propagation="top" /> </Transition.Together>
26. <Transition.Together> <Transition.In type="slide-bottom" durationMs={400} propagation="top" /> <Transition.In type="fade" durationMs={200} delayMs={200} /> </Transition.Together> Delayed <Transition.Together> <Transition.Out type="slide-bottom" durationMs={400} /> </Transition.Together>
27. Transitions react-native-reanimated@1.0.0 Powered by your platform Core Animation android.transition
28. Thank you! Krzysztof Magiera krzys@swmansion.com @kzzzf