react-native-animations.s

Owner: Louis Lagrange

Why

Animations are a great way to improve the User Experience by :

• easing the interactions, so that they may seem more natural

• giving a clear visual feedback on an action's success or failure, and on its nature (tap / long press / slide / pinch)

• educating the user on possible interactions on an element

• helping the user wait while content is loading

• giving a sensation of speed and minimizing small performance problems

• show more content on the page in a fluid manner

Checks

• In order to improve how we create animations, I send a quick message to the owner "Hey it's , I'm going to make an animation on "

• Creating an animation should not take more than half a day of design and development time. If it takes more time, I andon the owner who will help me or find someone to help me.

• I know of the resources that can help me:

  • similar animations that BAM made previously with the catalog: this can help me showcase examples for my PO, estimate the time needed for the design and the development, and find a technical strategy for my animation

  • the tools that are available in order to create a React Native animation with this table

  • the official guide on animations

• If I use Animated:

  • I make sure to use the parameter useNativeDriver in Animated.timing, Animated.spring, Animated.decay and Animated.event (see React Native performance)

  • I only use Animated.interpolate on styles of type opacity or transform (otherwise useNativeDriver won't work)

• If I use any third party library, I look at the documentation and/or code, and if a useNativeDriver prop exists, I use it

• When my animation is finished, I make a GIF of it (with Kap: brew cask install kap) and add it to the catalog here (10 min)

Good examples

Please andon and/or create an issue if you need one!

useNativeDriver

<Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={
      Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }], {
        useNativeDriver: true,
      })
    }
>

Style interpolation

<Animated.View
  style={{
    transform: [{ translateY: contentOffsetY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 200],
      extrapolate: 'clamp',
    }) }],
    position: 'absolute',
  }}
>

Bad examples

Please andon and/or create an issue if you need one!

useNativeDriver

<Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={
      Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }])
    }
>

Style interpolation

<Animated.View
  style={{
    transform: [{ height: contentOffsetY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 200],
      extrapolate: 'clamp',
    }) }],
  }}
>