10 Essential React Native Tips Every Developer Must Know

you might have worked with react native for quite some time but do you really know all the ins and outs there are some really small nuggets of wisdom in the react native dogs or from the day-to-day use that I want to share with you so here are 10 practical tips that you can use in your next react native project the first one is a real quick one about lists and something I shared before if you have an input here and you want to hide that keyboard there's a simple thing that you can add to your

list so I'm using a flat list here and you can now simply go ahead and add the keyboard dismiss mode and set it to UND drag as a result I can drag the list and it will automatically close the hardware keyboard whenever I do the drag additionally by the way you can also quickly make this a really cool animated list so I can add and remove things but let's just change this to an animated flat list from react native reanimated and then let's add the item layout animation and let's import the linear transition so now

I should be able to have a smooth transition whenever I remove items or add items with just two little changes to an animated flat list and the item layout animation and I can also on Swipe close my keyboard the second tip is about the pressable component in most of my tutorials you're going to see me use the touchable opacity which works great as a button replacement however if you're looking for a more extensive and futureproof way to handle touchbase input check out the pressible API and if you go into the pressible you see that there's

a lot more fine-tuning you can do like onpress in on press out where you can change the state of your components let's do a quick example I will just change these items which are currently touchable opacity uh item to a pressible and instead of just using Styles item I can actually now use a function where I use the Press State and use that to set either the opacity or for example the background color and you can even use this press State inside the child uh values here where I currently have the text of the pressable

component as a result I can now find tune exactly how the click event on that button and how especially the Press event Works instead of just using a touchable opacity tip number three is about dark modes and the appearance of our application did you know that you can simply rep your application using the theme Provider from react navigation and then include the default theme and the Dark theme to automatically style the elements from react navigation so in this case you're going to see that both the status bar uh the top area up here here and

even the background here because it's using the default background color are changing once I switch the colors here in the simulator this works because we use the use color theme uh use color theme Hook from react native which then updates the color theme to either light or dark and this is applied here in our check wrapped around our application you can then also drill this down on component levels so whenever you want you can simply import the color theme and use it as a state to set different styles on your elements and if you manually

want to toggle this you can use the appearance API and the set color theme to manually save this this works nice in combination with something like awing storage or mm KV so you can then manually onclick toggle this however in the simulator this usually fails uh especially when I don't hit save so now it should work and I can instantly and easily switch between light and dark mode in my app tip number four is once again about colors this time it's about using platform and the platform color API in the application so here's a view

with three different buttons and if I go to that same view on my Android emulator you're going to see for some reason they look different and the reason is that you can use both platform select to switch between different platforms you can actually not only have oh come on please stay open come on stay open you can not only ah this is not possible not only switch between IOS and Android but also Windows Mac OS web or native and then you can supply specific colors in your stylesheet and you can not only have fixed colors

but you can also see the platform color here this is a bit more complicated uh to use especially figuring out the values for Android is somewhat hard you have to get into the Android documentation but if you're interested in this you can actually use the um System colors of both IOS and Android if you want a complete and even more native feeling in your application tip five is about fonts and especially Google fonts did you know that that there's an expo package that you can use that you can simply install and then use all the

fonts of Google let's check it out I've added the package for the Frank rule Libra uh font to my application to the layout and I also used the use fonts hook to safely in the beginning of my application load all the custom fonts that I want to use I would usually use Usef and make sure font's loaded is ready but nonetheless I can now use them on my page inside of the font family and as a result we see here the bow and the medium one being applied it has never been easier to use Google

fonts in your react native application than this trust me tip number six is about images when you use the image component and you're loading something over the network for example a really big image like this it can sometimes take time so if I go here it takes a millisecond and there are sometimes images that are even bigger now what you can do is you can actually specify a default source and within that default Source you basically set the image that should be deplay deployed or should be displayed while the first image is loading so if

I had it like this now I could go into the component and you quickly saw that react native image so I just used my local image because that one should be instantly available you could also have like a simple loader in there as the default source that would work as well and then you can use any kind of big image and while it's loading just by default you display your default Source in the image element tip number number seven is about the text element if you have a very long text in your application there are

different ways to improve this so the first way if you're rendering really long text is of course have this in a scroll view but sometimes you also want to limit the number of lines so you can do number of lines on the text element let's set this to five and this will automatically render only five lines and at the end you're going to have three dots so you don't need any logic if text uh length is bigger than 120 then render three dots or something no you can just set the number of lines however if

you at the same time also want to still show all the things uh of your text because now the text of is truncated you could add a property called adjust font size to fit as a result this looks right interesting because in our example well eight lines is probably not enough but now we would be able to actually fit all of this in 20 lines of text remember this was our initial State and now we would be able to render all of that using adjust font size to F which will simply um specify whether font

should be scaled down automatically to fit given style constraints this is not always helpful but it can be a nice fix in some of your applications tip number eight is about warnings in your application so I recently came across a warning that was well not too interesting to me let's say you got this one uh which of course doesn't come up when I want to show it so so encounter two children with the same name of course that is something you definitely want to fix however sometimes there are things that you just want to ignore

because they keep appearing especially if you maybe do a presentation for your customer what you can do is you can simply import lockbox from react native we don't need these fences that looks interesting and now I could go ahead and use lockbox uh and I got two um or different ways I could ignore all locks or I could ignore specific locks so in my case what I want to ignore is probably encountered uh two children with the same key I can now hit save and let's do a Reload again and I go into eight and

boom no more locks and of course the same would work if I would use uh lockbox do ignore all locks that's probably a bit more dangerous uh because it would hide anything that pops up in your application so anyway treat this carefully but if you want some mind space some quiet applications and nothing that pops up while you work on your application simply use lockbox to control the locks that appear in your react native app tip number nine is about API usage and I was kind of shocked when I saw it so I was using

a local API a local um on Local Host port 8080 and we see I have a simple block here where I fetch my data from API URL SL test and it works perfectly fine on iOS however on Android I get an error fetching data why is that is that the case well it turns out that Local Host doesn't work on the Android emulator you're going to have a bad day what you can do as a result is you can add this little block at the top which is kind of ugly but if you put all

of your API calls usually in one or two files into our custom hooks that should be easy to treat so in my case I grab the environment using the note environment to make sure we're actually running in development and if we're running in development and the platform is Android I exchange and Patch my API URL which I usually got from my process environment so instead of using Local Host port 8080 I'm now using 10.0.2 point2 8080 let's hit save and let's check out my emulator again so if I now go into page 9 voila we

have fixed this and we can make API calls to Local Host on both IOS and Android just as a quick addition to this uh because this might be an ugly heck here's something else that's recommended so you can also map your Port using uh ADB or down here for ad devices you can map the port specifically for your emulator that's probably a tiny bit better than having additional code but if you just want to do a quick test this one will get the job done tip number 10 is for all of you who want to

build a production application of your react native application using Expo so usually you're going to see you have your own custom def cine even if you do a pre-build it only works when your live reload is up and running but sometimes you just want to have the app installed and leave the room and show it to someone else what you can do to build this kind of Standalone application is once you have created your pre-built with Expo go into xcode go up here hit edit scheme and under run configuration here for the build configuration you

want to select release go ahead with that build the application for your device and there's no more connection to a local server Additionally you can of course do the same for Android so open your project up with Android studio and then add the bottom left you're going to really small find something called build variants inside of build variants you see that everything here is set to debug and of course for our app I can now change this to release it will change all of these to release and I can go up here and deploy the

app to either my simulator or of course any kind of connected Android device all right that brings us to the end of this quick video I hope you enjoyed this quick run through of 10 different things that I picked up over the years I took note of them I probably will do another video once I reach more than five or 10 nodes again in the future but let me know in the comments what is something that you figured out after years of using react native or you were like why didn't I know that earlier leave

a comment down below and of course also if you enjoyed that build process step that I showed you last here's a video about all the ways how you can build your application with Expo including pre-build e and everything you need to know don't forget to hit the like And subscribe button and I will catch you in the next one so until then Happy coding Simon