Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Just use platforms

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.

Krzysztof Magiera

April 04, 2019
Tweet

More Decks by Krzysztof Magiera

Other Decks in Programming

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

  14. None
  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