🛑 Create A Pincode / Dialpad Animation In React Native From Scratch

foreign foreign foreign how is everyone doing oh it's been a long time though I think my my music just just let me know if the music it's it's okay uh yeah I only have 20 minutes a disposal to do this uh live coding session but yeah I just wanted to like hang out with you guys I'm not sure if you're following following me on Twitter you can go ahead on Miron Catalin just give me a second to share the link here um uh yeah I'm I was lately working on on this guy here uh I'm not sure if you can see it give me a second whoa this Focus there is no Focus there's no Focus animate react native yeah I also have a bunch of other stickers uh Lucas is no Focus anyway uh just let me know also if you can hear me or not because yeah anyway so the thing is that I would like to code something uh I have finished recording the tutorial itself and I just wanted to do a live stream session as anyway so uh I only have to edit the video and then I'll share the tutorial as a whole but uh I also wanted to do the live streaming stuff so I have only 20 minutes so let's let's jump straight in into the thing hey everyone yeah okay so I'm not sure if you have followed me on Twitter but I was working on this anime tract native.com uh I think uh so this is what we are going to build this is under a paywall but basically if you are going to get a lifetime a lifetime uh license uh it's one time payment you'll get access to pretty much everything so uh yeah I'm I'm building this thingy where you can have access to a lot of animations like but a lot I mean a lot of animations there are a lot of animations uh believe me so yeah quite a lot you can go ahead to uh to the animation stuff and check it on yourself there are four different uh free resources as well uh that you can check out um if you are going to have access to it uh pretty much you'll get the code directly here uh for each individual animation otherwise uh yeah you you'll also get some some discounts but anyway so just go ahead on animatragnative.com you'll also get most probably some uh uh some stickers like those come on okay okay okay okay okay okay so we we get some stickers as well nice anyway uh let's let's go to to the animation uh uh okay uh yeah I love you all man love you all uh quite uh yeah I missed uh the thing so let's let's go to the to the coding session so we are going to build this guy here right uh the animation let me Zoom a bit so this guy here we we are going to uh create the the keypad from scratch and we're going to animate those uh those lines here as you can see um yeah so you'll have a keypad you can uh say how many items you would like to display here like as a PIN code and uh if you have entered one one one number is going to animate right uh so we'll start with the keypad and then we are going to create the animation uh so let's go to the to the to the thing to the code I already have the the project it's built using Expo you can create one using uh create Xbox app and I'm using typescript for that so let's start with the keypad and I'll have the dial pad here the dial pad is going to have one two three four five six seven eight nine zero actually nothing zero and then a Del uh okay and we are going to use flat list for that um is everything okay can you still hear me uh okay anyway oh live stream and now let's let's flat list the flat list is going to have the data as the dial pad right in the dial pad uh the key extractor is going to use the index it is going to return index to string and I'll also have a number of columns 3 and the render item and it's going to retrieve the item and it's going to return uh touchable opacity and inside will have a text that's going to say item so if we are going to render everything uh uh give me a second where is everything okay oh so everything is fine okay gotcha live oh no only 10 minutes to go anyway uh uh okay uh so so now now we have this flat list right uh nothing it's fancy here uh uh okay so let's first get get rid of the so right now flat list is taking the entire space of the screen and we don't want to do that and to fix this so we can do a background color for example red and you'll see that it's taking the entire space but we don't want to do this so we need to specify Flex zero zero so it's only going to take the available space uh let's remove the red and I would also like to remove the scroll scroll enable false okay and now let's apply some styling for each individual item and I would like to make this like 20 of the screen width so we will need a width from dimensions all right and uh dial that size is going to be with multiplied by 0.2 so let's style those guys here um so we will have a review and inside the view we'll have a style with its dial pad size height is the same border radius is the same and the border with this one border color is black okay yeah thanks a lot man uh it's it's yeah it's there for a while anyway so let's let's Center those guys uh so justify a line okay everything is centered and now because we have the circle size we can also calculate the width of the font size is going to be half of the dial pad size so I can do here the output size font size is going to be divided by two so we can go ahead here and do a style font size dial pad size okay actually it's not um multiplied by 0.4 make it uh yeah something like that and since we are using the latest react native version um we can use a gap and we can add some spacing in between right so let's also create some Gap it's let's say 14 so Gap it's 14 so this is going to add the vertical and also let's Supply the horizontal Gap to the content container Style okay so now we are centering everything properly and notice that we are rendering this circle so basically for for this element and we don't want to do it and how to actually uh and and also for the delete button so how to do it we can go ahead here to the border with and do if a type of item it's a number then render the Border or the rice get rid of the border and for this particular icon we can go ahead and uh go to this tutorial here and import ionicons uh okay no preparation uh okay and I on econ and instead of the text render and ionicon right so uh we'll say here if item it's equal to delft we would like to render the ionicon otherwise is the text and we can give it here a size of dial pad size and also color of black right so we are going to render this guy here why do you separate the styles on bottom I don't really understand what do you mean by separate the uh but yeah anyway so let's go you only have five minutes so now we have these guys and we would like to apply here on on press right on press we would like to do something with it and we would like to send the item to the parent so to do that uh we need to extract this guy here into its own component so function dial pad and it's going to return this flat list that we've just created and also we need to render it dial pad right so nothing should change but now we this is a reusable component and we would like to receive an on press and the on press is going to be a function that's going to take the value which is a type of dial pad of course this copilot it's amazing and undetouchable we are going to send the on press by the item right so now inside the dial pad we can have the on press and on press is going to set some state right and uh for the for those guys here we are going to uh initialize it with the number of with a number of the PIN code so pin code can be a length of four length of six you can Define that based on which whenever you are going to press on this button we are going to populate the item inside the state and if if the the index let's say here index one it's populated within the state we are going to animate it right so how to do that well um we first need to come here at the top and say here uh pin and we can create pin length let's say four and let's say also pin size pin size I was thinking about always making it half of the screen so it's going to be with divide by two and now uh container style container size so the container should always be half of the screen no matter what and now because we know the container style we can calculate the width of each individual pin size so the pin size is going to be the pin container divided by the length right and uh this is going to give us like the squares and we can also have a pin size with spacing and we can do some calculations minus pin spacing multiplied by two right so we can create some spacing and pin spacing it's sorry guys I I'm moving too fast I believe uh anyway uh so what's the problem here uh of course some press cannot be empty it's okay for now you can be an empty so what's actually happening here what I'm calculating it's uh I'm saying okay so the pin container cannot be more than half of the screen right then I take based on the pin length I'm saying okay so pin length is four so half of the screen we are going to attach for each individual pin width but I don't want to use that with I wanna also incorporate the width and and the spacing around so yeah this is uh we can actually do pin full size and here we can do pin size only uh okay and now because we have this pin size and also the pin length let's calculate so let's let's attach the view here and how to do it uh we can create a view and I would like to render Everything at Once even though the state itself so I'll have a code and set code which is a new state starting from zero starting from an empty array and this is going to be a number a string of number you state okay so even though this code is not going to be populated I will still want to display the the length of of the pin with with uh with the lines right so in order to do that because we already know the pin length we can create the an empty array with the pinland select at least it doesn't make any sense anyway so this is a view right and I will create an array of pin length and I'll get a keys and I'll map through this array right come on I will say the and I'll return I'll know for sure that I'll use a multi-view for that you'll see in a minute why and I'll apply some style and I'll say pin size height it's pin size border radius it's pin size and background color it's black okay so this is what we have so far and I would like to make this View style Flex Direction it's going to be raw and I would like to also play a gap of pins basic and let me give you a background color of red right so this is how how it's looking like and we I would like to move it at the top right and there is a hack there is a simple way to do this anyway I'm just playing around with you guys uh I'll apply a height of a pin size multiplied by two so now we have this guy here I'll also apply a margin bottom of pin size this is just styling purposes right and now I like to move those guys here and I'll apply another right so this is how it's going to look like and this is when the items are actually active right uh but initially I would like to apply a height of two so they're here let me remove the red so those this is how it's going to look like now because I'm looking at this okay more spacing right so if you are going to make those active though this is how it's going to look like and we are going to use moti to animate based on state changes right so it's state driven animations and uh first we actually need to know if the if the key code from from this if we have a key code that index 0 1 2 3 right so here inside the render function the return function I'll say is selected and I'll look look to code and by this index here and I'll say double negate it so it's it's a Boolean right so if this is selected I would like to make the height the pin size otherwise too now nothing it's working because we don't assign anything to the state when pressing so now if we go to the to the on press Handler here we are going to say we are going to receive the item right and we are going to say if item is equal to Del we are going to set the code we are going to take the previous one and we'll say pref slice 0 and uh boom boom boom boom length minus one this is basically saying the delete right so you have three different items and if you hit delete I would like to remove the last item last item is like pop right but in this way I ensure that no matter if if the if the area length is zero I will always return an empty array right and else if if the item is helps if the type of item is a number we are in this scene right I would like to set the state with the previous state plus the new item and right now if I open up the console here and the console or code what's happening what's happening oh you cannot see it then let me move myself from here uh uh you see it's a okay it's zero one Whatever right so if I remove it it's nothing it's one two three four but notice that if I'm adding more it's going to add more to the to the array and we don't want to go beyond the length of the of the item so let me move me back here so how to do it it's actually quite simple we are going to check uh here if the code link is equal to the clinical length uh yeah just remove and now it's it's going to stick with the so everything works as expected the only problem is that we are not animating anything and how to animate things it's uh the power of multi-man multi it's it's amazing uh you you you just specify uh this property like height if it's selected but pass it doesn't animate and now uh everything is going to work same everything is going to animate amazing but I don't have the same transition the default transition is spring which I really love because it's a physics based animation but I want to have a timing type timing as a transition and I'll also like to apply a duration of 200. and yeah this is how it's going to look like [Music] and I'll also like to change the margin so I like to if if this is selected I would like to move it up a bit and by moving up a bit I will say margin bottom if it's selected I would like to have a pin size divided by two otherwise zero so now notice that the line is going to move along with the morph zip really nice really really nice and also let me play around with the some some epic I I don't like the the Gap man the Gap it's uh is not great okay Gap here is great and also for this one I like to apply a gap of way better okay uh let me actually add some Dynamic styling and I'll be using a random color for that so random color is going to give you some random colors of course right uh and um how to use it I would like to apply a random color for the background and derive that random color and apply a darker version of that to everything that's black currently right so I'll have here uh the base color is going to be random color and now I'll say colors I'll say primary is the base color and the secondary is the random color and I'll say here the Hue is going to be the base color and the Luminosity is going to be dark and let me first [Music] replace the background of the container here so I'll say background color is going to be colors and then primary right so this is going to create this fancy color anyway at any save I will get a new color and I would also like to change this this black so instead of black is colors secondary okay and oops there is a missing part for the text the text oh of course the text color secondary okay so I'll create this one as well and also the color is going to be for the text color secondary color secondary makes sense so now you actually have a dynamic theme uh everything is working except except I would like to make this touchable disabled in case when the item is equal to nothing right so even though you don't have it here it was pressable so this item it is expressible but anyway so this is how you can create it from scratch yeah fun times fun project by the way you can also specify a different length for the pin so it's going to be six of course it's going to be six The Styling is not there but we can play around with the styling we can dynamically calculate the pin spacing I believe the pin spacing can be oh that was a bad bad color so pin spacing margin margin pin spacing pin spacing I believe it's can be differently so okay uh [Music] I believe yeah I don't know you can play around with the styling um or a better option is to go ahead to animate react native.com to this particular URL and go here copy go into your ID save it paste it and everything is going to work right you can also Define the same let's do six uh so yeah you you have a yeah there are more calculations here but yeah you can Define whatever you'd like to Define and the link is not working oh the link is not working of course it's not working uh the link is not working thank you oh this is an issue with uh wow this is a really big issue with uh okay you can go ahead to animate react native.com press command K or search here and do a pin is going to be here okay you also get quite a lot of discount uh yeah based on location uh so yeah uh this is the PIN and that was just me coding live coding quickly so it seems that uh yeah uh it's just me here it seems that YouTube comments cannot handle parentheses but yeah it's not the problem what's Fountain what it's a I think it's daylight yeah let me go back to coding uh yeah it's a pen light the female Knight let me do a plus here oh you cannot work oh that's funny everything is blocked uh yeah let me share it so it's here uh and I'm using operator mono which is a a font uh yeah otherwise I don't know guys a video with the exact tutorial or walkthrough which I did is going to come on YouTube I already finished recording I only need to edit the video but yeah if you really want to have access to a lot of animations I basically created this animator native thing um animate this guy here come on this this YouTube man it's this YouTube this YouTube man [Laughter] or uh yeah you feel free to follow me on on Twitter uh yeah it's uh it's yeah I'll be I'll be hanging around the Twitter as well um doing quite a lot of interesting things I hope if not yeah oh by the way by the way if you really want to have access to something really nice give me a second I'll share with you the iOS version of the shared element transition uh which you can get if you are going to buy a lifetime uh yeah so this is IOS at the moment I have released the Android version I'm still waiting for the review from Apple from Google site but basically yeah this is a what you'll get uh the shared element transition currently it's using react navigation plus reacting navigation shared element but I'm working on rewriting everything using green animated 3 shared element transition so yeah stay tuned for that as well yeah play around with it if you feel like uh worth giving a try yeah uh also hit me up with emails and questions and don't forget to share share with you with your friends and whatnot uh uh yeah think thanks a lot guys for uh staying with me here uh uh what font I have answered that uh how do you debug big react native projects uh console logs and avoid the calling methods while rendering uh as much as possible thank you [Music] Kiran for your support yeah I'm really happy that you learned something uh yeah guys I have to jump with a nice thing to catch up with you all uh helps you I I plan on doing live stream anymore hopefully but otherwise yeah as soon as

Channel: Catalin Miron

Views: 3,051

Keywords: react native animated api, react native sticky header, react native scrollview animation, react native advanced carousel, react native advanced animation, react native pagination flatlist, react native moti, react native moti animation, react native rean, react native reanimated, react native reanimated 2, react native reanimated 3, pin code animation, animate react native, AnimateReactNative.com, premium mobile animations, reanimated 3, reanimated 2

Id: 9K_6g8rLnHw

Length: 36min 18sec (2178 seconds)

Published: Thu Jun 01 2023