5 React Native Tips to WOW Your Users

when you are building apps with react native you usually get pretty good results out of the box however there are a few simple things that you can use that you can Implement in like minutes to spice up your applications and in this video I will show you five of these tips to instantly improve your react native apps so let's dive into them I've created this super simple example which is just a Tap bar with three views and all of them have just a very long list because this is going to be helpful as we use some uh scroll events and also want to work on the different areas like this one up here so as I said this is using a simple example it's just a Tap bar setup nothing really fancy Happening Here the only difference that is probably worth pointing out is that these are all stacks for themselves if you've used Expo router before um you know that you can have your own layout files for these files and for our case for example here's the assignment page and the assignment page is here and has its own stack just like the big header and the fade header page so this is the fade header and this would be the big header page so far there's nothing going on in these Pages this is just the default setup so we can then Implement something these pages are okay there's nothing wrong with them but you can do so much better with some easy stuff so let's start with number one you can use blur effects in your application really really easy in this case I used the Expo blur view I know that it's still an experimental feature for Android and I know there are some problems especially with uh Aller devices however the explore blur view is really really great if you can rely on it and use it so let me show you how let's say we want to make our header a blurred background we can go into our stack. screen setup so this is the Simon page and I can simply change my header title to something like Simon Okay so let's just see that we're on that page that's correct and then you can apply the header blur effect and there are some different keywords that you can use so these are all the different options available let's just go with the regular one and I'm going to hit enter this won't change anything so far because we still need to make our header transparent as you can see it still has a white background so in combination we want to set the header to transparent and here we go boom you have a blurred header and that looks so good in most applications when you have some sort of scrolling going on however you might notice that now our app's content is actually behind that header and there's a simple reason for that if you make your header transparent basically the size of the header or the height of the header is zero that means our page starts right at the top therefore the first part here would be hidden if you want to fix that there's a super simple fix so you can import a hook called use header hate uh from react navigation elements once you get that you will automatically get the current hate of your header and you can use that to your advantage to Simply set the petting here so let's set the pading top of my view to the header ha and as a result you see my list now starts in the right place and I should still get that probably we should do a little refresh all right quickly correction this of course has to be applied to the scroll view if you apply it to the view it happens what happened to me uh you won't see any blur anymore you need to make sure you put it on the Right View but now all of the things start in the right place and we get a nice blur effect on our Header by the way this is pretty easy done if you're inside a stack if you're inside a tis or a draw navigation you usually will get an error complaining that header blur effect property does not exist in options usually what you can do in those cases is you can drop in the blur view from Expo just like it is into those components so you can create a custom uh background for your header with a draw or also for the tab bar and you can see examples of this in my other clone applications I think in the cat GPT clone I heavily use these blow views so check it out if you want to see more of them in action tip number two is to follow the native platform Behavior especially if you're on iOS you can easily get a big header let me show you what this is and what it means so here is the page my second page let's give it the header title uh something like big header I don't want to set the header Style thank you so we've changed the header that works now we can enable this by saying header large title true if you do this something will happen on your page it will immediately look like this we should probably do the redirect okay so we do have this big header here now um and if we scroll it goes to the top however this is not yet perfect you see there's something snapping also my content is behind it so let me show you how you can improve this uh first of all you can also now apply some styling so if you want to have like your big title in a different color you could do it with the header large title style it Al if you want to get rid of this border this border is usually called The Shadow so you can also now disable this so header large title Shadow visible FS would remove it in the big case but still keep it uh up here once it collapses now on top of that I might want to make this look more natural and you can apply this by also setting the right background color so if this is like fitting nicely or blending nicely into each other the the header Works usually better in this way by the way I would recommend to uh header to completely disable the head or shadow in this case I think this feels a bit better now there's still something not quite right and for that we have to dive into our page because if you're using the header large title property you also want to set something specific on the scroll view of your page so you want to set the content inser adjustment behavior and you want set that to automatic once you do this let's do a quick refresh of our application and we should see that we start the content starts here in the right place and it goes into the header very gentle so there's no more snapping and you got this nice cool big header that actually still expands while I pull this down a bit more and then it transitions into the header and you get the classic iOS large header collapsible header effect pretty much for free tip number three is a very fast one but it can have a really huge impact so for all of you who want to have something like a search bar or general text input connected right in the header of your page you don't need to worry about creating a custom header or working around this you can just go into your options and say header search bar options and then Define some options for a search bar let's say I just want to put in header the placeholder search Simon uh let's do a refresh and if I'm on that page voila I get this nice feel here it collapses right now so if you don't want to do that you can simply say hide when scrolling uh fults and that means my field will be visible all the time at least when I refresh my application so with just three lines three lines of code one property we have connected this epic field up here and it is really great so if you go into this you get this for free you completely get this out of the box this of course also works with the large title so if I would go back into the page where we previously used my header large title I could also hit save here go there and we would see now we have the same search bar up there and it works with the collapsible header as well it's going to be sticky once you scroll it to the top so for everyone who needs a text input field uh connected to the top of your page connected to the header area use the header search bar options tip number four is even faster it is also related to text inputs it doesn't really matter if you have a text input up here or if you have text input in your field but usually what you see in other applications is that you want to kind of leave that field without draging cancel so in most applications you're going to see that if you interact with a background somehow the keyboard down here will disappear and there's one line that you need to add to enable this functionality this one really blew my mind when I uh understood it so uh let's just go into my Simon page where we have a scroll View and on that scroll view I will simply set the keyboard dismiss mode and you can now select between different uh ways you can have interactive non or Onre so I will set this to Onre and as a result I can do something like this you notice this uh I don't know if this comes across correctly in a video but I can just know direct this view down this scroll View and all the text inputs or the keyboards that are open are dismissed this is one line and it adds like a gesture Handler and interacts with the keyboard in your views this again still blew my mind when I learned about it so I really hope the keyboard dismiss mode will bring joy to you Al as well tip number five is about using reanimated for some small gentle animations especially on scrolled so let me show you what I mean what you can easily do if you've reanimated in your project bring in a few dependencies like use animated R use animated style use scroll view offset especially this is probably the most important one so let's just code this together really quickly you generate a scroll reference and you're going to set that on on your scroll view so on my scroll view I will set the ref to oh not everything just the scroll ref then with use scroll view offset I will automatically get the offset of my scroll View and with that I am basically free to do whatever I want to do for example I can now create a simple button style using the use animated style hook which will check the scroll Handler value and if that value is greater than 600 which means we have scrolled the page down for like 600 pixels or you could do whatever you want I would call the width timing function either with one or two uh or zero to change the opacity of something which means I can basically onscroll hide or fade in something now I'm just going to need to put in a little view in my uh app here so let's put this down below the scroll view I will use this animated view um I will actually also implement the quick con scroll to top so that would scroll my scroll ref to the top in an animated way as well and then we're going to uh add the export Vector icons so this animated view has the button style from the hook and also some absolute positioning so I can now scroll down and after 600 pixels something should fade in there it is so this is the button that just faded in if I go back going to notice that it gently Fades out so it gently fades in and it fades out and you usually see this in like chat applications when you have a long list of messages so you can just go back top by the way this is uh not the right place maybe it's just 80 or 60 or maybe it's just 40 I don't know I don't uh I don't know where we want to place this but this is a super easy way to give your users this um cool moment that just make it feel like oh this is a good application they care about me they they do this and you see these are just like a handful of lines to use a scroll view offset and a Handler in the right place um so pretty much there's no reason not to do this um you can also do this in a case of a header so let's say um I think we used this before in my Airbnb clone uh let's add the header Title Here to uh actually not fade but I want to set this to an empty string and additionally I will also make the header transparent so we see this page is now filling up the whole view again you got to be a bit careful in that case uh with offsets but if we would like to do the same thing that we did before but for the header we could bring in the same stuff we had um this time I will also create a touchable opacity that is animated because that doesn't exist automatically and then we can do the same thing again on on this page so use the scroll view Lo use the scroll view offset set the ref here on my scroll View and then we can animate the header style using the interpolation so that means all the values of my scroll Handler are now mapped so between 0 and 500 so scrolling from 0 to 500 the opacity would be mapped to either zero or one or some values between between and that is done by the interpolation function so now I just got to bring in uh let's say a custom header so in that view I will now place a definition for that stack screen which defines a header background so notice we don't have any header yet now I'm placing an animated view here which has this animated styling and also some default styling and on the header left I will also add a touchable opacity button now what happens in default case we have an opacity of zero which means my header is not visible however once I start scrolling you will notice that at the top something lightly fades in and you can of course change these values to your needs but usually you see this in many applications if you scroll something will happen to the header sometimes it fades in sometimes just a button fades in and by using our style again in combination with use scroll view offset we have this super easy header animation all right these were five tips that you can instantly apply to most of your react native application and will just make the user experience a lot better if there is something going on micro animations or any kind of micro interactions on the page these are the things that users don't really notice but they improve the user experience in your app and I've seen this in countless apps in my app reviews or when I investigated the big apps for the Clones that I've done you should definitely check these out they contain all some great knowledge um these are the things that the big companies implement but the five tips shown here are things you can Implement in like five minutes and they will definitely improve your app these are just some things that I picked up over the time and they're pretty more impressive things that you can do with react native so I would love to know your best tips for react native that can be implemented really really fast but that have a tremendous impact on react native applications so share your favorite tip in the comments and I would love to do another episode on this because these are the things that all of us can do in an easy way to improve our react native apps and of course if you want to learn more about react native check out galaxies. deev which also has tons of courses to make even better apps so stay subscribed if you're not yet and I will catch you in the next one so until then Happy coding Simon

Channel: Simon Grimm

Views: 15,765

Keywords: react native for beginners, react native tips, react native, react native tutorial, galaxies, galaxies.dev, simon grimm

Id: pZgjlh5ezd4

Length: 16min 35sec (995 seconds)

Published: Tue Jun 18 2024