Improved Form Error Messages using React Native Animatable and Hooks

what's up folks Spencer here with another lesson of react native school today we're going to be looking at how to add a little bit of animation to this Login error state so basically when we log in if our values are not valid we're just going to pop up this little red circle with an X in it to signify there is some issue with that if I go and type in the correct value it'll go ahead and go away quick note before we get started as this design though basic it is based off of it this dribble screenshot so if you like the design make sure to check out the actual designers work all credit goes to him for this actual design okay with that said the way we're actually going to be adding the animations to this form is using the react native animatable library and the reason we're using this over the typical animated API in react native is it's very very simple react native animatable gives you a very simple declarative API they've got built-in animations that do all kinds of different things and in addition to their declarative API you can actually interact with all of these animations delays direction easing all of this through they're imperative API if you want to go a little bit deeper and customize things you can also write custom animations all kinds of good stuff you can scroll through and look at all the different animations I'll have a link to this library in the accompanying lesson so to get started what you want to do is in your terminal go ahead and say yarn n or NPM install react native and amenable and that's the only thing you need to do to install this library there's no native dependencies with that done we can go ahead and import star as animatable from reactant native animatable with that complete we can go ahead and use a drop-in replacement for a view and animatable dot view animatable provides a handful of different components core components with an animatable equivalent if there isn't one animatable has a function you can call to create a animatable component if it's a custom one or it's just one that's not supported by default out of the box and they're declarative API syntax once that's done we've got our style in addition to this we can go ahead and specify which animation we want to use I'm going to use animation equal to shake then you can also specify a duration will set this to 500 milliseconds you can also set an easing property and just for the heck of it will set it to linear so now if I go and try to log in without valid values you can see it's going to go ahead and shake if I go I'll refresh this and if I type in the correct value for username and shake it'll just do the one down below if I go ahead remove this value you can see this is now an error state we're going ahead and displaying that error message with the shape now this project is entirely based on react hooks so when we're using the imperative API we're going to go ahead and continue using hooks for that so what we want to do now is we've gotten animation when this shows up but we want to show an animation instead when it shows up and when it goes away to do that we're going to be tapping into anime tables imperative API and the hooks that will need to use to accomplish at our use state use ref and use effect so first thing we'll do is replace the animation duration and easing with a ref and we're going to call this the view element view element is going to be defined up at the top of our error component and this is going to equal use ref and we're going to default it to a value of null and to simulate the behavior we had before of this animation happening when this component mounts we're going to use the use effect hook which allows us to simulate using or emulate using component did mount our component did update an inside of here we can go ahead and say view element dot current dot animate so it's very similar to the API we had before we're just doing in a declarative way here going to go ahead and specify which animation we want how long it should take and then the easing function to use which will be using linear and when you're using a the response of user F need to say view element adopt a current to actually access it so now if I run this and I actually go and login you can see we're having an issue here of rendered more hooks than during the previous render that's because nothing can really stop this render from happening so really what we should do is call this before the return no the problem is this is being called immediately like a component amount but this components not yet mounted so we need to get rid of this display if we're not displaying it return no we need the component to be here at all times now obviously our components showing up when we don't want it to so what we'll do is actually basically just set the opacity to zero if we're not displaying the air so I'll set up a new array called view styles which is going to start with the Styles air like we've got now and by default it's going to have an opacity of zero if we are displaying the air then go ahead and add to view styles and opacity of one so now if I go and login we've got that working correctly and you can see that even though this components already mounted we're going to use this effect to go ahead and shake it when the air state does change okay so we've got that done now what about if we want to animate this when it's no longer being displayed use effect is going to be called each time our prop changes in here so we could say if display so if we do want to show this then we're going to go ahead and use our shake animation else let's go ahead and change our shake animation animation to bounce out and we'll go ahead and just remove this linear easing function because we can just use a default one now if I go ahead and press login and then provide the correct value you see what we're having here is a lot of changing of these values we don't want this to constantly be changing so one thing we can do whenever we know well there's just one value we care about and this kind of makes a little bit future-proof is we can say use effect should only ever be called when display changes and to do that to use effect you can pass an array of arguments that it should they use affection listen to as the second argument to use effect now if I press login and I type in values you can see everything's working well and it goes ahead and disappears and then when we delete the value it'll come back and so on and so forth goes ahead does it it's a very minor animation but it does add a little bit of professionalism or kind of it just it classes the app up a little bit it makes it look and feel a little bit nicer a little bit more fluid unfortunately due to using react native animatable it was really really easy to use with the library you have either the declarative API to use or you could go ahead and go a little bit deeper and use the imperative API as well if you wish like we've done here it doesn't have to be complicated and do two react native animatable having these different animations built in all you have to do is say shake or bounce out and we've got these very small animations that can add a lot to our app so I hope you found that lesson valuable and I'll see you in the next one

Channel: React Native School

Views: 11,987

Keywords:

Id: I3BvB_v8yPA

Length: 8min 33sec (513 seconds)

Published: Tue Jul 28 2020