React Native Gestures

[Music] hi welcome to the second part of the react needed for designers course today I want to teach you some really cool stuff such as the gestures you'll be able to detect the pan gesture such as this and while doing that while you're dragging this card you can see that the background is fading a little bit and the cards are animating in a way that's using the spring animation it's really nice on top of that when you click on the cards such as this you can see that it's going to a full-screen mode and then you can click on close and it goes back and this also works on Android so now I go to Android and you can see that it does exactly the same thing on top of that you can even drop the card and it goes to the next it goes to the next goes to the next and it loops through the data so it comes back to the first one on top of that we're also going to learn how to create a login experience so you can see here you click on this person and I can click on logout and then I'm basically locked out and now I click here and the login modal comes and at this point I'm gonna teach you how to have input fields such as this using these deformations as you can see and we're gonna use firebase data in order to be able to authenticate with firebase so if I come back and I use the test account put test that test comm and then the password is testing and I click on log and this is where some of the magic is gonna happen I'm using Lahti animations which I'm gonna show you so I'm clicking log in and this is a lot of animation and another lotta animation and now I'm logged in and it pulls some generic data from UI names so for the avatar and for the name now for those who are not familiar with Lottie you can essentially go to Lottie files comm and you can find a bunch of animations that are created by a community and you can use these as animated assets you don't need to do this from scratch and you can just get the JSON file and then connect that to react and be able to use that as a file this really cool library called Lodi created by Airbnb allows you to basically not have to code all these animations from scratch and create really rich animations as you can see here in After Effects which a lot of designers use and just export that as a JSON file using the body moving plugin now another thing I want to show you is how to do persisting data so if i refresh the app like this you can see that the data persist and that's using a combination of a sink storage but also Redux so this course is pretty jam-packed you can see that we're dealing with a lot of interactions you know even alerts for example and loading animations and really going to take your app to the next level to a level where you can release this app and really engage your users learning a lot of cool techniques along the way that's going to allow you to collaborate better with engineers use those techniques for prototyping and of course launching your very first app now I do want to mention that this course is the second part of the react native for designers course which if you're not familiar with react native at all you should take it before starting this course even for those who have more experience with react native I think this is a pretty good course because it covers a lot of topics that are not discussed very often such as gestures animated transitions inputs Lahti animations loading animations persistent data firebase and all of these things that I think a lot of people would want to learn awesome so let's get started first of all we need to head to the github repo that's called react for designers if you haven't started the project yet you might want to clone this first and also it's important to update the assets because we do have new assets so I'm gonna copy this link go to terminal and do first go to downloads and obviously you can skip this part if you already have done the part one right now do git clone and then the link this is going to create that project folder and going to that reactivated for designers then I can do NPM install and this is going to install all the missing libraries now I can start expose or expose start and this is going to launch the dev tools into the browser now this might take a while but once it's launched now you can run on iOS simulator or Android emulator and voila we should have something like this now this is where we left off which means that we have this much done the cards the article page the menu so we don't have the courses and a project we do also have some issues which we're going to fix in this course now let's check our code we're gonna bring this folder into Visual Studio code and then I'm going to hide this and use as much space as I can like this perfect so let's go to the assets folder and replace with some new assets so reveal in finder go here and also open the asset folder that is provided and I'm just gonna copy and paste right here perfect now the screen that we want to build is the project screen but the thing is it's always every time you refresh it always goes back to the home screen so what we want to do is to go to the Navigator and just change that so that you know in the tab navigator j/s we're gonna go to you know before the last line and we just need to put the project stack right before so I'm gonna copy and put it right here do my , save and now every time that I refresh it's going to be on a project screen now let's go to the screens folder and go to the project screen and so the screen that you see here is exactly the code that you see right here now before I go further I do want to explain a little bit about the theme that I'm using and the extension so I'm gonna go to extensions so you can see that I install a bunch of them such as prettier which is very important when every time that you save then it's gonna format the code for you style components with material theme but also material theme icons graph QL and flutter stuff which is for a future course there's one more thing that I customized and that's in the settings so I'm gonna go to back to my files close this thing and then go to settings in settings I'm gonna go to parameter and here I want you to disable the pattern meter hint as you might have noticed in the first part of this course the auto completion can get a lot in the way and especially the ones that are more technical are not necessary and so those ones I prefer to turn them off but obviously this is optional okay so let's go back to the code I'm gonna go to the project screen and you can do command B to focus on a code I'm gonna make the code a little bit bigger and the first thing I want to do here is to have a card so I can start swiping it now for the container first of all I'm gonna set the background so background and I'm gonna use this code right here you can copy and paste from the text content and now when you say you can have this background right here the second thing I want to do is basically create a project component so I'm gonna go to so command B go to opponents folder right-click right here new file and it's going to be called project Jas this is where I'm gonna create the card so first of all import react from react and then import the style component so style from style components and then do a class the project extends react dot component curly braces render return and I can just put a container the container is gonna require you know a component style so first of all I'm gonna export this to default project and set the container as a style component so Const container is equal to style dot view backticks and set the styling so the width is gonna be 315 pixel height is gonna be 460 border-radius 14 and background color is going to be let's say blue just for testing so obviously it's not going to appear yet to the project screen because we haven't included that so I'm gonna go back to project screen j/s and select this text component with a text and replace that with so let's say left bracket and project and just scroll down to this one it's going to auto import for me like this so or import it and then close this and save now I have my card cool so we're doing the gesture now finally I'm going to hide this first and for the project screen I'm going to import from the react native library it's to be import and then curly braces from react native and so when you write this first when you write with between the curly braces like tan responder it has Auto completion so it knows that you know pen responder is from react native soil sometimes it's good to write this first and then after that I'm gonna also import animated the next thing is to set the states now I need the path state so state is equal to curly braces tan now I'm gonna use the animated a library so that I can do some animations it's also easier to work with at the pan gesture so I'm gonna do new animated and value parentheses and after that I'm going to component will mount parentheses curly braces and this is where I'm going to set up my app and responders of this dot underscore pan responder is equal to hand responder which is from the library dot create okay and in parentheses curly braces and now I need to enable the detection of the pan gesture so what I need is on move should set pan responder like this one and so my column parentheses arrow to true now this is just to enable the pan gesture to sort of listen to it the second thing we need to do is to alcohol comma first and then I'm going to do on pan responder move okay and this is going to be animated dot event parentheses and I'm gonna set square brackets first of all it's gonna be no now if you remember we used to have animated timing and we were changing the state but in this case this is an event and what we want to change is the x position and the y position so we're gonna use curly braces and starting with DX which is the x position to this state dot pan dot X then comma and then dy this dot state that pan dot y make sure it's exactly like this and feel free to copy and paste from the code in the text content because you know some of this is a little bit technical but we do need this in order to change you know to move this card as we drag it so this is basically setting up the gesture so we're enabling it and then when you know we're moving the card then we're essentially saying okay we have to move that this thing well the state position of x and y and now we just need an animated view that we can wrap around the card which is called project I'm gonna go here and an open animated dot view and then close and use the closing animated view to wrap around project like this and here you know we do need the animated view in order to be able to use the animated library in order to apply those you know animated value so we're gonna do style is equal to double curly braces and this is where we're gonna apply the transform and for transform we have a bunch of transformations just such as translate rotation in this case we're gonna use translate Y and translate X so you know for transform we're gonna use square brackets and then curly braces again translate X and then we're gonna apply this state dot Han dot X comma after the curly braces open another one translate why this state pan dot Y and now you can save it it's gonna give us an error and that's because we set the animated value to just value and there's a certain value that we actually need which is value X Y instead and so now if you save it it should be fine now the last thing that we need to do is to apply this pan responder that we declared earlier so we're gonna apply right after this style you know after the double curly braces we're gonna set curly brace and triple dot this dot hand responder dot hand handlers and then save and voila at this point you can start moving and you can see that it follows where you drag the little box now I understand that this is a little bit daunting to get started with but at the same time I do want to point out this this is really powerful stuff and you can do so many things with it the next thing we do want to try is let's say when we release this card we want it to come back to the original position so in order to do that we're gonna use another one of these events so for this one is called move so basically when we're moving there's another one called release so that's when we're you know you know we release the click or the tap so I'm gonna add a comma and an unplanned responder you can see that we have a bunch of them here and we're gonna use the on pan responder release and then put empty props arrow curly braces and then set the animated animation so animated this dot state dot pan so we're changing the pan state comma curly braces and set to value of curly braces I'm gonna go back to X 0 and then y 0 now I do want to point out that since we're using you know value XY which has two values inside it which is why we're also using curly braces to kind of embed two values the X and the y position so that's why when we're changing the pan we're also changing you know two values at the same time and finally don't forget to add the start animation if I save this and I start dragging my card and I release it goes back to the original position that's really cool in the next section we're going to learn how to take this further having multiple cards for example and also when you drag this to a certain position then it's going to drop the card but for now what I want to do is to apply some styling here and this part is totally optional because it's just basic styling and we're going to apply some data so that we can have multiple cards so let's head to the project is and this is where we're gonna set up the structure of this card right here so I'm going to delete this return and container start with parentheses and then I have my container of course close it there cover and then inside the cover I'm gonna have an image using a source curly braces this prop stuff image which means that we're gonna use the props that's going to be passed into this component and then close the image also we're gonna have a title inside the title we're going to use props as well so this props dot title and then next we're gonna have the author and it's gonna say by using the props this props dot author then after cover we're gonna have also a text so the text is going to use this props dot text perfect now we just need to set the styling and by the way you can copy and paste the styling if you don't feel like going through with me but you know it could be fun so we're gonna start with the cover so conce cover is equal to style dot view backticks height to ninety and by default is going to use the full width so I'm gonna go to the next one and also one of the things that I like to do is just to to be able to save all the time but right now if I save it's gonna give me an error because these components don't exist so I'm gonna create empty ones first so Const image is equal to style dot image and constant title and this one is going to be a text then the author is going to be a text as well finally the text which obviously is going to be the text as well and voila so it's good now and the second thing is let's work with the data right so we're going to go back to project screen and we're going to inject some props right here starting with title is equal to double quotes and then price tag and obviously you can use any data that you want for the image we're gonna use one of the images from the assets folder since it's a local image I'm gonna need to do require and parentheses double quotes starting with dot dot forward slash so that means that we're going back in you know from a to a parent folder and then get the assets folder and background five dot jpg so we have the title and then we have the image it's it is showing it's a little bit big we're gonna fix that in a style then we have the author yoyi and then the text and you can just again use any text that you want really I'm gonna use this one and voila so when I do my styling I really love to work with data and to preview every single step of the way that's why I'm setting the props first and the structure first and make sure that you know I have MT style components so that it get doesn't give me errors now back to project J is for the image component I'm gonna set the width to 100% and the height to 290 it's starting to look like something but I just need to put some of these text on top of the image by using position:absolute so for the title that's exactly what I'm gonna do is a position:absolute and I'm gonna start with top 20 pixel and then left 20 pixel I'm also going to make it bigger so font size it's going to be 24 font weight it's going to be bold the color is going to be white and I'm also going to set a width so that it kind of rap it doesn't sort of go and have no padding at the right so I'm gonna do that with a width of 300 so now I have a nice little title here next we're gonna set the author so the author is going to have also a position:absolute we're going to position it from the bottom this time so bottom 20 left 20 and then set the color to a slightly transparent by using RGB a so 255 255 255 55 with this is for white and at 0.8 opacity and the font size is going to be 15 and the font weight is going to be 600 which is a little bit less than bold and text transformed to uppercase so that we can make everything in uppercase like this okay remember that we had the background to blue so now we can just set it to white instead it's gonna look a lot better and on top of that I like to have some drop shadow so let me add some drop shadow box shadow and set the you know exposition to 0 Y position to 10 pixel and a spread to 20 and using RGB a because we can use the opacity as well so 0 0 0 that's 4 black and then 0.15 for the opacity at 15% so now we have some really nice drop shadow so at this point we just need to set the styling for the text but also fix some of the round corners here because of the image so for the text I'm gonna set the font size to 17 which is a recommended font size for the body text and I'm also going to set the margin to 20 pixels so that we have some padding and it's recommended to have you know 10 to 20 pixels usually and the line height which is really important as well for you know especially body text I'm gonna set it to a 24 and of course you can reference the envision Studio file that is provided you know a part 1 of discourse but also part 2 you can get all the colors that we need for you know implementing our design in this case I'm just gonna use this one so this color code right here and come back and set the color to that color code and now we have some really nice colors we just need to fix the rounded corners here so what we can do is that remember that we have like the cover here that is the container for the image so the image is at the bottom and then these two layers are positioned at absolute and we can use this container to set the overflow and so we're gonna go to cover and we're gonna set the border radius only the top left and the top right usually you can set the border radius on the image but the problem is you cannot be specific about which corner and the only way to do that is to apply that on the view container that surrounds the image so we're gonna do exactly that supporter top left radius 214 and border top right radius 214 and we're also going to apply overflow:hidden this is like in CSS why are you doing a masking and now you can see that we have our beautiful rounded corners right here and that's it we have not only our gesture but we have a beautiful UI to play with and you can obviously customize the data and the UI in whichever way you want I think you're gonna have a lot of fun with this so like I said the next part we're gonna you know go a little bit deeper into gestures and how to play with multiple cards and how to detect the positioning so I can drop the card and go to the next card and loop through the cards it's gonna be a lot of fun I hope you'll stick around I'll see you later

Channel: DesignCode

Views: 37,671

Keywords: react native, gestures, firebase, reactjs, lottie, login

Id: N9oKp6orIQQ

Length: 28min 46sec (1726 seconds)

Published: Thu May 30 2019