[Music] So today's video, I'll show you how to create the UI of the Instagram app using React Native. This is how the app would look, which is quite similar to the actual Instagram app. So, as you can see, we have all the tabs that are there in

the app. Obviously, I haven't set up all the tabs yet. It's only the feed tab that I've set up, and all the icons are also similar to the real app. Just a reminder that this is just the UI of the Instagram application and not a functional Instagram app. So, let's begin.

So, as always, to begin with, I've got an empty React Native project that I created with Expo. First things first, let's install the libraries that we need. So, we're going to be installing NativeBase, my favorite UI library to create React Native apps, and along with that

for navigation, we need React Navigation. So, let's install those. It's an `npm install native-base` and the next thing we're going to be installing is React Navigation, so `npm install react-navigation`. Once that's installed, we'll just run `npm install` once again just to

ensure that all the dependencies that are required are installed. So, now once that's done, let us refresh our project, and we're good to go. So, let's start with the `App.js` and create a stack navigator. Come to the top here and import the stack navigator. Next, let's create the

stack navigator. [Music] So, we got the `navigator` abstract navigator inside that. We'll have only one screen which is called the `mainScreen`, and it's going to point to the screen which is also going to be called `mainScreen`. So, let's create the `mainScreen`. The first

create a folder called components and inside that we'll create the file main screen dot yes here I'll just import some boilerplate code all it does is return a text field which says main screen so let's import the main screen into our app now and let's display our stack

navigator so get rid of this view from here and pass in the abstract navigator that we had created let's save that and reload our app there we see we're getting the main screen text that we have displayed so let's start by setting up our navigation bar we'll come here to the main screen dot

yes import icon from native base and we'll modify the navigation options of the react navigator so here we'll say static navigation options and that will put in a header left here we'll set up the icon for the camera pass in the title which is going to be

Instagram and we put in a header right which will be the send message icon so let's save that up as you can see we've got both the icons so let's just add some styles to position them correctly so it's a style padding-left of 10 and

on the other one we'll say style padding right of 10 now let's set up our tab navigator at the bottom so here on top let's first import the tab navigator from react navigation next let's create the tab navigator which is a constant app tab navigator here we

have to create five tabs so we have just created the five tabs the Home tab search tab add media tab likes tab and the profile tab now we have to create the files for these tabs so inside the components folder I'm creating a new folder called tabs and

navigator. So inside the app tab navigator, we'll treat the files, the first one is Home tab, door Cheers, next is Search tab. Yes, add media tab, note is like stabbed or j/s, and the profile tab, no chiz. So we have five files created here. As always, I'll just

import the boilerplate code inside them. I'll show you one of them. So this is just going to be called add media tab, and all it does is returns the text 'add media tab'. Similarly, for the other files, I'll put in the same stuff. Now, I need to

import these files in our main screen. So come to the main screen here on top. Let's import all these in. Now that we have all the files imported, let's display a tab navigator. Come here into the render method and get rid of this and display the app tab navigator here.

Once we save that out, we can see here that our tabs have come here. However, we do not have icons for the tabs. So let's set up the icons. So we'll set up the icons in the individual files. Open up the Home tab here. Just import icon on

top and we'll be using the navigation options to set up the icon. So come here with say static navigation options, say tab bar icon is the option on a set, pass in a prop called tintColor, which will declare in the main tab navigator. Inside here, we'll say icon named iOS home, style

will be color, which will equal to the tintColor that we passed. Then here, this bracket should be a round bracket and not a curly bracket. Let's save that out and then we can see our home tab is showing a home icon. So let's copy/paste these

options and the import icon to the other files and then we'll set up the icons for those files so as you can see over here we've got icons for all the tabs but they're all the same so let's just change the icons are now in the Search

tab we'll call the icon iOS search in the add media tab we'll call it iOS add circle in the likes tab we'll call it iOS heart and the profile tab we'll call it person so that we can see we've got tabs similar to the ones in Instagram but we

obviously don't want to show the text below that so we just change some settings in our app tab navigator come to our main screen and here below the screens we'll put in the properties so let's say animation enabled equal to true swipe enabled will be true tab bar

position just to ensure this fine rod as well we will say bottom and then we need to put in tab bar options so we'll come in here will say tab bar options inside that we'll put in the other options which is active tint color we'll put

that in as black when the tab is active inactive tint color which will be a gray and show label will be false which will remove the text and show icon will be true which is required for Android so as you can see that the text is gone and

icons are showing we also need to put in one more property which is required for Android otherwise the tab bar doesn't show so inside the tab bar option will say style and that will put in platform select and that will select Android and we need to put in the background color

of white, otherwise it will show as blue. We have two colons here, scattered of that, and here we'll just put in a comma and import platform here from react-native. So as you can see over there, we've got our tabs here in our tamper. We've got the icons in our

navigation bar. If we click these icons here, we can see a nice swipe animation is coming due to this animation enabled, and also we can swipe here to make sure that we change the tabs. In the next video, I'll show you how to create the component inside the field screen till

#1 Instagram UI Tutorial | React Native Layout(UI) Series

#1 Instagram UI Tutorial | React Native Layout(UI) Series

Scripts