{"id":6432,"date":"2019-09-27T19:18:27","date_gmt":"2019-09-27T19:18:27","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6432\/"},"modified":"2022-07-01T17:14:33","modified_gmt":"2022-07-01T17:14:33","slug":"first-steps-with-react-native-animations","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/","title":{"rendered":"First steps with React Native animations"},"content":{"rendered":"

Recently I was given the opportunity to work in a React Native project, as a developer, most of my experience was with React, so I was thrilled with expanding my knowledge in this area.<\/span><\/p>\n

As I started studying the platform, I got really interested in how to make animations using React Native, and in this blogpost, I am going to share my experience, and create a guide for beginners on how to start animating your React Native apps<\/a>. In this guide, we are going to create a Burger Button that when activated spins and turns into an X button. For this, introductory knowledge of React Native will be required.<\/span><\/p>\n

To follow the code, use the instructions in Getting Started with React Native<\/a><\/span>, and then we can start our guide.<\/span><\/p>\n

<\/p>\n

The<\/span> Library<\/span><\/h2>\n

The library we are going to use is the Animated API, from React Native\u2019s standard library. It has two drivers for animating, the first one uses the JavaScript engine created by React Native, and the second one creates animations using the native driver. The library is still being worked on and intends on expanding the number of native animations that it provides.<\/span><\/p>\n

There are different techniques provided by this library to animate your component\u2019s properties, the most basic being `Animated.timing`. To show this we are going to begin creating a simple burger button.<\/span><\/p>\n\n\n\n
\n
import<\/span> React <\/span>from<\/span> 'react'<\/span>\nimport<\/span> { StyleSheet, View, TouchableWithoutFeedback } <\/span>from<\/span> 'react-native'<\/span>\n\nconst<\/span> App = <\/span>()<\/span> => (<\/span>\n  <View style={styles.container}><\/span>\n    <TouchableWithoutFeedback onPress={() => {}}><\/span>\n      <View style={styles.burgerButton}><\/span>\n        <View style={styles.inner} \/><\/span>\n        <View style={styles.inner} \/><\/span>\n        <View style={styles.inner} \/><\/span>\n      <\/View><\/span>\n    <\/TouchableWithoutFeedback><\/span>\n  <\/View><\/span>\n)<\/span>\n\nconst styles = StyleSheet.create({<\/span>\n  container: {<\/span>\n    flex: 1,<\/span>\n    backgroundColor: '#fff',<\/span>\n    alignItems: 'center',<\/span>\n    justifyContent: 'center'<\/span>\n  },<\/span>\n  burgerButton: {<\/span>\n    display: 'flex',<\/span>\n    flexDirection: 'column',<\/span>\n    justifyContent: 'space-between',<\/span>\n    alignItems: 'center',<\/span>\n    width: 100,<\/span>\n    height: 100,<\/span>\n    paddingVertical: 20,<\/span>\n    borderRadius: 50,<\/span>\n    backgroundColor: 'green'<\/span>\n  },<\/span>\n  inner: {<\/span>\n    width: '60%',<\/span>\n    height: 10,<\/span>\n    borderRadius: 10,<\/span>\n    backgroundColor: 'black'<\/span>\n  }<\/span>\n})<\/span>\n\nexport default App<\/span><\/code><\/pre>\n
 <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
\"Inactive<\/p>\n
 <\/p>\n
Any resemblance with a music playing app is purely coincidental. But before we can begin animating this component, we have to add a wrapper to the views we want to animate, so we can dynamically change its properties. This wrapper is provided by Animated, and it needs to be used for all of the components you wish to animate.<\/span><\/p>\n\n\n\n
\n
import<\/span> React <\/span>from<\/span> 'react'<\/span>\nimport<\/span> {<\/span>\n  [...],<\/span>\n  Animated<\/span>\n} <\/span>from<\/span> 'react-native'<\/span>\n\nconst<\/span> App = <\/span>()<\/span> => (<\/span>\n  <View style={styles.container}><\/span>\n    <TouchableWithoutFeedback onPress={() => {}}><\/span>\n      <View style={styles.burgerButton}><\/span>\n        <Animated.View style={styles.inner} \/><\/span>\n        <Animated.View style={styles.inner} \/><\/span>\n        <Animated.View style={styles.inner} \/><\/span>\n      <\/View><\/span>\n    <\/TouchableWithoutFeedback><\/span>\n  <\/View><\/span>\n)<\/span>\n\n[...]<\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Now that we have setup the basis, we are going to use the `Animated.timing` function to begin animating the relevant properties. This function takes a property with a value created by Animated\u2019s method Animated.Value, and updates it according to instructions. First we are going to translate the upper and lower parts of the button to the middle. Why we need to do this for our animation will be explained later.<\/span><\/p>\n
 <\/p>\n\n\n\n
\n
[...]<\/span>\nconst<\/span> App = <\/span>()<\/span> => {<\/span>\n  <\/span>const<\/span> [activated, setActivated] = useState(<\/span>false<\/span>)<\/span>\n  <\/span>const<\/span> [upperAnimation, setUpperAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n  <\/span>const<\/span> [lowerAnimation, setLowerAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n\n  <\/span>const<\/span> startAnimation = <\/span>()<\/span> => {<\/span>\n    setActivated(!activated)<\/span>\n\n    Animated.timing(upperAnimation, {<\/span>\n      toValue: activated ? <\/span>0<\/span> : <\/span>25<\/span>,<\/span>\n      duration: <\/span>300<\/span>\n    }).start()<\/span>\n    Animated.timing(lowerAnimation, {<\/span>\n      toValue: activated ? <\/span>0<\/span> : <\/span>-25<\/span>,<\/span>\n      duration: <\/span>300<\/span>\n    }).start()<\/span>\n  }<\/span>\n\n  <\/span>const<\/span> animatedStyles = {<\/span>\n    lower: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: lowerAnimation<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    upper: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: upperAnimation<\/span>\n        }<\/span>\n      ]<\/span>\n    }<\/span>\n  }<\/span>\n\n  <\/span>return<\/span> (<\/span>\n    <View style={styles.container}><\/span>\n      <TouchableWithoutFeedback onPress={startAnimation}><\/span>\n        <View style={styles.burgerButton}><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.upper]} \/><\/span>\n          <Animated.View style={styles.inner} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.lower]} \/><\/span>\n        <\/View><\/span>\n      <\/TouchableWithoutFeedback><\/span>\n    <\/View><\/span>\n  )<\/span>\n}<\/span>\n[...]<\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
With this, we have our first animation in React Native. As you can see, we created a function that uses Animated Timing to change the value of our translateY property, and passed this value to our Animated Views through an object called animatedStyles.<\/span><\/p>\n
Interpolation<\/span><\/h2>\n
Now we are going to see how to animate more complicated properties, such as color, and rotation. To achieve such animations, we are going to have to use the mathematical concept of Interpolation, which consists of constructing new data points within the range of a discrete set of known data points (according to Wikipedia).<\/span><\/p>\n
Fortunately, we don\u2019t need any mathematical knowledge for this, we can use Animated to interpolate our data, which means, it can calculate which colors would make sense in the animation between two given colors. For example, this is how it would look like if we wanted our button to change colors from green to red when activated. Additionally, we are going to use interpolation to clean up our code, and remove the repeated values in the translate animations.<\/span><\/p>\n
 <\/p>\n\n\n\n
\n
[...]<\/span>\nconst<\/span> App = <\/span>()<\/span> => {<\/span>\n  <\/span>const<\/span> [activated, setActivated] = useState(<\/span>false<\/span>)<\/span>\n  <\/span>const<\/span> [animation, setAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n\n  <\/span>const<\/span> startAnimation = <\/span>()<\/span> => {<\/span>\n    <\/span>const<\/span> toValue = activated ? <\/span>0<\/span> : <\/span>1<\/span>\n\n    setActivated(!activated)<\/span>\n    Animated.timing(animation, {<\/span>\n      toValue,<\/span>\n      duration: <\/span>300<\/span>\n    }).start()<\/span>\n  }<\/span>\n\n  <\/span>const<\/span> animatedStyles = {<\/span>\n    lower: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>-25<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    upper: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>25<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    burgerButton: {<\/span>\n      backgroundColor: animation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>'green'<\/span>, <\/span>'red'<\/span>]<\/span>\n      })<\/span>\n    }<\/span>\n  }<\/span>\n\n  <\/span>return<\/span> (<\/span>\n    <View style={styles.container}><\/span>\n      <TouchableWithoutFeedback onPress={startAnimation}><\/span>\n        <Animated.View<\/span>\n          style={[styles.burgerButton, animatedStyles.burgerButton]}<\/span>\n        ><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.upper]} \/><\/span>\n          <Animated.View style={styles.inner} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.lower]} \/><\/span>\n        <\/Animated.View><\/span>\n      <\/TouchableWithoutFeedback><\/span>\n    <\/View><\/span>\n  )<\/span>\n}<\/span>\n[...]<\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
\"\"<\/p>\n

\nTo interpolate our data, we have to use our animated property\u2019s method `interpolate`, and pass into it an input range and an output range. The input range must be the value of the range of our animated property, and output range the initial and final value of the component\u2019s property we wish to animate.<\/span><\/p>\n
Interpolate supports mapping strings, this way, you can pass rotation values, and colors (either by names or RGB hex codes). To continue the animation of our button, now we are going to make the middle part of the button disappear as the animation occurs.<\/span><\/p>\n\n\n\n
\n
[...]<\/span>\nconst<\/span> App = <\/span>()<\/span> => {<\/span>\n  <\/span>const<\/span> [activated, setActivated] = useState(<\/span>false<\/span>)<\/span>\n  <\/span>const<\/span> [animation, setAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n\n  <\/span>const<\/span> startAnimation = <\/span>()<\/span> => {<\/span>\n    <\/span>const<\/span> toValue = activated ? <\/span>0<\/span> : <\/span>1<\/span>\n\n    setActivated(!activated)<\/span>\n    Animated.timing(animation, {<\/span>\n      toValue,<\/span>\n      duration: <\/span>300<\/span>\n    }).start()<\/span>\n  }<\/span>\n\n  <\/span>const<\/span> animatedStyles = {<\/span>\n    lower: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>-25<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    upper: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>25<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    middle: {<\/span>\n      height: animation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>10<\/span>, <\/span>0<\/span>]<\/span>\n      })<\/span>\n    },<\/span>\n    burgerButton: {<\/span>\n      backgroundColor: animation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>'green'<\/span>, <\/span>'red'<\/span>]<\/span>\n      })<\/span>\n    }<\/span>\n  }<\/span>\n\n  <\/span>return<\/span> (<\/span>\n    <View style={styles.container}><\/span>\n      <TouchableWithoutFeedback onPress={startAnimation}><\/span>\n        <Animated.View<\/span>\n          style={[styles.burgerButton, animatedStyles.burgerButton]}<\/span>\n        ><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.upper]} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.middle]} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.lower]} \/><\/span>\n        <\/Animated.View><\/span>\n      <\/TouchableWithoutFeedback><\/span>\n    <\/View><\/span>\n  )<\/span>\n}<\/span>\n[...]<\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
\"\"<\/p>\n
Additionally, we can pass an array with more than only two numbers to both input and output range parameters, with this we could make an animation that has different interactions in the output depending on the range of the input, like an animation that is really fast in the beginning, and slower in the end, similar to keyframe animations in CSS.<\/span><\/p>\n
Composing Animations<\/span><\/h2>\n
For now we have only used Animated\u2019s timing method, but there are other possibilities to animate your values. For the rotation we are going to use Animated.Spring, which is an animation function that does not take a duration, it only needs a toValue to work, but you can set friction and tension or speed and bounciness to improve your animation. The spring animation imitates a physical spring, and so, it overshoots the toValue that you provide, the amount it overshoots depends on the values we set before.<\/span><\/p>\n
To make this animation run in parallel with our previous animation we need to use Animated\u2019s parallel function, which takes an array of Animated methods and runs them in parallel. In our example we are going to use high tension and low friction on our spring, so it will be really bouncy:<\/span><\/p>\n
 <\/p>\n\n\n\n
\n
[...]<\/span>\nconst<\/span> App = <\/span>()<\/span> => {<\/span>\n  <\/span>const<\/span> [activated, setActivated] = useState(<\/span>false<\/span>)<\/span>\n  <\/span>const<\/span> [animation, setAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n  <\/span>const<\/span> [rotation, setRotation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n\n  <\/span>const<\/span> startAnimation = <\/span>()<\/span> => {<\/span>\n    <\/span>const<\/span> toValue = activated ? <\/span>0<\/span> : <\/span>1<\/span>\n\n    setActivated(!activated)<\/span>\n    Animated.parallel([<\/span>\n      Animated.timing(animation, {<\/span>\n        toValue,<\/span>\n        duration: <\/span>300<\/span>\n      }),<\/span>\n      Animated.spring(rotation, {<\/span>\n        toValue,<\/span>\n        friction: <\/span>2<\/span>,<\/span>\n        tension: <\/span>140<\/span>\n      })<\/span>\n    ]).start()<\/span>\n  }<\/span>\n\n  <\/span>const<\/span> animatedStyles = {<\/span>\n    lower: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>-25<\/span>]<\/span>\n          })<\/span>\n        },<\/span>\n        {<\/span>\n          rotate: rotation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>'0deg'<\/span>, <\/span>'45deg'<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    upper: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>25<\/span>]<\/span>\n          })<\/span>\n        },<\/span>\n        {<\/span>\n          rotate: rotation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>'0deg'<\/span>, <\/span>'-45deg'<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    middle: {<\/span>\n      height: animation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>10<\/span>, <\/span>0<\/span>]<\/span>\n      })<\/span>\n    },<\/span>\n    burgerButton: {<\/span>\n      backgroundColor: animation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>'green'<\/span>, <\/span>'red'<\/span>]<\/span>\n      })<\/span>\n    }<\/span>\n  }<\/span>\n\n  <\/span>return<\/span> (<\/span>\n    <View style={styles.container}><\/span>\n      <TouchableWithoutFeedback onPress={startAnimation}><\/span>\n        <Animated.View<\/span>\n          style={[styles.burgerButton, animatedStyles.burgerButton]}<\/span>\n        ><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.upper]} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.middle]} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.lower]} \/><\/span>\n        <\/Animated.View><\/span>\n      <\/TouchableWithoutFeedback><\/span>\n    <\/View><\/span>\n  )<\/span>\n}<\/span>\n[...]<\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
With this, we have finished our animation. Other possibilities for composing animations are sequence, that waits until one animation ends for the other to begin, and delay, that waits a given amount a time after an animation begins to start the next one.<\/span><\/p>\n
Comparison with CSS animations<\/span><\/h2>\n
If you have any experience with CSS animations, you can see the similarities. With CSS animations we can declare a transition which will watch for a given CSS property change and automagically interpolate the values for this property to pass during the transition, or we can declare a keyframe animation and decide what we want to happen in the progression of our animation.<\/span><\/p>\n
With React Native we have to use an approach similar to the CSS keyframe animations, and declare how we want our animation to progress. The main advantage of CSS animation vs React Native Animation is that not all of the properties of CSS are in React Native styles, one example we have on our burger button is the transform origin CSS property.<\/span><\/p>\n
If we wanted to create the rotation animation of our button, we could declare the transform origin of our upper part of the burger, for example, as left and simply rotate it to 45 degrees, and reach the same animation as the one we did in this course, which needed a translateY to the final position where rotating 45 degrees from the center of the bar would reach the position we want.<\/span><\/p>\n
But this is not a problem with Animated, it\u2019s a problem with React Native in general, but more and more CSS properties are being added to React Native, and I believe, eventually it will reach a realm of possibilities very similar to that of CSS3 in general.<\/span><\/p>\n
Native Animations<\/span><\/h2>\n
In the introduction of the blogpost I talked about the possibility of creating native animations, but until now we haven\u2019t used any of it. Not everything we can do with Animated is supported by the native driver, as a rule of thumb, we cannot animate layout properties, we can animate things like transform and opacity.<\/span><\/p>\n
In our project, we can use native driver for anything, except the background color and the height of the middle part of the button. But Animated only supports one driver per animation, so we cannot declare a Native Driver for this animations that do not support it, we have to declare a separate, non native driver for them. The way we use the native driver is very simple, we simply have to set a boolean in the animation to true, as follows:<\/span><\/p>\n\n\n\n
\n
[...]<\/span>\nconst<\/span> App = <\/span>()<\/span> => {<\/span>\n  <\/span>const<\/span> [activated, setActivated] = useState(<\/span>false<\/span>)<\/span>\n  <\/span>const<\/span> [animation, setAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n  <\/span>const<\/span> [jsAnimation, setJsAnimation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n  <\/span>const<\/span> [rotation, setRotation] = useState(<\/span>new<\/span> Animated.Value(<\/span>0<\/span>))<\/span>\n\n  <\/span>const<\/span> startAnimation = <\/span>()<\/span> => {<\/span>\n    <\/span>const<\/span> toValue = activated ? <\/span>0<\/span> : <\/span>1<\/span>\n\n    setActivated(!activated)<\/span>\n    Animated.parallel([<\/span>\n      Animated.timing(animation, {<\/span>\n        toValue,<\/span>\n        duration: <\/span>300<\/span>,<\/span>\n        useNativeDriver: <\/span>true<\/span>\n      }),<\/span>\n      Animated.spring(rotation, {<\/span>\n        toValue,<\/span>\n        friction: <\/span>2<\/span>,<\/span>\n        tension: <\/span>140<\/span>,<\/span>\n        useNativeDriver: <\/span>true<\/span>\n      }),<\/span>\n      Animated.timing(jsAnimation, {<\/span>\n        toValue,<\/span>\n        duration: <\/span>300<\/span>\n      })<\/span>\n    ]).start()<\/span>\n  }<\/span>\n\n  <\/span>const<\/span> animatedStyles = {<\/span>\n    lower: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>-25<\/span>]<\/span>\n          })<\/span>\n        },<\/span>\n        {<\/span>\n          rotate: rotation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>'0deg'<\/span>, <\/span>'45deg'<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    upper: {<\/span>\n      transform: [<\/span>\n        {<\/span>\n          translateY: animation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>0<\/span>, <\/span>25<\/span>]<\/span>\n          })<\/span>\n        },<\/span>\n        {<\/span>\n          rotate: rotation.interpolate({<\/span>\n            inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n            outputRange: [<\/span>'0deg'<\/span>, <\/span>'-45deg'<\/span>]<\/span>\n          })<\/span>\n        }<\/span>\n      ]<\/span>\n    },<\/span>\n    middle: {<\/span>\n      height: jsAnimation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>10<\/span>, <\/span>0<\/span>]<\/span>\n      })<\/span>\n    },<\/span>\n    burgerButton: {<\/span>\n      backgroundColor: jsAnimation.interpolate({<\/span>\n        inputRange: [<\/span>0<\/span>, <\/span>1<\/span>],<\/span>\n        outputRange: [<\/span>'green'<\/span>, <\/span>'red'<\/span>]<\/span>\n      })<\/span>\n    }<\/span>\n  }<\/span>\n\n  <\/span>return<\/span> (<\/span>\n    <View style={styles.container}><\/span>\n      <TouchableWithoutFeedback onPress={startAnimation}><\/span>\n        <Animated.View<\/span>\n          style={[styles.burgerButton, animatedStyles.burgerButton]}<\/span>\n        ><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.upper]} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.middle]} \/><\/span>\n          <Animated.View style={[styles.inner, animatedStyles.lower]} \/><\/span>\n        <\/Animated.View><\/span>\n      <\/TouchableWithoutFeedback><\/span>\n    <\/View><\/span>\n  )<\/span>\n}<\/span>\n[...]<\/span>\n<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
This won\u2019t change our animation, it will simply make it more fluid and consume less memory.<\/span><\/p>\n
Conclusion<\/span><\/h2>\n
With these few basic concepts, we can get started creating useful animations that will improve our users experience with our apps.<\/span><\/p>\n
Furthermore, with React Native and Animated, we can also track gestures using the Animated.event method and create dynamic animations, like dragging an element or scrolling. Also, we can use libraries to improve our animations, some that I tend to use are libraries that create SVG animations, like flubber.js<\/a> <\/span>and<\/span> D3-Interpolate<\/a><\/span>.<\/span><\/p>\n
There is still much to be improved in React Native\u2019s Animated API, but the path ahead for the platform is very exciting and filled with very smart people. This was my take on how to start with animating your React Native apps, any suggestions are more than welcome.<\/span><\/p>\n
Thank you for reading!<\/span><\/p>\n
Cheesecake Labs ranked Top #5 React Native Development Company Worldwide by Clutch<\/a><\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
References<\/b><\/p>\n
 <\/p>\n
https:\/\/tobiasahlin.com\/blog\/meaningful-motion-w-action-driven-animation\/<\/span><\/a><\/p>\n
https:\/\/facebook.github.io\/react-native\/docs\/animations<\/span><\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I was given the opportunity to work in a React Native project, as a developer, most of my experience was with React, so I was thrilled with expanding my knowledge in this area. As I started studying the platform, I got really interested in how to make animations using React Native, and in this […]<\/p>\n","protected":false},"author":65,"featured_media":6433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[400],"class_list":["post-6432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-tag-javascript"],"yoast_head":"\nFirst steps with React Native animations<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"First steps with React Native animations\" \/>\n<meta property=\"og:description\" content=\"Recently I was given the opportunity to work in a React Native project, as a developer, most of my experience was with React, so I was thrilled with expanding my knowledge in this area. As I started studying the platform, I got really interested in how to make animations using React Native, and in this […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-27T19:18:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:14:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\"},\"author\":{\"name\":\"Mateus Bueno\"},\"headline\":\"First steps with React Native animations\",\"datePublished\":\"2019-09-27T19:18:27+00:00\",\"dateModified\":\"2022-07-01T17:14:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\"},\"wordCount\":1463,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png\",\"keywords\":[\"JavaScript\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\",\"name\":\"First steps with React Native animations\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png\",\"datePublished\":\"2019-09-27T19:18:27+00:00\",\"dateModified\":\"2022-07-01T17:14:33+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Mateus Bueno\"},\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png\",\"width\":2000,\"height\":720,\"caption\":\"cellphone inside react native molecule logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"First steps with React Native animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Mateus Bueno\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":false,\"contentUrl\":false,\"caption\":\"Mateus Bueno\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/mat-bueno-ferreira\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"First steps with React Native animations","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/","og_locale":"en_US","og_type":"article","og_title":"First steps with React Native animations","og_description":"Recently I was given the opportunity to work in a React Native project, as a developer, most of my experience was with React, so I was thrilled with expanding my knowledge in this area. As I started studying the platform, I got really interested in how to make animations using React Native, and in this […]","og_url":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2019-09-27T19:18:27+00:00","article_modified_time":"2022-07-01T17:14:33+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/"},"author":{"name":"Mateus Bueno"},"headline":"First steps with React Native animations","datePublished":"2019-09-27T19:18:27+00:00","dateModified":"2022-07-01T17:14:33+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/"},"wordCount":1463,"commentCount":0,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png","keywords":["JavaScript"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/","url":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/","name":"First steps with React Native animations","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png","datePublished":"2019-09-27T19:18:27+00:00","dateModified":"2022-07-01T17:14:33+00:00","author":{"@type":"person","name":"Mateus Bueno"},"breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/React_Native_Animation.png","width":2000,"height":720,"caption":"cellphone inside react native molecule logo"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/first-steps-with-react-native-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"First steps with React Native animations"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Mateus Bueno","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":false,"contentUrl":false,"caption":"Mateus Bueno"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/mat-bueno-ferreira\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=6432"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6432\/revisions"}],"predecessor-version":[{"id":10191,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6432\/revisions\/10191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/6433"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=6432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=6432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=6432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}