The Animation Module in React Native

Stephen Grider
A free video tutorial from Stephen Grider
Engineering Architect
4.6 instructor rating • 26 courses • 592,497 students

Learn more from the full course

React Native: Advanced Concepts

Master the advanced topics of React Native: Animations, Maps, Notifications, Navigation and More!

16:33:06 of on-demand video • Updated May 2020

  • Make compelling applications using expert-level features of React Native
  • Create amazingly smooth and performant animations
  • Build new React Native apps with Expo
  • Understand the latest Navigation options for new React Native apps
  • Add logic to your Firebase backend with Google Cloud Functions
  • Update your users with cross platform Push Notifications
  • Handle your users going offline with Redux Persist
English [Auto] In the last section we spoke a little bit about the lay out animation system and the animated system within re-act native. Remember these are two different ways of getting animation inside of your re-act native at the way our animation system module is used for very simple very straightforward animations whereas the animated module is used for custom or very fancy very dramatic animations that we might want to put together. We're going to be talking in this section a lot more about the animated module and some of the code that sits inside of it. So the animated module contains many different functions objects and components that we can use to set up animations. So there's a lot of code a lot of properties that sit inside of this module and the vast majority of the difficulty that I think exists around using this animated module is just understanding all of those different functions and modules and components and how they all work together to make an animation inside of your app. So inside this section we're going to explore the animation module a little bit. So I want to tell you a little bit more about the different properties components objects all that stuff that sits inside the animated module to give you kind of a frame of reference of where we use each of those components and functions and blah blah blah. I want to first start off by talking a little bit about a very simple animation. So we're going to talk about this animation right here on the screen and then we're going to talk about how some of the different parts of code inside of the animated module are going to help us to put this animation together. So psyched about the animation a little bit. The animation is just as straightforward as it probably looks. I want to start off with a ball at the top of the screen at zero seconds so the ball starts at the top of the screen and then over the span of one second the ball should move in a very smooth very linear fashion down to the bottom of the screen like so. So you can kind of imagine that if I played the animation for you right now it looks something like this. So like one second something like that but it would be nice and smooth and would be over the span of exactly one second. OK. So whenever we look at any animation whatsoever I want you to start thinking about three different questions. And these three different questions are going to help you understand all the different parts of code and tools that you have inside of that animated module. So these three questions are really important to that answer. So here's the three questions. First where is the item on the screen at any given point in time. So I would expect to be able to able to ask you like or ask your application at time equals zero seconds. Where is the ball on the screen. If I asked you that question hopefully you would say to me Oh well Stephen the ball should be at the very top of the screen. OK. Fantastic. And then if I came back to you again and I said Where's the ball at. One second you should be able to tell me Oh Stephen the ball is going to be down at the bottom on the screen and then in theory if I also asked you hey where would the ball be at 1 1/2 seconds like point five seconds used to tell me oh it's at the middle of the screen. So what I'm trying to convey here is that the first question we need to be to ask or answer excuse me I got any different animation that we put together is where our element should be on the screen at any given time. The second question that we need to be able to answer about every animation we put together is where is the element moving to. So obviously it starts up at the top but whereas the end goal or where we tried to move this element to and of course we don't only have to talk about moving elements around as well we could talk about elements changing in size or color essentially. Number two here is what is the end goal of this animation. What should the element look like where should it be on the screen. What color should it be. That's what I want to know about. Question number two here. So what are we trying to accomplish with this animation. Finally third question and this one might seem like it's really obvious but is really important to get that answer. Which element are we attempting to move around on the screen. So in the context of this animation we're trying to move the ball around. Yeah it's pretty straightforward. I want to move the ball around. OK. So these are the three important questions that you need to ask about every animation that you put together. And I think that you know in your head you can probably start to imagine. Think about any given application that you might work with or any animation you could possibly think of. You can probably apply these three questions to any animation you can imagine. So again maybe we're changing the color of some element or we're changing its position on the screen or changing its size. Which element are we trying to change. How are we changing it. What is the final state that it should be. Those are the three questions we want to be able to ask. OK. So now that we understand these three questions we're going to talk about how the animated module or the different parts of code inside that module are going to help us answer these questions as we put an animation together. So all I want to do right now from this diagram that you're looking out the one that just pulled up I just want you to understand these different properties were these different objects that sit on the animated module because we're going to make great use of them in the future as we start to work on our individual applications. So question number one what is the current position of the element that were animating. That's the first question that we need to ask. Where is the item on the screen right now. The animated module contains a values object. This values object helps us describe what the current position or what the current state of an element should be on the screen. This values object contains two smaller properties on it that are called value and value x y. So these are javascript objects that we are going to use and they're going to help us describe what the current position of an element should be on the screen or what the current color of it should be or what the current size of it should be. That is the purpose of this values module. The second question is how is the animation changing. This question gets answered by the types module inside of the animated system the types module has that functions or. Excuse me javascript objects spring decay and timing these three objects right here are going to use to answer the question how is the animation changing over time. Like how are we changing the color or the position of it over time. Finally what element are we attempting to apply this animation to. So that's the purpose of the components module inside of the animated module and inside of there we've got these three components of view text and image. So we use these three components right here to somehow specify what element we're trying to animate or change over time. So Leslie I want to say here just to be 100 percent really clear about all these different like things I'm clicking on and all of these you know values value x y just to give you a very practical example of what's going on or what I am trying to convey here about the animated module. At the end of the day when we start to put together some of our animations we're eventually going to end up. Let me get up a javascript file here really quick. There we go so we're going to eventually start importing the animated module from re-act native like so. And you don't need to copy down in this code. Just means to get this to you as an example. So on the animated module that we are importing from re-act native there are the properties animated values animated Daut types and Dot components. And then on each of these objects there are additional properties that we can access. So like animated or spring for types and view. So this is a javascript object right here that's going to help us answer the question of where an element should be on the screen. This is a javascript object that's going to help us answer the question of how the element is changing its position or color or whatever we're trying to animate. And then this is a component that is going to help us answer the question of what element we're actually trying to animate. On the screen. So. So make sure is really clear what these things I'm talking about. These are all javascript objects that we're going to be working with to pull off these animations. OK. So in this section I know this is probably getting pretty deep pretty quickly but Zuzu start writing some code. It's all going to come together really nicely. But getting this kind of introduction I think is going to be very helpful when we start talking about the code. So again we spoke about in the section that three different questions that we want to ask about every animation that we put together. And then we spoke just a little little bit about some of the different tools inside of the animated module that we're going to use to describe how our element is changing on the screen. So let's take a quick break and then we're going to come back and we're going to start working on our first animation to get a better sense of all of these different components and objects that are sitting inside the animated module. We're going to figure out exactly how they work. So take a quick break and start writing some code in the next section.