[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

Unsure Programmer

React Native를 사용하여 Instagram 앱의 UI 만들기.

앱의 전체 기능이 아닌 UI에 중점을 둡니다.

프로젝트는 Expo로 생성된 빈 React Native 프로젝트로 시작합니다.

필요한 라이브러리 설치: NativeBase 및 React Navigation.

메인 화면을 앱으로 가져와 스택 탐색기를 표시합니다.

아이콘으로 탐색 모음 설정하기.

아이콘 위치를 위한 스타일 추가.

5개의 탭으로 탭 탐색기 가져오기 및 만들기.

각 탭(홈, 검색, 미디어 추가, 좋아요, 프로필)에 대한 파일 만들기.

각 탭 파일에 상용구 코드 가져오기.

탭 파일을 메인 화면으로 가져와 탭 탐색기를 표시합니다.

네이티브베이스의 탐색 옵션과 '아이콘' 컴포넌트를 사용하여 아이콘을 설정합니다.

아이콘 설정을 다른 탭 파일에 복사합니다.

아이콘 아래의 텍스트 레이블을 제거하고 스타일 속성을 추가합니다.

Android 호환성을 위한 속성 추가.

Android 탭 바의 배경색 설정하기.

스와이프 애니메이션으로 완성된 UI를 미리 볼 수 있습니다.

다음 동영상 주제 미리보기: 피드 화면 내에서 컴포넌트 만들기.

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

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

스크립트