Bottom Navigation Bar Tutorial in React Native

what is up guys in this video i'm going to be showing you how we can create this bottom navigation bar and as you can see it looks like a default bottom navigation bar with nice icons and i will also show you how we can navigate between screens in react native so there's a lot of stuff in this tutorial as you can see right there in the demo we have lots of navigation components and it's actually very simple to do so the first thing you want to do is create a new react native project and i'm going to be using expo so type in expo init plus your project name and as soon as that loads just click on a blank project and we will wait for that to install immediately after that i'm just going to clear the terminal make sure you go to your navigation tutorial folder and we're going to add these dependencies and i'm going to be using yarn to install them so right now i'm going to go ahead and also use sudo to become an administrator in the terminal to make sure we can install it you might have to do that i don't know how it works on windows but on macbook you have to type in sudo followed by your password and one more thing i'm going to leave all of these in the description down below so that you can just copy and paste them like i did and once we have installed all of these we can go ahead and start with the project these are just the navigation components that we need for everything to work so the first thing we're going to do is go to our project folder and create a new folder and i'm going to call this one navigation and inside navigation i want to create something that's going to be our main container so to do that we'll just create new file and i'm going to call it main container.js then to continue this project structure we're going to go to the navigation folder and create another folder because inside here we also want it to contain the screens that we want to switch between and inside here the first one we will create is going to be a home screen so homescreen dot js then we will also create another one which will be called settings screen dot js and finally a details screen dot js and you can add as many of these as you want i'm going to stop at three to make this tutorial shorter so the first thing we're going to do is take care of all of these screens we're just going to hold some very simple placeholders so we will start with the home screen and we're just going to go ahead and type in import everything as react from react then we want to import both the view and the text from react native and export the default function which will be called home screen and we're going to give it a argument which is going to be a navigation then we will open up this block and we need to return the view that we want to display on the home page so just to save some time because i want to focus on the navigation i'm going to go ahead and paste this in as you are probably familiar with every app has a view that it must return when it exports it and that's exactly what i started with i inserted a view such as in our app.js and i actually put this in the details screen while it should have been in the home screen but as i said earlier i started with the view so we have a view tag plus an inline style which has flex 1 align items to center and the justify content to center so that all of this will be centered and the text just says home screen it has a style of font size with 26 and a font weight of bold and the on press method just tells the program that it should create an alert so that's all i did for the home screen and the other two are going to be very very similar so just copy this and take it to the settings screen here we need to change this to settings screen and we need to change the on press method so for this one we do not want it to say that it is the home screen so instead we are going to remove the alerts and we are going to type in navigation which was passed as an argument over here dot navigate and we need to pick where we wanted to navigate to and this has to correspond to the name that we're going to give the tab so for this one it's going to be called home and i'll show you later where this should correspond to and now with that being set up we have a setting screen that is going to take us to the home screen then go ahead and copy this one more time paste it inside the details and just change it to detail screen and a very slight detail i forgot was to change the text so on settings change it to settings screen and details is going to be set to details screen but now we have the three screens that we want to display so we can actually close these three tabs and move on with creating the rest of our app so now we're going to go to our main container and inside here the first thing we will do is type in import everything as reacts from react and we're going to type in export default function main container and as always we need to return something so inside here we will return an empty view just for now because we need to create the placeholder in app.js so i just wanted to create this so we could refer to it but right now we created the main function that will be containing all of our navigation so we can go to app.js and we can remove all of this and as always we're going to import everything as react from react and we also need to import the main container and it's going to give you a suggestion you just need to make sure that it is actually located in the correct folder so now we can go ahead and type in function app and inside here we're just going to return the main container and we need to remember to export default app so now when we run the program we should have nothing appear on our screen and it's actually fair enough it did give us this error because we referred to something that does not exist here so just to make the program happy we can go ahead and type in import view from react native and the program is still not happy because it has nothing inserted inside this view so just to make sure everything works correctly we're going to go ahead and add the text so we'll type in text there and then we can create a text box here so hello and click on save now you're going to notice that we have the hello on the screen which means our main container is rendering successfully inside our app container but with that being done let's go ahead and get started with the imports that we need so the first import is going to be the navigation container from at react navigation slash native then we want to import the create bottom navigator from react navigation slash bottom tabs we also want to import iron icons from react native vector icons slash iron icons then we need to make sure to import our screens so import home screen from dot slash screens slash home screen and we have to do this for the other two screens as well so import detail screen from dot slash screens slash detail screen and finally the settings screen and here we just type in settings screen and as i mentioned earlier we need to give these screens names so we're going to create some constants so screen names and the first thing we have to do is type in constant home name so you should create one of these for each one of your screens and this one's going to be called home and we can just copy that two more times change this one to details details settings and settings and below that we're going to go ahead and create a tab navigator so constant tab is going to equal create bottom tab navigator now we can go ahead and get rid of this view we can just take it off there and take off the import because we will not be using it inside our nav container so inside here the first thing we want to refer to is the navigation container then right below that we can type in tab dot navigator and this is going to contain a lot of information that we'll be using for our bottom navigation bar so the first thing we want to do is specify which screen we want to appear first and this is going to be called the initial route name so that's going to equal our home name because we want it to go to the home page first now we're going to create some screen options which gives us a lot of flexibility with how we want our layout to look so here we're going to have to insert a root which is essentially a location or the location that we're on and this should be inside parentheses because this is a arrow function add another pair of parentheses and add some curly brackets inside so the first thing we're going to do inside here is refer to the tab bar icon and it's going to take some parameters so we want to know is it focused we want to also specify the caller and the size and that's going to be an arrow function and i've taken this parentheses a bit too far it should stay right there and add a comma here so we need to create a variable called icon name so let's icon name and we want to also create a route name so let's route name equal route dot name so now we have to check if the route name is home then we want this certain effect to be applied to home so to do that we'll type in if route name is equal to the home name then we'll go ahead and type in icon name is going to be equal to if the icon is focused it's just going to be home otherwise it's going to be a home outline so depending on whether it's focused or not we're going to assign it one of these two icons which is included in the ian icon package and we're essentially going to do the same thing for the other two so we're going to type in else if rn is equal to details name then we want to provide a different effect so inside here we will just copy this part and paste it in except we need to change this to list and list outline else if rn is equal to settings name then we're going to do it one more time and we're going to change this to settings and settings outline and at the bottom it's important that we return an icon because this will load for the page that we want to display so here we type in return ian icon and we need to provide a name which is going to equal the icon name and you can also change the size of the icon by just editing that field so here we'll just go ahead and type in size and the caller is going to equal whatever color you want to pick so instead of using this elvis operator of course you can just insert icon name plus the size you want to change and every time you change to the icon and it is focused you'll be able to change the size and the color and you can add some really cool effects that way but still remaining inside the tab navigator we're going to create a few tab screens so we can see something on the emulator so tab dot screen first we need to provide a name of what the screen is going to be and that's going to be the home name and the component is going to be equal to what we imported up there which is our home screen then let's go ahead and close that and i believe we can save and we're going to have our first icon at the bottom if anything goes wrong of course make sure to reload your app because i found that working with these navigation components required a lot of refreshing and not just quick refreshing now we can copy and paste this two more times except the second time of course is going to be the details name and the details screen and the settings screen so so far so good we have the details the settings and so on but i also want to show you one more thing and that's how to customize the tab bar because right now this is very close to the bottom we might want to give it a bit more padding or you might want to customize the background color of the tab bar so right here where you see this closing angle bracket we're going to click enter and right below that we can type in tab bar options which is going to equal two curly brackets so we can insert some attributes such as the active tint color maybe we want it to be a different color that's not blue here we can go ahead and specify that by typing in a hex color or whatever is supported by javascript so tomato and inactive tint color which we can just set to gray for this example then we can also specify the label style so here we're going to add some curly brackets give it a padding bottom of 10 and a font size of 10. and now we should have some more space at the bottom but of course we also want to put some more padding at the top because it looks very weird like this so we'll type in style provide a padding of 10 followed by a height of 70. so now we have a very nice navigation bar at the bottom and if we click on the text it's going to take us to our home screen if we click on details it will take us to the details screen and if we click on settings of course we go to the settings screen so if you want to change any of these screens just go to the screen we created and you can change this accordingly so home screen can also be something random like that and it will update over here when we click on home screen we're going to get the alert box that this is a home screen and we're not going to navigate anywhere but with that being said guys that's actually all i wanted to show you in this tutorial i'm going to put my project up on github in case you want to look at that it might be easier to copy and paste that but of course if you have any other questions feel free to leave it in the comment section down below and i'll do my best to answer them otherwise with that being said i'll see you guys in the next video

Channel: Indently

Views: 119,658

Keywords: code palace, cde palace, code palce, palace code

Id: AnjyzruZ36E

Length: 14min 12sec (852 seconds)

Published: Thu Jul 08 2021