Toggle Hidden Details on a React Native Event Card
In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use state and the componentDidUpdate callback to trigger our animations.
Depending our state we'll use Animated.timing to animate the information in and out. We'll use a series interpolate on our Animated.Value to rotate the arrow, and translate our information into view.
[00:00] Let's take a quick walk through with what we currently have set up. We're importing an image for our background. We're setting state to an object with open false. We're having a toggle card function that will be called when the header is pressed.
[00:13] Then we have some basic setup of you that's inside of our Portland image. The header here, that's touchable opacity wrapping some content. Then we have a scroll view with some random text inside of it.
[00:31] Our styles are setting our background and our container to a width of 300 and our height to 250 with an overflow of hidden and some other various styles. We'll need an animated value to control all of this, so we'll say this.animated is equal to a new animated value which will default to zero.
[00:51] We set up our toggle card. We'll say this.setstate, which because we're depending on our previous state we'll need to pass in a function to set state which will return a new object of open equals notstate.open.
[01:08] In the component update callback function for set state, we'll need to start our animation. We'll say const to value is equal to this.state.open. If it's open then we'll animate to one. If it's close then we'll animate to zero.
[01:28] We'll then do animated.timing on this.animated to a value which will be decided there from one to zero. Duration of 500 milliseconds. Then we'll just call start on our animation.
[01:46] Now we need to set up our styles and our interpolations. We'll go down here and we'll create a const offset interpolate, which will be this.animated.interpolate. Our input range will be zero to one.
[02:02] Our output range will be 191 to zero. What this is controlling is the start offset and the ending offset for when we toggle our animation for the content card below here. It starts with 191 offset and then when we open it, it will go to a zero offset.
[02:24] Now that we have our interpolate we'll go ahead and set up our style. Say const offset style is equal to transform which is an array of transforms. We use translate Y and pass in our offset interpolate.
[02:38] We'll then take that and go ahead and apply it to our inner card. We'll also need to rotate our arrow which is currently pointing down so that it will point up to start and then point down once it's open.
[02:53] Go up here and we'll create a const arrow rotate, which will do this.animated.interpolate. Input range will be zero to one and our output range will actually be degrees, so we'll rotate it up to start.
[03:09] Then once it's open we'll rotate it back down.We'll create our style. We'll say const arrow style, new transform. We'll just do a rotate. We'll then apply that arrow style to our arrow, which is here.
[03:33] Finally, we'll want to fade out our scroll view content when we close it, so we'll come up here and we'll just create const opacity style, which is going to be equal to an object with opacity. Because we go from zero to one, and that's the same direction that our opacity wants to go, we'll just pop in this.animated.
[03:52] Now we can apply that to our wrapping animated view around our scroll view. Now if we refresh we can see that our arrow has rotated and when we press on our header we'll toggle the opacity. This will slide up, the arrow will rotate, and we have our scroll view. As we press this again the arrow will rotate and slide down and everything will fade out.