If you're having trouble with the expo initial configuration with Expo v51, run this command:
npx create-expo-app@latest ./ --template blank
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we explore how to set up a file and folder structure for a React Native application. The focus is on organizing authentication routes and tab routes while creating necessary layout components and screens to enhance navigation within the app.
auth for authentication routes, formatted as a route group.AuthLayout for authentication screens without bottom navigation tabs.signin.jsx and signup.jsx within the auth group.tabs for organizing the application's main navigation structure.TabsLayout component.bookmark.jsx, create.jsx, home.jsx, and profile.jsx under the tabs category.[query].jsx for search functionality.00:00:00Â So, now that we know how to spin up a React Native application, we know how to do routing, and we have styles and fonts set up,
00:00:08Â we can actually create the file and folder structure of our application.
00:00:13Â We can do that by first creating a new folder, which will be within parentheses.
00:00:19Â And we will call it auth, like this.
00:00:22Â Once again, this is the same as within Next.js.
00:00:26Â If you put a folder within parentheses, it's considered a route group, allowing you to add additional pages or screens within it with a special layout.
00:00:37Â So within this auth, we can also create a new underscore layout dot JSX file.
00:00:44Â And within it, we can run RNFE, which is a React Native Functional Expert component like this.
00:00:51Â We can rename it to something like AuthLayout, so it makes more sense.
00:00:56Â Now, what is the reason why we're going to create a separate layout for the Auth?
00:01:00Â Well, if you think about it, only the odd screens and the onboarding won't have those tabs at the bottom, the navigation,
00:01:08Â right?
00:01:09Â If you see all the home screens right here, they have the home, create, profile, and so on, but our odd screens don't have that,
00:01:17Â which is exactly why we're going to use a separate layout.
00:01:21Â Now that we have the layout for our auth routes, let's go ahead and create them.
00:01:26Â The first auth route will be signin.jsx.
00:01:31Â And we can also run rnfe and simply put it right here and rename it to signin.
00:01:39Â And did I say route?
00:01:41Â I meant screen.
00:01:42Â We're creating screens here.
00:01:44Â So let's create a sign dash up dot JSX screen as well and run RNFE and rename it to sign up.
00:01:55Â There we go.
00:01:55Â So now our routes for the auth are good.
00:01:58Â And we also have to do a second route group also within parentheses called tabs.
00:02:06Â Within tabs, we're going to create a new custom layout.jsx where we can run rnfe and rename it to tabs layout.
00:02:18Â Soon enough, we'll implement that bottom bar that allows us to switch between all the pages within the tabs folder.
00:02:26Â And which pages are those or which screens should I say?
00:02:30Â The first one is the bookmark.jsx where we can also run rnfe and rename it to bookmark with a capital B.
00:02:39Â And keep in mind, we're just creating the structure right now to make our life easier later on.
00:02:45Â Then we're going to create a create.jsx where we can also run rnfe.
00:02:52Â This will be to create and add videos to our platform.
00:02:56Â We can create a home.jsx and run rnfe.
00:03:02Â And finally, we can create a profile.
00:03:07Â And finally, the profile will also be under the tabs category, so we can pull the profile we have created before into the tabs folder.
00:03:15Â Finally, we'll have one more page, which will be within its own folder called search.
00:03:21Â And here we're going to use another concept coming directly from Next.js.
00:03:26Â It's called a dynamic route.
00:03:28Â So let's create a new file and put it within square brackets and call it query.jsx.
00:03:35Â This will allow us to rename the page or get the query information for the specific search our user is trying to do.
00:03:42Â There, we can also run rnfe and rename it to search.
00:03:49Â Great.
00:03:50Â Now the majority of our file and folder structure has been set up, but we have no way of navigating between those routes.
00:03:58Â So let's go to tabs and tab into the layout.
00:04:03Â Here we'll create this bottom part that will allow us then to navigate between all of the other pages within our app.
00:04:12Â So to see this tab's layout, which we'll create soon, we can navigate to our index.jsx and modify this link that navigates the profile and make it go to
00:04:22Â something like home.
00:04:23Â So we can say go to home.
00:04:27Â And now if we click on it, you can see that now we have the tabs right here, tabs folder, and the tabs layout, which means that we are ready to start creating
00:04:37Â our tabs.
00:04:38Â So to get started, let's import tabs from Expo Router by saying import tabs, and we'll also use redirect later on.
00:04:50Â from expo-router.
00:04:54Â We can then create just an empty react fragment with which we'll wrap everything and then render the tabs component like so.
00:05:04Â Within the tabs component, we'll also have a tabs.screen component, which will be self-closing.
00:05:11Â And to it, we can give a property of name is equal to home And immediately, you can see that we have four different things at the bottom.
00:05:21Â Home, create, profile, and bookmark.
00:05:24Â And these are the exact files that we have created.
00:05:28Â This is pretty cool, right?
00:05:30Â But right now they're just upside down triangles.
00:05:33Â What we can do is of course, modify them a bit.
00:05:36Â So I'm going to give it some additional options, which is an object that has a title of uppercase home like this.
00:05:45Â We can also choose whether a header is shown on that route.
00:05:49Â So we can say false in this case, and we can modify the tab bar icon, which will be a callback function inside of which we can destructure the color and
00:06:03Â the focus state and return the icon that we want to show.
00:06:08Â Make sure to use just parentheses here and not open a function block.
00:06:12Â Within here, we can return a tab icon, which is a new component, which we'll create.
00:06:18Â So right here, let's say const tab icon is.
00:06:24Â a React functional component that returns, well, for now we can return just a view.
00:06:33Â View is like a div, we'll use it quite often.
00:06:36Â And within that view, we can render an image.
00:06:39Â And this image will come directly from React Native.
00:06:44Â Once again, very similar to Next.js if you're used to that.
00:06:48Â This image will accept a source, which we can pass into the tab icon functional component.
00:06:55Â So we can destructure some things like the icon, the color, the name, and the focus state.
00:07:03Â That way, we now know what we need to pass.
00:07:06Â So right here below, we can render the tab icon, self-closing, and to it, pass the icon.
00:07:14Â And now we need to import the icons we have created before within our constants.
00:07:19Â So we can say import icons coming from dot dot slash dot dot slash constants.
00:07:28Â And if we scroll down, we can now use the icons.home.
00:07:33Â This is the home icon specifically.
00:07:35Â We also have the caller coming directly from the callback function.
00:07:39Â We have the name equal to home, and we have the focus state, which will simply pass over.
00:07:47Â Focused is equal to focused.
00:07:49Â This should give us everything we need to now start rendering our tab icon, which needs its image.
00:07:56Â So let's simply render the icon as the source of that image.
00:08:01Â And already you can see a huge home icon at the bottom.
00:08:05Â Let's style it a bit by using the resize tool.
00:08:09Â mode equal to contain.
00:08:12Â This is a bit different, but of course we can just read the docs of React Native Image and understand which props does it accept.
00:08:20Â TintColor is another property to which we can pass the color coming from props and the class name using native wind, not tailwind,
00:08:30Â of w-6 and h-6 as well.
00:08:34Â And now we have a beautiful looking home icon at the bottom.
00:08:39Â Right below the image, we can also render the text and that text will render the name.
00:08:44Â Now we can see two different names right here.
00:08:47Â So let's style it a bit by giving it a class name equal to, and we want to modify the state depending on whether it's focused or not.
00:08:55Â So I'm going to open a dynamic template string and say if it's focused, Then apply a font of P Semi Bold, and P stands for Poppins,
00:09:07Â which is the name of the font.
00:09:08Â Else apply a font of P Regular, like this.
00:09:13Â I was almost about to say Pregular, but no, it's Poppins Regular.
00:09:17Â So then we can do a Text-XS right here to make it smaller.
00:09:24Â But now we can see the home two times, so we need to modify our options in the tab screen a bit more.
00:09:31Â And we can do that by modifying the tabs in general.
00:09:35Â So right here, we can pass additional screen options equal to an object where we can say tab bar showLabel will be set to false.
00:09:48Â And now we have only our specific label that we chose.
00:09:52Â Also, I can see it's not centered properly, so let's go into this view and give it a class name of items-center, justify-center,
00:10:03Â and a gap of two to create some space.
00:10:06Â There we go.
00:10:07Â That's better.
00:10:08Â Next, let's just copy this tab screen and duplicate it three more times.
00:10:14Â One, two, three.
00:10:16Â And that way we can make it work for all of the other icons or screens by changing the name to Bookmark, changing the title to Bookmark with a capital B,
00:10:28Â We can also change the icon to icon stat bookmark and change the name to bookmark.
00:10:36Â You get the idea, right?
00:10:38Â If we save it, you're going to get an error because we still have some duplicate screens.
00:10:43Â So before we can see anything, we'll have to modify all of them.
00:10:47Â And I do believe that my bookmark was supposed to be a second screen, so I'm just going to copy it and move it over to the second place right here after
00:10:57Â the home.
00:10:58Â So we have home, we have bookmark, and the third one on our list is going to be create, allowing us to add new videos to the platform.
00:11:08Â So name create, title create, icons.plus, and name is going to be create.
00:11:18Â And the last one of our tab screen will be profile.
00:11:22Â So the name is profile, title is profile, icons.profile, and name is profile.
00:11:32Â If we save it, the error is gone.
00:11:34Â We can re-navigate to the homepage.
00:11:37Â And you can see four of these beautiful tabs at the bottom, which if you click on them, will navigate to different pages.
00:11:46Â This is great.
00:11:47Â They change the focus state.
00:11:49Â And if you pay close attention at the top, you can see that the text within the screen changes.
00:11:56Â This is great.
00:11:58Â So simple and so similar to what we're used to.
00:12:01Â Let's also apply some additional class names to tabs in general by modifying the screen options and giving it a tab bar active tint color,
00:12:14Â which we can put something like, let's do hash FFA001.
00:12:18Â This one matches our theme a bit more.
00:12:24Â We can also do a tab bar inactive tint color, and we can make it something like hash cd cd e zero.
00:12:34Â We can also modify the tab bar style, which is an object, or we can change the background color to something like hash one six one six two two,
00:12:47Â which if you remember is our primary color.
00:12:51Â And yes, even though it is in the Tailwind config, and we can use it just as a color primary, we're here within an object,
00:12:58Â passing to the screen options, so we still have to type it out manually just in this case.
00:13:04Â We also can set up the border top width to something like one.
00:13:09Â I found that to work the best and also border top color to something like hash 232533 and set the height.
00:13:23Â to something like 84 pixels.
00:13:25Â And now we have this modern looking dark tabs bar, but we cannot see the name of our tabs.
00:13:32Â And that's because we have to go to our text and add a special property of style.
00:13:38Â color is set to the color that we're passing from the props.
00:13:43Â In this case, that'll be white.
00:13:45Â So now you can see this beautiful home, bookmark, create, and so on, and we can nicely navigate between them.
00:13:53Â And it's not just about changing the color in the tabs bar.
00:13:57Â It's about actually navigating to different screens of our application.
00:14:02Â which soon enough will look exactly like it looks right now on Figma.
00:14:07Â This is a beautiful onboarding design, and I think I like this onboarding screen the most.
00:14:12Â It is visually the most pleasing.
00:14:14Â So let's get started with that, as it's our first screen anyway.
00:14:18Â And of course, this screen just looks good, doesn't yet implement any functionality, but as you know, you're building a full stack application.
00:14:27Â So after we're done with creating the onboarding screen, after you kind of feel a bit more comfortable working within a React Native mobile native environment,
00:14:36Â you'll be able to dive into the sign up and sign in screens where we'll immediately start implementing the logic.
00:14:46Â So let's get started with the onboarding screen.
00:14:49Â You can see our designer here has pulled out specific assets that we can use within the application.
00:14:55Â I have already provided these to you within the assets, but in case you're wondering how we can use them and how we can download them yourself,
00:15:03Â you can just select them and then scroll down and click export.
00:15:07Â That way you'll have those assets.
00:15:09Â Also, you can see that our gray designer has also provided us with different colors to implement the gradient-looking button.