Create an Animated 3D Button Effect in React Native

Instructor: [00:00] We'll start off with using touchable without feedback, because we'll be providing our own effects. We'll provide our button view, we'll just say view. That will get rid of our air. Then, we'll also provide an on press in and this will allow us to then trigger an animation in the future when the user presses in. Say on press in is equal to this dot handle air horn. Whenever this is pressed, our air horn sound will play.

[00:35] Because our container is centering everything, we'll need to provide a strict width and height in this case. Let's create a button class here and say height of 80 and a width of 180. We can then take that and say style equals styles dot button.

[00:56] When creating this 3D button effect, we'll need a platform for the animated button to go into, we will create another view and give it a style of styles dot outer. This outer class will say flex one, it takes up all of the available space that we have provided here. Then, we'll give it a padding of 10 and we'll round the border, border radius, we'll say is 14.

[01:27] Then finally, we'll give it a background color. In our case, we'll just give it a background color of RGBA .65, it will be a slightly dark gray. Now comes the creation of the actual button. The first thing we'll need to do is create what will be effectively the fake height of the button that will give the 3D effect. We'll just call this class height. We'll give it a border radius of 16 and we will give it a background color of RGBA 255 in the red slot, zero in the others, and .5 opacity.

[02:08] Now if we render that view inside of our outer, which we'll eventually need to animate, we'll give it an animated dot view and apply our style. We can't see anything just yet because there's no content to give that particular thing any height, we'll provide some on the inside.

[02:35] This will be the inner piece of the button that sits right on top and actually is what the button looks like. We'll give it another animated dot view and we'll provide some text. We'll just say text air horn. This will then be our inner style, we'll say style equals styles dot inner. We'll go build that.

[02:58] As you can see here, now that we are actually getting some content, some layout that our height piece is now showing. We'll create our inner style. We will give it a background color of just red. We will align our text into the center both ways, align items center and justify content center.

[03:27] You can see what happened here. The red is now covering our darker red and it's also not taking up all of the available height. In order to make it take up all of the available height, we'll just give it a height of 100 percent.

[03:44] Finally, we will give our text a little styling. We'll create a class called white and create a white text with a font weight of bold. Then, we will give it a slightly larger font size of 20. We can go ahead and apply that here. Style equals styles dot light. Now, we have our text slightly bigger.

[04:08] This doesn't look really 3D yet and that is because we need to apply some offsets and some padding to create that effect. To do this, because we're going to animate it, we'll create an animated value. We'll go ahead and set one up on state and just call it animation and create a new animated dot value that starts at zero.

[04:30] We'll focus on the height piece first because that will give it its 3D vibes. We're going to base everything off of an interpolation, so we'll say const height style. We need to affect the margin top, so we'll say margin top. This dot state dot animation dot interpolate. For our input range, it will be a simple zero to one scale. We will output at its base level we'll say negative 15 to move the button up 15. Then at one when the button is pressed, we will have zero offset.

[05:08] The second thing we need to do is apply some padding. Because this height has the inner inside of it, we won't be able to see the dark red to create the height unless we add some padding. We'll say padding bottom and do a similar thing, this dot state dot animation dot interpolate. With an input range of zero to one and an output range of 15 to start to give it that height. Then zero when the button is pressed to make it look depressed.

[05:40] Finally, we can apply our height style to our height. We can do that with the array syntax for our style. You can see here we now have our border radius on our left, but no border radius on our top. We want to animate that, as well, we'll create a new inner style. For our inner style, we'll say const inner style. We'll say this is an object.

[06:08] We'll animate our border radius, say this dot state dot animation dot interpolate. Once again, input range zero to one. When we are not pressed, we will give it a border radius of 12. However, when we are pressed, we want to match the border radius that we have supplied to our height, border radius of 16.

[06:34] Now, we can take that inner style and apply it. Now, we have a realistic looking 3D button. In order to animate this button, we need to toggle it to animate it to one, our animation. We do that inside of our handle air horn function. With that, we can say animated dot timing, pass in our animation, this dot state dot animation. We'll give it a two value of one and a duration of 100. Then we'll call start.

[07:14] Now when we press this, we can see it depresses. It animates downwards. However, it doesn't come back up just yet. Touchable without feedback also has an on press out. We can supply it on press out and we'll just create another function called this dot button up. This dot button, call it on button up. Create an on button up here.

[07:46] For this to operate and for the on press out to get triggered, we need to have an on press in instead of just an on press. Now within our on press out call to on button up, we can say animated dot timing. This dot state dot animation to a value of zero. We'll do a little quicker duration this time of 50 milliseconds and then we will call start.

[08:13] Now when we press our button, it will stay down and then as soon as we release, it animates back up. All of this is caused by or created by basically moving this outer section up with a negative margin and adding enough space for the darker red color to show through and create a shadow effect.

[08:34] Then when we press it, the padding will disappear and this border radius will then be exactly the same as the underlying height container. That way everything matches up and the red top piece is just covering the darker red underneath.