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

1
<Animated.ScrollView
2
scrollEventThrottle={1}
3
onScroll={
4
Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }], {
5
useNativeDriver: true,
6
})
7
}
8
>
Copied!

Style interpolation

1
<Animated.View
2
style={{
3
transform: [{ translateY: contentOffsetY.interpolate({
4
inputRange: [0, 100],
5
outputRange: [0, 200],
6
extrapolate: 'clamp',
7
}) }],
8
position: 'absolute',
9
}}
10
>
Copied!

Bad examples

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

useNativeDriver

1
<Animated.ScrollView
2
scrollEventThrottle={1}
3
onScroll={
4
Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }])
5
}
6
>
Copied!

Style interpolation

1
<Animated.View
2
style={{
3
transform: [{ height: contentOffsetY.interpolate({
4
inputRange: [0, 100],
5
outputRange: [0, 200],
6
extrapolate: 'clamp',
7
}) }],
8
}}
9
>
Copied!
Last modified 3yr ago